strapi-plugin-navigation 2.0.0 → 2.0.4

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/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,
@@ -380,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>
 			}
 		/>

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

@@ -3,15 +3,13 @@
 import React from 'react';
 import { ButtonText } from '@strapi/design-system/Text';
 import { ModalHeader } from '@strapi/design-system/ModalLayout';
-import { useIntl } from 'react-intl';
-import { getTrad } from '../../../../translations';
+import { getMessage } from '../../../../utils';
 
 export const NavigationItemPopupHeader = ({isNewItem}) => {
-	const { formatMessage } = useIntl();
 	return (
 		<ModalHeader>
 			<ButtonText textColor="neutral800" as="h2" id="asset-dialog-title">
-				{formatMessage(getTrad(`popup.item.header.${isNewItem ? 'new' : 'edit'}`))}
+				{getMessage(`popup.item.header.${isNewItem ? 'new' : 'edit'}`)}
 			</ButtonText>
 		</ModalHeader>
 	);

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

@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { find } from 'lodash';
 
@@ -15,8 +14,8 @@ import { ModalLayout } from '@strapi/design-system/ModalLayout';
 import NavigationItemForm from '../NavigationItemForm';
 import { extractRelatedItemLabel, isRelationCorrect, isRelationPublished } from '../../utils/parsers';
 import { navigationItemType } from '../../utils/enums';
-import { getTrad } from '../../../../translations';
 import { NavigationItemPopupHeader } from './NavigationItemPopupHeader';
+import { getMessage } from '../../../../utils';
 
 const NavigationItemPopUp = ({
   isOpen,
@@ -30,7 +29,6 @@ const NavigationItemPopUp = ({
   usedContentTypesData,
 }) => {
 
-  const { formatMessage } = useIntl();
 
   const handleOnSubmit = (payload) => {
     onSubmit(payload);
@@ -51,7 +49,7 @@ const NavigationItemPopUp = ({
       relatedRef: item,
       type: item.isSingle ? navigationItemType.INTERNAL : item.type,
       isCollection,
-    }) ? '' : `[${formatMessage(getTrad('notification.navigation.item.relation.status.draft'))}] `.toUpperCase();
+    }) ? '' : `[${getMessage('notification.navigation.item.relation.status.draft')}] `.toUpperCase();
     return `${appendix}${label}`;
   };
 

package/admin/src/translations/en.json

@@ -18,14 +18,14 @@
 	"popup.item.form.path.preview": "Preview:",
 	"popup.item.form.externalPath.label": "External URL",
 	"popup.item.form.externalPath.placeholder": "Link to the external source",
-	"popup.item.form.externalPath.validation.type": "This value is not a proper url." ,
+	"popup.item.form.externalPath.validation.type": "This value is not a proper url.",
 	"popup.item.form.menuAttached.label": "Attach to menu",
 	"popup.item.form.type.label": "Internal link",
 	"popup.item.form.type.internal.label": "Internal source",
 	"popup.item.form.type.external.label": "External source",
 	"popup.item.form.type.external.description": "Output path: {value}",
 	"popup.item.form.audience.label": "Audience",
-	"popup.item.form.audience.placeholder": "Type to start searching...",
+	"popup.item.form.audience.placeholder": "Select audience...",
 	"popup.item.form.relatedSection.label": "Relation to",
 	"popup.item.form.relatedType.label": "Content Type",
 	"popup.item.form.relatedType.placeholder": "Select content type...",
@@ -43,9 +43,49 @@
 	"notification.navigation.item.relation": "Entity relation does not exist!",
 	"notification.navigation.item.relation.status.draft": "draft",
 	"notification.navigation.item.relation.status.published": "published",
-	"navigation.item.action.newItem": "Add nested item",
-	"navigation.item.badge.removed": "Removed",
-	"navigation.item.badge.draft": "{type}: Draft",
-	"navigation.item.badge.published": "{type}: Published"
-  }
-  
+	"pages.settings.general.title": "General settings",
+	"pages.settings.additional.title": "Additional settings",
+	"pages.settings.nameField.title": "Content types settings",
+	"pages.settings.restoring.title": "Restoring",
+	"pages.settings.section.title": "Navigation Plugin",
+	"pages.settings.section.subtitle": "Configuration",
+	"pages.settings.header.title": "Navigation",
+	"pages.settings.header.description": "Configure the navigation plugin",
+	"pages.settings.actions.restart": "Restart Strapi",
+	"pages.settings.actions.submit": "Save configuration",
+	"pages.settings.actions.restore": "Restore configuration",
+	"pages.settings.actions.restore.confirmation.header": "Do you want to continue?",
+	"pages.settings.actions.restore.confirmation.confirm": "Restore",
+	"pages.settings.actions.restore.confirmation.description": "Plugin config will be restored from plugins.js file.",
+	"pages.settings.actions.restore.description": "Restoring the plugin configuration will cause it to be replaced with configuration saved inside 'plugins.js' file.",
+	"pages.settings.actions.restart.alert.title": "Strapi requires restart",
+	"pages.settings.actions.restart.alert.description": "You've made a configuration changes which requires your Strapi application to be restarted to take an effect in GraphQL schema. Do it manually or by using below trigger.",
+	"pages.settings.actions.restart.alert.close": "Discard",
+	"pages.settings.actions.restart.alert.cancel": "Cancel",
+	"pages.settings.notification.fetch.error": "Failed to fetch configuration. Retrying...",
+	"pages.settings.notification.submit.success": "Config has been updated successfully",
+	"pages.settings.notification.restore.success": "Config has been restored successfully",
+	"pages.settings.notification.restart.success": "Application has been restarted successfully",
+	"pages.settings.notification.submit.error": "Config update has failed",
+	"pages.settings.notification.restore.error": "Config restore has failed",
+	"pages.settings.notification.restart.error": "Failed to restart your application. Try to do it manually.",
+	"pages.settings.form.contentTypes.label": "Enable for Collection(s)",
+	"pages.settings.form.contentTypes.placeholder": "eg. Pages, Posts",
+	"pages.settings.form.contentTypes.hint": "Content types that can be related with navigation items. This configuration is applicable both for REST & GraphQL",
+	"pages.settings.form.allowedLevels.label": "Allowed levels",
+	"pages.settings.form.allowedLevels.placeholder": "eg. 2",
+	"pages.settings.form.allowedLevels.hint": "Maximum level for which you're able to mark item as \"Menu attached\"",
+	"pages.settings.form.audience.label": "Audience",
+	"pages.settings.form.audience.hint": "Enable audience field",
+	"pages.settings.form.nameField.label": "Name fields",
+	"pages.settings.form.nameField.placeholder": "Select at least one or leave empty to apply defaults",
+	"pages.settings.form.nameField.hint": "If left empty name field is going to take following ordered fields: \"title\", \"subject\" and \"name\"",
+	"components.navigationItem.action.newItem": "Add nested item",
+	"components.navigationItem.badge.removed": "Removed",
+	"components.navigationItem.badge.draft": "{type}: Draft",
+	"components.navigationItem.badge.published": "{type}: Published",
+	"components.confirmation.dialog.button.cancel": "Cancel",
+	"components.confirmation.dialog.button.confirm": "Confirm",
+	"components.confirmation.dialog.description": "Do you want to continue?",
+	"components.confirmation.dialog.header": "Confirmation"
+}

