strapi-plugin-navigation 2.0.0-rc.1 → 2.0.3

package/admin/src/hooks/useNavigationConfig.js

@@ -0,0 +1,58 @@
+import { useQuery, useQueryClient } from 'react-query';
+import { useNotification } from '@strapi/helper-plugin';
+import { fetchNavigationConfig, restartStrapi, restoreNavigationConfig, updateNavigationConfig } from '../utils/api';
+import { getTrad } from '../translations';
+
+const useNavigationConfig = () => {
+  const queryClient = useQueryClient();
+  const toggleNotification = useNotification();
+  const { isLoading, data, err } = useQuery('navigationConfig', () =>
+    fetchNavigationConfig(toggleNotification)
+  );
+
+  const handleError = (type) => {
+    toggleNotification({
+      type: 'warning',
+      message: getTrad(`pages.settings.notification.${type}.error`),
+    });
+  };
+
+  const handleSuccess = async (type) => {
+    await queryClient.invalidateQueries('navigationConfig');
+    toggleNotification({
+      type: 'success',
+      message: getTrad(`pages.settings.notification.${type}.success`),
+    });
+  };
+  
+  const submitMutation = async (...args) => {
+    try {
+      await updateNavigationConfig(...args);
+      await handleSuccess('submit');
+    } catch (e) {
+      handleError('submit');
+    }
+  } 
+
+  const restoreMutation = async (...args) => {
+    try {
+      await restoreNavigationConfig(...args);
+      await handleSuccess('restore');
+    } catch (e) {
+      handleError('restore');
+    }
+  }
+
+  const restartMutation = async (...args) => {
+    try {
+      await restartStrapi(...args);
+      await handleSuccess('restart');
+    } catch (e) {
+      handleError('restart');
+    }
+  }
+
+  return { data, isLoading, err, submitMutation, restoreMutation, restartMutation };
+};
+
+export default useNavigationConfig;

package/admin/src/index.js

@@ -3,11 +3,34 @@ import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import pluginPermissions from './permissions';
 import NavigationIcon from './components/icons/navigation';
