feat: migrate @frameless/env-label to Strapi 5

Author: Marwa

.changeset/tired-toys-grab.md

@@ -0,0 +1,6 @@
+---
+"@frameless/strapi-plugin-env-label": major
+"@frameless/dashboard": major
+---
+
+Migrate `@frameless/env-albel` to Strapi version 5

apps/dashboard/config/plugins.ts

@@ -1,4 +1,10 @@
 export default ({ env }) => ({
+  'env-label': {
+    enabled: true,
+    config: {
+      env_label: env('STRAPI_ENV_LABEL'),
+    },
+  },
   'preview-button': {
     enabled: true,
     config: {

apps/dashboard/package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@_sh/strapi-plugin-ckeditor": "6.0.3",
     "@frameless/preview-button": "workspace:*",
+    "@frameless/strapi-plugin-env-label": "workspace:*",
     "@strapi/design-system": "2.1.2",
     "@strapi/plugin-graphql": "5.33.4",
     "@strapi/plugin-users-permissions": "5.33.4",

packages/strapi-plugin-env-label/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @frameless/strapi-plugin-env-label [1.1.0](https://github.com/frameless/strapi/compare/@frameless/strapi-plugin-env-label@1.0.0...@frameless/strapi-plugin-env-label@1.1.0) (2024-05-02)
+
+
+### Features
+
+* **deps:** upgrade `@utrecht/` packages ([a835ad6](https://github.com/frameless/strapi/commit/a835ad66a0095e8d1d762677b380e89010225070))
+
+# @frameless/strapi-plugin-env-label 1.0.0 (2024-05-02)
+
+
+### Features
+
+* **strap-plugin-env-label:** create strap-plugin-env-label ([f8a3a22](https://github.com/frameless/strapi/commit/f8a3a228476edc41c5b98af5565eb4e730c4f235))

packages/strapi-plugin-env-label/README.md

@@ -0,0 +1,33 @@
+# @frameless/strapi-plugin-env-label
+
+A Strapi plugin designed to visually represent the current environment.
+
+## Installation
+
+To install the plugin, navigate to your Strapi dashboard and execute the following command in your terminal:
+
+```shell
+yarn add @frameless/strapi-plugin-env-label
+# or
+npm install @frameless/strapi-plugin-env-label
+
+```
+
+## Configuration
+
+Update the `your-strapi-directory/config/plugin.ts` file by adding the following code:
+
+```ts
+
+export default ({ env }) => ({
+  'env-label': {
+    enabled: true,
+    config: {
+      env_label: // use env('USE_ENV_VARIABLE') or put the value here, // accepted values: development|acceptance
+    },
+  },
+});
+
+```
+
+After making these changes, rebuild your Strapi dashboard and start the dashboard server.

packages/strapi-plugin-env-label/admin/src/components/Initializer/index.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react';
+
+import { PLUGIN_ID } from '../../pluginId';
+
+type InitializerProps = {
+  setPlugin: (id: string) => void;
+};
+
+const Initializer = ({ setPlugin }: InitializerProps) => {
+  const ref = useRef(setPlugin);
+
+  useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+
+  return null;
+};
+
+export { Initializer };

packages/strapi-plugin-env-label/admin/src/components/StatusBadge/index.tsx

@@ -0,0 +1,36 @@
+import { Box } from '@strapi/design-system';
+import { StatusBadge as UtrechtStatusBadge } from '@utrecht/component-library-react';
+import type { StatusBadgeProps as UtrechtStatusBadgeProps } from '@utrecht/component-library-react';
+import { forwardRef } from 'react';
+import type { ForwardedRef, PropsWithChildren } from 'react';
+import { useIntl } from 'react-intl';
+
+import usePluginConfig from '../../hooks/use-plugin-config';
+import { getTranslation } from '../../utils/getTranslation';
+
+interface StatusBadgeProps extends UtrechtStatusBadgeProps {
+  gap?: boolean;
+}
+
+export const StatusBadge = forwardRef(
+  ({ gap, ...resProps }: PropsWithChildren<StatusBadgeProps>, ref: ForwardedRef<HTMLSpanElement>) => {
+    const { formatMessage } = useIntl();
+    const { config } = usePluginConfig();
+
+    const regex = /^(development|acceptance)$/;
+
+    if (!config?.env_label || !regex.test(config.env_label)) return null;
+
+    return (
+      <Box className="utrecht-theme" marginTop={gap ? 5 : undefined} marginBottom={gap ? 5 : undefined}>
+        <UtrechtStatusBadge ref={ref} status="warning" {...resProps}>
+          {formatMessage({
+            id: getTranslation(`${config?.env_label}-env-label-message`),
+          })}
+        </UtrechtStatusBadge>
+      </Box>
+    );
+  },
+);
+
+StatusBadge.displayName = 'StatusBadge';

packages/strapi-plugin-env-label/admin/src/constants.ts

@@ -0,0 +1,3 @@
+import { PLUGIN_ID } from './pluginId';
+
+export const RESOLVE_CONFIG = `${PLUGIN_ID}/resolve-config`;

packages/strapi-plugin-env-label/admin/src/hooks/use-plugin-config.ts

@@ -0,0 +1,59 @@
+import { useNotification, useFetchClient } from '@strapi/strapi/admin';
+import { useIntl } from 'react-intl';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { RESOLVE_CONFIG } from '../constants';
+import { PLUGIN_ID } from '../pluginId';
+import { getTranslation } from '../utils/getTranslation';
+
+const usePluginConfig = () => {
+  const dispatch = useDispatch();
+  const { toggleNotification } = useNotification();
+  const { formatMessage } = useIntl();
+  const { isLoading, config } = useSelector((state: any) => state[`${PLUGIN_ID}_config`]);
+  const client = useFetchClient();
+
+  useEffect(() => {
+    // Do nothing if we have already loaded the config data.
+    if (!isLoading && !!config) {
+      return;
+    }
+    const abortController = new AbortController();
+
+    const fetchData = async () => {
+      try {
+        const endpoint = `/${PLUGIN_ID}/config`;
+        const data = await client.get(endpoint, {
+          signal: abortController.signal,
+        });
+
+        return data ?? {};
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+
+        if (!abortController.signal.aborted) {
+          toggleNotification({
+            type: 'warning',
+            message: formatMessage({
+              id: getTranslation('notification.error'),
+              defaultMessage: 'An error occurred while fetching data',
+            }),
+          });
+
+          return err;
+        }
+        return null;
+      }
+    };
+    fetchData().then((data) => dispatch({ type: RESOLVE_CONFIG, data }));
+
+    // eslint-disable-next-line consistent-return
+    return () => abortController.abort();
+  }, [client, config, dispatch, isLoading, toggleNotification, formatMessage]);
+
+  return { config, isLoading };
+};
+
+export default usePluginConfig;

packages/strapi-plugin-env-label/admin/src/index.tsx

@@ -0,0 +1,66 @@
+import { Initializer } from './components/Initializer';
+import { StatusBadge } from './components/StatusBadge';
+import { PLUGIN_ID } from './pluginId';
+import reducers from './reducers';
+import '@utrecht/component-library-css';
+import '@utrecht/design-tokens/dist/index.css';
+
+type TranslateOptions = Record<string, string>;
+
+const prefixPluginTranslations = (translate: TranslateOptions, pluginId: string): TranslateOptions => {
+  if (!pluginId) {
+    throw new TypeError("pluginId can't be empty");
+  }
+  return Object.keys(translate).reduce((acc, current) => {
+    acc[`${pluginId}.${current}`] = translate[current];
+    return acc;
+  }, {} as TranslateOptions);
+};
+export default {
+  register(app: any) {
+    app.addReducers(reducers);
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: true,
+      name: PLUGIN_ID,
+    });
+  },
+
+  bootstrap(app: any) {
+    app.getPlugin('content-manager').injectComponent('listView', 'actions', {
+      name: 'env-label',
+      Component: StatusBadge,
+    });
+    app.getPlugin('content-manager').injectComponent('editView', 'informations', {
+      name: 'env-label',
+      Component: StatusBadge,
+    });
+    app.getPlugin('content-manager').injectComponent('listView', 'deleteModalAdditionalInfos', {
+      name: 'env-label',
+      Component: StatusBadge,
+    });
+  },
+
+  async registerTranslation({ locales }: { locales: string[] }) {
+    const importedTranslations = await Promise.all(
+      locales.map((locale: any) => {
+        return import(`./translations/${locale}.json`)
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, PLUGIN_ID),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      }),
+    );
+
+    return Promise.resolve(importedTranslations);
+  },
+};