🎃
Strapi v5で設定画面を追加する
はじめに
Strapi4 から Strapi5 へ移行する過程で、色々と互換性がなくなったプラグインがありますが、
strapi-app-version というプラグインの利用をやめて同等の機能を実装した際のメモを残しておきます。
Strapi app version plugin
package.json からアプリのバージョンを拾って、設定画面に表示してくれるプラグインです。
実装
実装にあたって、こちらの記事を参考にさせていただき記事中の既存のGlobal Settingsの中に追加するパターンを採用させていただきました。
また UI 部分は Strapi のコードを参考にしました。
ライブラリをインストールする
@strapi/design-system パッケージを利用するので以下のコマンドでライブラリをインストールします。
npm i @strapi/design-system@2.0.0-rc.24
画面を追加する
src/admin に components/AppVersion を作成し、index.tsx を作成します。
mkdir -p src/admin/components/AppVersion
touch src/admin/components/AppVersion/index.tsx
ファイルの中身はこんな感じになります。
デザイン部分はそのまま Strapi のコードをそっくりそのまま利用しています。
import * as React from "react";
import { useIntl } from "react-intl";
import { Flex, Grid, Typography } from "@strapi/design-system";
import { Layouts, Page } from "@strapi/admin/strapi-admin";
import packageJson from "../../../../package.json";
export default function AppVersion(): React.JSX.Element {
const { formatMessage } = useIntl();
return (
<Layouts.Root>
<Page.Title>
{formatMessage(
{ id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
{ name: "App Version" }
)}
</Page.Title>
<Page.Main>
<Layouts.Header title="App Version" subtitle={`Sample CMS Version`} />
<Layouts.Content>
<Flex direction="column" alignItems="stretch" gap={6}>
<Flex
direction="column"
alignItems="stretch"
gap={4}
hasRadius
background="neutral0"
shadow="tableShadow"
paddingTop={6}
paddingBottom={6}
paddingRight={7}
paddingLeft={7}
>
<Typography variant="delta" tag="h3">
{formatMessage({
id: "global.details",
defaultMessage: "Details",
})}
</Typography>
<Grid.Root gap={5} tag="dl">
<Grid.Item col={6} s={12} direction="column" alignItems="start">
<Typography variant="sigma" textColor="neutral600" tag="dt">
{formatMessage({
id: "Settings.app.sampleCmsVersion",
defaultMessage: "sample cms version",
})}
</Typography>
<Flex gap={3} direction="column" alignItems="start" tag="dd">
<Typography>v{packageJson.version}</Typography>
</Flex>
</Grid.Item>
</Grid.Root>
</Flex>
</Flex>
</Layouts.Content>
</Page.Main>
</Layouts.Root>
);
}
設定画面の追加
一つ前の手順で作成した画面を利用して、
src/admin/app.tsx を以下のように修正します。
import type { StrapiApp } from '@strapi/strapi/admin';
export default {
config: {
locales: [],
},
bootstrap(app: StrapiApp) {
console.log(app);
},
register(app: StrapiApp) {
app.addSettingsLink('global', {
intlLabel: {
id: 'app-version',
defaultMessage: 'App Version'
},
id: 'app-version',
to: '/app-version',
Component: async () => await import('./components/AppVersion'),
permissions: [],
})
},
};
動作確認
アプリを起動します。
npm run develop
ブラウザで http://localhost:1337/admin へアクセスします。
サイドメニューの Settings アイコンより App Version を選択します。
作業は以上となります！
サンプルコード
まるごと下記リポジトリに置きました。ご参考まで。
Discussion