-
+import { getTrad } from './translations';
 const name = pluginPkg.strapi.name;
 
 export default {
   register(app) {
+    app.createSettingSection(
+      {
+        id: pluginId,
+        intlLabel: { id: getTrad('pages.settings.section.title'), defaultMessage: 'Navigation Plugin' },
+      },
+      [
+        {
+          intlLabel: {
+            id: getTrad('pages.settings.section.subtitle'),
+            defaultMessage: 'Configuration',
+          },
+          id: 'navigation',
+          to: `/settings/${pluginId}`,
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "navigation-settings" */ './pages/SettingsPage'
+            );
+    
+            return component;
+          },
+          permissions: pluginPermissions.access,
+        }
+      ]);
     app.addMenuLink({
       to: `/plugins/${pluginId}`,
       icon: NavigationIcon,

package/admin/src/pages/SettingsPage/index.js

@@ -0,0 +1,311 @@
+import React, { useState } from 'react';
+import { Formik } from 'formik';
+import { isEmpty, capitalize, isEqual } from 'lodash';
+
+import {
+  CheckPermissions,
+  LoadingIndicatorPage,
+  Form,
+  useOverlayBlocker,
+  useAutoReloadOverlayBlocker,
+} from '@strapi/helper-plugin';
+import { Main } from '@strapi/design-system/Main';
+import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import { Button } from '@strapi/design-system/Button';
+import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
+import { Typography } from '@strapi/design-system/Typography';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { ToggleInput } from '@strapi/design-system/ToggleInput';
+import { NumberInput } from '@strapi/design-system/NumberInput';
+import { Select, Option } from '@strapi/design-system/Select';
+import { Check, Refresh, Play } from '@strapi/icons';
+import { SettingsPageTitle } from '@strapi/helper-plugin';
+import {
+  Card,
+  CardBody,
+  CardContent,
+} from '@strapi/design-system/Card';
+
+import permissions from '../../permissions';
+import useNavigationConfig from '../../hooks/useNavigationConfig';
+import useAllContentTypes from '../../hooks/useAllContentTypes';
+import { navigationItemAdditionalFields } from '../View/utils/enums';
+import ConfirmationDialog from '../../components/ConfirmationDialog';
+import RestartAlert from '../../components/RestartAlert';
+import { getMessage } from '../../utils';
+
+const SettingsPage = () => {
+  const { lockApp, unlockApp } = useOverlayBlocker();
+  const { lockAppWithAutoreload, unlockAppWithAutoreload } = useAutoReloadOverlayBlocker();
+  const [isRestorePopupOpen, setIsRestorePopupOpen] = useState(false);
+  const [isRestartRequired, setIsRestartRequired] = useState(false);
+  const { data: navigationConfigData, isLoading: isConfigLoading, err: configErr, submitMutation, restoreMutation, restartMutation } = useNavigationConfig();
+  const { data: allContentTypesData, isLoading: isContentTypesLoading, err: contentTypesErr } = useAllContentTypes();
+  const isLoading = isConfigLoading || isContentTypesLoading;
+  const isError = configErr || contentTypesErr;
+
+  const preparePayload = ({ selectedContentTypes, nameFields, audienceFieldChecked, allowedLevels }) => ({
+    contentTypes: selectedContentTypes,
+    contentTypesNameFields: nameFields,
+    additionalFields: audienceFieldChecked ? [navigationItemAdditionalFields.AUDIENCE] : [],
+    allowedLevels: allowedLevels,
+    gql: {
+      navigationItemRelated: selectedContentTypes.map(uid => allContentTypes.find(ct => ct.uid === uid).info.displayName)
+    }
+  })
+  const onSave = async (form) => {
+    lockApp();
+    const payload = preparePayload(form);
+    await submitMutation({ body: payload });
+    const isContentTypesChanged = !isEqual(payload.contentTypes, navigationConfigData.contentTypes);
+    if (isContentTypesChanged && navigationConfigData.isGQLPluginEnabled) {
+      setIsRestartRequired(true);
+    }
+    unlockApp();
+  }
+
+  const onPopupClose = async (isConfirmed) => {
+    setIsRestorePopupOpen(false);
+    if (isConfirmed) {
+      lockApp();
+      await restoreMutation();
+      unlockApp();
+      setIsRestartRequired(true);
+    }
+  }
+
+  const handleRestart = async () => {
+    lockAppWithAutoreload();
+    await restartMutation();
+    setIsRestartRequired(false);
+    unlockAppWithAutoreload();
+  };
+  const handleRestartDiscard = () => setIsRestartRequired(false);
+
+  const prepareNameFieldFor = (uid, current, value) => ({
+    ...current,
+    [uid]: value && !isEmpty(value) ? [...value] : undefined,
+  });
+
+  if (isLoading || isError) {
+    return (
+      <>
+        <SettingsPageTitle
+          name={getMessage('Settings.email.plugin.title', 'Configuration')}
+        />
+        <LoadingIndicatorPage>
+          Fetching plugin config...
+        </LoadingIndicatorPage>
+      </>
+    )
+  }
+
+  const allContentTypes = !isLoading && Object.values(allContentTypesData).filter(item => item.uid.includes('api::'));
+  const selectedContentTypes = navigationConfigData?.contentTypes.map(item => item.uid);
+  const audienceFieldChecked = navigationConfigData?.additionalFields.includes(navigationItemAdditionalFields.AUDIENCE);
+  const allowedLevels = navigationConfigData?.allowedLevels;
+  const nameFields = navigationConfigData?.contentTypesNameFields
+
+  return (
+    <>
+      <SettingsPageTitle
+        name={getMessage('Settings.email.plugin.title', 'Configuration')}
+      />
+      <Main labelledBy="title">
+        <Formik
+          initialValues={{
+            selectedContentTypes,
+            audienceFieldChecked,
+            allowedLevels,
+            nameFields,
+          }}
+          onSubmit={onSave}
+        >
+          {({ handleSubmit, setFieldValue, values }) => (
+            <Form noValidate onSubmit={handleSubmit}>
+              <HeaderLayout
+                title={getMessage('pages.settings.header.title')}
+                subtitle={getMessage('pages.settings.header.description')}
+                primaryAction={
+                  <CheckPermissions permissions={permissions.access}>
+                    <Button type="submit" startIcon={<Check />} disabled={isRestartRequired}>
+                      {getMessage('pages.settings.actions.submit')}
+                    </Button>
+                  </CheckPermissions>
+                }
+              />
+              <ContentLayout>
+                <Stack size={7}>
+                  {isRestartRequired && (
+                    <RestartAlert
+                      closeLabel={getMessage('pages.settings.actions.restart.alert.cancel')}
+                      title={getMessage('pages.settings.actions.restart.alert.title')}
+                      action={<Box><Button onClick={handleRestart} startIcon={<Play />}>{getMessage('pages.settings.actions.restart')}</Button></Box>}
+                      onClose={handleRestartDiscard}>
+                      {getMessage('pages.settings.actions.restart.alert.description')}
+                    </RestartAlert>)}
+                  <Box
+                    background="neutral0"
+                    hasRadius
+                    shadow="filterShadow"
+                    padding={6}
+                  >
+                    <Stack size={4}>
+                      <Typography variant="delta" as="h2">
+                        {getMessage('pages.settings.general.title')}
+                      </Typography>
+                      <Grid gap={4}>
+                        <GridItem col={12} s={12} xs={12}>
+                          <Select
+                            name="selectedContentTypes"
+                            label={getMessage('pages.settings.form.contentTypes.label')}
+                            placeholder={getMessage('pages.settings.form.contentTypes.placeholder')}
+                            hint={getMessage('pages.settings.form.contentTypes.hint')}
+                            onClear={() => setFieldValue('selectedContentTypes', [], false)}
+                            value={values.selectedContentTypes}
+                            onChange={(value) => setFieldValue('selectedContentTypes', value, false)}
+                            multi
+                            withTags
+                            disabled={isRestartRequired}
+                          >
+                            {allContentTypes.map((item) => <Option key={item.uid} value={item.uid}>{item.info.displayName}</Option>)}
+                          </Select>
+                        </GridItem>
+                        <GridItem col={3} s={6} xs={12}>
+                          <NumberInput
+                            name="allowedLevels"
+                            label={getMessage('pages.settings.form.allowedLevels.label')}
+                            placeholder={getMessage('pages.settings.form.allowedLevels.placeholder')}
+                            hint={getMessage('pages.settings.form.allowedLevels.hint')}
+                            onValueChange={(value) => setFieldValue('allowedLevels', value, false)}
+                            value={values.allowedLevels}
+                            disabled={isRestartRequired}
+                          />
+                        </GridItem>
+                      </Grid>
+                    </Stack>
+                  </Box>
+                  <Box
+                    background="neutral0"
+                    hasRadius
+                    shadow="filterShadow"
+                    padding={6}
+                  >
+                    <Stack size={4}>
+                      <Typography variant="delta" as="h2">
+                        {getMessage('pages.settings.additional.title')}
+                      </Typography>
+                      <Grid gap={4}>
+                        <GridItem col={6} s={12} xs={12}>
+                          <ToggleInput
+                            name="audienceFieldChecked"
+                            label={getMessage('pages.settings.form.audience.label')}
+                            hint={getMessage('pages.settings.form.audience.hint')}
+                            checked={values.audienceFieldChecked}
+                            onChange={({ target: { checked } }) => setFieldValue('audienceFieldChecked', checked, false)}
+                            onLabel="Enabled"
+                            offLabel="Disabled"
+                            disabled={isRestartRequired}
+                          />
+                        </GridItem>
+                      </Grid>
+                    </Stack>
+                  </Box>
+                  {!isEmpty(values.selectedContentTypes) && (
+                    <Box
+                      background="neutral0"
+                      hasRadius
+                      shadow="filterShadow"
+                      padding={6}
+                    >
+                      <Stack size={4}>
+                        <Typography variant="delta" as="h2">
+                          {getMessage('pages.settings.nameField.title')}
+                        </Typography>
+                        <Grid gap={4}>
+                          {values.selectedContentTypes.map(uid => {
+                            const { attributes, info: { displayName } } = allContentTypes.find(item => item.uid == uid);
+                            const stringAttributes = Object.keys(attributes).filter(_ => attributes[_].type === 'string');
+
+                            return !isEmpty(stringAttributes) && (
+                              <GridItem key={`collectionSettings-${uid}`} col={6} s={12} xs={12}>
+                                <Card background="primary100" borderColor="primary200">
+                                  <CardBody>
+                                    <CardContent style={{ width: '100%' }}>
+                                      <Stack size={4}>
+                                        <Typography variant="epsilon" fontWeight="semibold" as="h3">{displayName}</Typography>
+                                        <Select
+                                          name={`collectionSettings-${uid}-entryLabel`}
+                                          label={getMessage('pages.settings.form.nameField.label')}
+                                          hint={getMessage('pages.settings.form.nameField.hint')}
+                                          placeholder={getMessage('pages.settings.form.nameField.placeholder')}
+                                          onClear={() => null}
+                                          value={values.nameFields[uid] || []}
+                                          onChange={(value) => setFieldValue('nameFields', prepareNameFieldFor(uid, values.nameFields, value))}
+                                          multi
+                                          withTags
+                                          disabled={isRestartRequired}
+                                        >
+                                          {stringAttributes.map(key =>
+                                            (<Option key={uid + key} value={key}>{capitalize(key.split('_').join(' '))}</Option>))}
+                                        </Select>
+                                      </Stack>
+                                    </CardContent>
+                                  </CardBody>
+                                </Card>
+                              </GridItem>
+                            );
+                          })
+                          }
+                        </Grid>
+                      </Stack>
+                    </Box>
+                  )}
+                  <Box
+                    background="neutral0"
+                    hasRadius
+                    shadow="filterShadow"
+                    padding={6}
+                  >
+                    <Stack size={4}>
+                      <Typography variant="delta" as="h2">
+                        {getMessage('pages.settings.restoring.title')}
+                      </Typography>
+                      <Grid gap={4}>
+                        <GridItem col={12} s={12} xs={12}>
+                          <Typography>
+                            {getMessage('pages.settings.actions.restore.description')}
+                          </Typography>
+                        </GridItem>
+                        <GridItem col={6} s={12} xs={12}>
+                          <CheckPermissions permissions={permissions.access}>
+                            <Button variant="danger-light" startIcon={<Refresh />} onClick={() => setIsRestorePopupOpen(true)}>
+                              {getMessage('pages.settings.actions.restore')}
+                            </Button>
+                          </CheckPermissions>
+                          <ConfirmationDialog
+                            isVisible={isRestorePopupOpen}
+                            header={getMessage('pages.settings.actions.restore.confirmation.header')}
+                            labelConfirm={getMessage('pages.settings.actions.restore.confirmation.confirm')}
+                            iconConfirm={<Refresh />}
+                            onConfirm={() => onPopupClose(true)}
+                            onCancel={() => onPopupClose(false)}>
+                            {getMessage('pages.settings.actions.restore.confirmation.description')}
+                          </ConfirmationDialog>
+                        </GridItem>
+                      </Grid>
+                    </Stack>
+                  </Box>
+                </Stack>
+              </ContentLayout>
+            </Form>
+          )}
+        </Formik>
+      </Main>
+    </>
+  );
+}
+
+
+export default SettingsPage;

package/admin/src/pages/View/components/NavigationHeader/index.js

@@ -7,43 +7,59 @@ import Check from '@strapi/icons/Check';
 import More from '@strapi/icons/More';
 import { getTrad } from '../../../../translations';
 import { MoreButton } from './styles';
-
+import { Select, Option } from '@strapi/design-system/Select';
+import { Box } from '@strapi/design-system/Box'
 
 const NavigationHeader = ({
+  activeNavigation,
+  availableNavigations,
   structureHasErrors,
-  structureHAsChanged,
+  structureHasChanged,
+  handleChangeSelection,
   handleSave,
 }) => {
   const { formatMessage } = useIntl();
-
   return (
     <HeaderLayout
-        primaryAction={
+      primaryAction={
         <Stack horizontal size={2}>
-            <Button
-              onClick={handleSave}
-              startIcon={<Check />}
-              disabled={structureHasErrors || !structureHAsChanged}
-              type="submit"
+          <Box width="10vw">
+            <Select
+              type="select"
+              placeholder={'Change navigation'}
+              name={`navigationSelect`}
+              onChange={handleChangeSelection}
+              value={activeNavigation?.id}
+              size="S"
+              style={null}
             >
-              {formatMessage(getTrad('submit.cta.save'))}
-            </Button>
-            {/* <MoreButton
+              {availableNavigations.map(({ id, name }) => <Option key={id} value={id}>{name}</Option>)}
+            </Select >
+          </Box>
+          <Button
+            onClick={handleSave}
+            startIcon={<Check />}
+            disabled={structureHasErrors || !structureHasChanged}
+            type="submit"
+          >
+            {formatMessage(getTrad('submit.cta.save'))}
+          </Button>
+          {/* <MoreButton
               id="more"
               label="More"
               icon={<More />}
             /> */}
-          </Stack>
-        }
-        title={formatMessage({
-          id: getTrad('header.title'),
-          defaultMessage: 'UI Navigation',
-        })}
-        subtitle={formatMessage({
-          id: getTrad('header.description'),
-          defaultMessage: 'Define your portal navigation',
-        })}
-      />
+        </Stack>
+      }
+      title={formatMessage({
+        id: getTrad('header.title'),
+        defaultMessage: 'UI Navigation',
+      })}
+      subtitle={formatMessage({
+        id: getTrad('header.description'),
+        defaultMessage: 'Define your portal navigation',
+      })}
+    />
   );
 };
 

package/admin/src/pages/View/components/NavigationItemForm/index.js

@@ -1,23 +1,24 @@
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
-import { useIntl } from 'react-intl';
 import { debounce, find, get, isEmpty, isEqual, isNil, isString } from 'lodash';
 import PropTypes from 'prop-types';
 import { Formik } from 'formik'
 
 // Design System
 import { ModalBody } from '@strapi/design-system/ModalLayout';
+import { Select, Option } from '@strapi/design-system/Select';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Form, GenericInput } from '@strapi/helper-plugin';
 
 import { NavigationItemPopupFooter } from '../NavigationItemPopup/NavigationItemPopupFooter';
 
 
-import { navigationItemType } from '../../utils/enums';
+import { navigationItemAdditionalFields, navigationItemType } from '../../utils/enums';
 import slugify from 'slugify';
 import { extractRelatedItemLabel } from '../../utils/parsers';
 import { form as formDefinition } from './utils/form';
 import { checkFormValidity } from '../../utils/form';
 import { getTradId } from '../../../../translations';
+import { getMessage } from '../../../../utils';
 
 const NavigationItemForm = ({
   isLoading,
@@ -42,7 +43,6 @@ const NavigationItemForm = ({
   const [form, setFormState] = useState({});
   const [formErrors, setFormErrorsState] = useState({});
   const { relatedType } = form;
-  const { formatMessage } = useIntl();
 
   const relatedFieldName = `${inputsPrefix}related`;
 
@@ -52,22 +52,29 @@ const NavigationItemForm = ({
       ...data,
       type: data.type || navigationItemType.INTERNAL,
       related: data.related?.value,
-      relatedType: data.relatedType?.value
+      relatedType: data.relatedType?.value,
+      audience: data.audience?.map(item => item.id),
     });
   }
 
+  const audience = get(form, `${inputsPrefix}audience`, []);
+  const audienceOptions = availableAudience.map((item) => ({
+    value: get(item, 'id', " "),
+    label: get(item, 'name', " "),
+  }));
+
   const generatePreviewPath = () => {
     if (!isExternal) {
       const value = `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${form.path !== '/' ? form.path || '' : ''}`;
       return {
         id: getTradId('popup.item.form.type.external.description'),
         defaultMessage: '',
-        values: { value  }
+        values: { value }
       }
     }
     return null;
   };
-  
+
   const sanitizePayload = (payload = {}) => {
     const { onItemClick, onItemLevelAddClick, related, relatedType, menuAttached, ...purePayload } = payload;
     const sanitizedType = purePayload.type || navigationItemType.INTERNAL;
@@ -103,6 +110,10 @@ const NavigationItemForm = ({
   const onTypeChange = ({ target: { name, value } }) =>
     onChange({ target: { name, value: value ? navigationItemType.INTERNAL : navigationItemType.EXTERNAL } });
 
+  const onAudienceChange = (value) => {
+    onChange({target: {name: `${inputsPrefix}audience`, value}});
+  }
+
   const onChange = ({ target: { name, value } }) => {
     setFormState(prevState => ({
       ...prevState,
@@ -139,7 +150,7 @@ const NavigationItemForm = ({
     .filter((item) => {
       const usedContentTypeEntitiesOfSameType = usedContentTypeEntities
         .filter(uctItem => relatedTypeSelectValue === uctItem.__collectionUid);
-      return !find(usedContentTypeEntitiesOfSameType, uctItem => (item.id === uctItem.id && uctItem.id !== form.related)); 
+      return !find(usedContentTypeEntitiesOfSameType, uctItem => (item.id === uctItem.id && uctItem.id !== form.related));
     })
     .map((item) => {
       const label = appendLabelPublicationStatus(
@@ -153,8 +164,8 @@ const NavigationItemForm = ({
         key: get(item, 'id'),
         metadatas: {
           intlLabel: {
-            id: label || " ",
-            defaultMessage: label || " ",
+            id: label || `${item.__collectionUid} ${item.id}`,
+            defaultMessage: label || `${item.__collectionUid} ${item.id}`,
           }
         },
         value: item.id,
@@ -259,6 +270,10 @@ const NavigationItemForm = ({
                   }}
                   name={`${inputsPrefix}title`}
                   placeholder={{
+                    id: "e.g. Blog",
+                    defaultMessage: 'e.g. Blog',
+                  }}
+                  description={{
                     id: getTradId('popup.item.form.title.placeholder'),
                     defaultMessage: 'e.g. Blog',
                   }}
@@ -331,6 +346,15 @@ const NavigationItemForm = ({
                       onChange={onChangeRelatedType}
                       options={relatedTypeSelectOptions}
                       value={relatedTypeSelectValue}
+                      disabled={isLoading || isEmpty(relatedTypeSelectOptions)}
+                      description={
+                        !isLoading && isEmpty(relatedTypeSelectOptions)
+                          ? {
+                            id: getTradId('popup.item.form.relatedType.empty'),
+                            defaultMessage: 'There are no more content types',
+                          }
+                          : undefined
+                      }
                     />
                   </GridItem>
                   {relatedTypeSelectValue && !isSingleSelected && (
@@ -367,6 +391,22 @@ const NavigationItemForm = ({
                   )}
                 </>
               )}
+
+              {additionalFields.includes(navigationItemAdditionalFields.AUDIENCE) && (
+                <GridItem key={`${inputsPrefix}audience`} col={6} lg={12}>
+                  <Select
+                    id={`${inputsPrefix}audience`}
+                    placeholder={getMessage('popup.item.form.audience.placeholder')}
+                    label={getMessage('popup.item.form.audience.label')}
+                    onChange={onAudienceChange}
+                    value={audience}
+                    multi
+                    withTags
+                  >
+                    {audienceOptions.map(({ value, label }) => <Option key={value} value={value}>{label}</Option>)}
+                  </Select>
+                </GridItem>
+              )}
             </Grid>
           </ModalBody>
         </Form>

package/admin/src/pages/View/components/NavigationItemPopup/NavigationItemPopupFooter.js

@@ -1,25 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 
 import { Button } from '@strapi/design-system/Button';
 import { ModalFooter } from '@strapi/design-system/ModalLayout';
-
-import { getTrad } from '../../../../translations';
+import { getMessage } from '../../../../utils';
 
 export const NavigationItemPopupFooter = ({ handleCancel, handleSubmit, submitDisabled, formViewId }) => {
-	const { formatMessage } = useIntl();
 
 	return (
 		<ModalFooter
 			startActions={
 				<Button onClick={handleCancel} variant="tertiary">
-					{formatMessage(getTrad('popup.item.form.button.cancel'))}
+					{getMessage('popup.item.form.button.cancel')}
 				</Button>
 			}
 			endActions={
 				<Button onClick={handleSubmit} disabled={submitDisabled}>
-					{formatMessage(getTrad(`popup.item.form.button.save`))}
+					{getMessage(`popup.item.form.button.save`)}
 				</Button>
 			}
 		/>