package/admin/src/translations/fr.json

@@ -38,8 +38,8 @@
   "notification.navigation.item.relation": "L'entitée n'a pas de relations!",
   "notification.navigation.item.relation.status.draft": "brouillon",
   "notification.navigation.item.relation.status.published": "publié",
-  "navigation.item.action.newItem": "Nouvel élément imbriqué",
-	"navigation.item.badge.removed": "Supprimé",
-	"navigation.item.badge.draft": "Brouillon",
-	"navigation.item.badge.published": "Publié"
+  "components.navigationItem.action.newItem": "Nouvel élément imbriqué",
+	"components.navigationItem.badge.removed": "Supprimé",
+	"components.navigationItem.badge.draft": "Brouillon",
+	"components.navigationItem.badge.published": "Publié"
 }

package/admin/src/utils/api.js

@@ -0,0 +1,51 @@
+import { request } from '@strapi/helper-plugin';
+import pluginId from '../pluginId';
+
+export const fetchNavigationConfig = async () => {
+  try {
+    const data = await request(`/${pluginId}/settings/config`, { method: 'GET' });
+    return data;
+  } catch (err) {
+    toggleNotification({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    return { err };
+  }
+}
+
+export const updateNavigationConfig = async ({ body }) =>
+  request(`/${pluginId}/config`, { method: 'PUT', body }, true);
+
+export const restoreNavigationConfig = async () =>
+  request(`/${pluginId}/config`, { method: 'DELETE' }, true);
+
+export const fetchAllContentTypes = async () => {
+  try {
+    const { data } = await request('/content-manager/content-types');
+    return { ...data }
+  } catch (err) {
+    toggleNotification({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    return { err };
+  }
+}
+
+export const restartStrapi = async (toggleNotification) => {
+  try {
+    const { data } = await request(`/${pluginId}/settings/restart`);
+
+    return data;
+  } catch (err) {
+    toggleNotification({
+      type: 'warning',
+      message: { id: 'notification.error' },
+    });
+
+    return { err };
+  }
+};