fix: fix the env-label issue

Author: AliKdhim87

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

@@ -4,6 +4,7 @@ import type { StatusBadgeProps as UtrechtStatusBadgeProps } from '@utrecht/compo
 import { forwardRef } from 'react';
 import type { ForwardedRef, PropsWithChildren } from 'react';
 import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 
 import usePluginConfig from '../../hooks/use-plugin-config';
 import { getTranslation } from '../../utils/getTranslation';
@@ -12,6 +13,11 @@ interface StatusBadgeProps extends UtrechtStatusBadgeProps {
   gap?: boolean;
 }
 
+const StyledStatusBadge = styled(UtrechtStatusBadge)`
+  max-inline-size: 100%;
+  inline-size: 100%;
+`;
+
 export const StatusBadge = forwardRef(
   ({ gap, ...resProps }: PropsWithChildren<StatusBadgeProps>, ref: ForwardedRef<HTMLSpanElement>) => {
     const { formatMessage } = useIntl();
@@ -22,12 +28,20 @@ export const StatusBadge = forwardRef(
     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}>
+      <Box
+        display="flex"
+        width="100%"
+        textAlign="center"
+        className="utrecht-theme test"
+        marginTop={gap ? 5 : undefined}
+        marginBottom={gap ? 5 : undefined}
+      >
+        <StyledStatusBadge ref={ref} status="warning" {...resProps}>
           {formatMessage({
             id: getTranslation(`${config?.env_label}-env-label-message`),
+            defaultMessage: `${config?.env_label}`,
           })}
-        </UtrechtStatusBadge>
+        </StyledStatusBadge>
       </Box>
     );
   },

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

@@ -24,7 +24,7 @@ const usePluginConfig = () => {
     const fetchData = async () => {
       try {
         const endpoint = `/${PLUGIN_ID}/config`;
-        const data = await client.get(endpoint, {
+        const { data } = await client.get(endpoint, {
           signal: abortController.signal,
         });
 

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

@@ -32,17 +32,13 @@ export default {
       name: 'env-label',
       Component: StatusBadge,
     });
-    app.getPlugin('content-manager').injectComponent('editView', 'informations', {
-      name: 'env-label',
-      Component: StatusBadge,
-    });
-    app.getPlugin('content-manager').injectComponent('listView', 'deleteModalAdditionalInfos', {
+    app.getPlugin('content-manager').injectComponent('editView', 'right-links', {
       name: 'env-label',
       Component: StatusBadge,
     });
   },
 
-  async registerTranslation({ locales }: { locales: string[] }) {
+  async registerTrads({ locales }: { locales: string[] }) {
     const importedTranslations = await Promise.all(
       locales.map((locale: any) => {
         return import(`./translations/${locale}.json`)

packages/strapi-plugin-env-label/server/controllers/env-label.ts

@@ -9,8 +9,8 @@ export default ({ strapi }: { strapi: Core.Strapi }) => ({
       const config = await strapi.plugin(PLUGIN_ID).service('plugin').getConfig();
       ctx.body = config;
     } catch (error) {
-      strapi.log.error('Error fetching Preview button config:', error);
-      ctx.badRequest('Something went wrong with the Preview button config');
+      strapi.log.error('Error fetching environment label config:', error);
+      ctx.badRequest('Something went wrong with the environment label config');
     }
   },
 });