strapi-plugin-navigation 1.1.3 → 2.0.0-beta.4

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

@@ -0,0 +1,403 @@
+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 { 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 slugify from 'slugify';
+import { extractRelatedItemLabel } from '../../utils/parsers';
+import { form as formDefinition } from './utils/form';
+import { checkFormValidity } from '../../utils/form';
+import { getTradId } from '../../../../translations';
+
+const NavigationItemForm = ({
+  isLoading,
+  inputsPrefix,
+  data = {},
+  contentTypes = [],
+  contentTypeEntities = [],
+  usedContentTypeEntities = [],
+  availableAudience = [],
+  additionalFields = [],
+  contentTypesNameFields = {},
+  onSubmit,
+  onCancel,
+  getContentTypeEntities,
+  usedContentTypesData,
+  appendLabelPublicationStatus = () => '',
+}) => {
+  const [hasBeenInitialized, setInitializedState] = useState(false);
+  const [hasChanged, setChangedState] = useState(false);
+  const [contentTypeSearchQuery, setContentTypeSearchQuery] = useState(undefined);
+  const [contentTypeSearchInputValue, setContentTypeSearchInputValue] = useState(undefined);
+  const [form, setFormState] = useState({});
+  const [formErrors, setFormErrorsState] = useState({});
+  const { relatedType } = form;
+  const { formatMessage } = useIntl();
+
+  const relatedFieldName = `${inputsPrefix}related`;
+
+  if (!hasBeenInitialized && !isEmpty(data)) {
+    setInitializedState(true);
+    setFormState({
+      ...data,
+      type: data.type || navigationItemType.INTERNAL,
+      related: data.related?.value,
+      relatedType: data.relatedType?.value
+    });
+  }
+
+  const generatePreviewPath = () => {
+    if (!isExternal) {
+      return {
+        id: `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${form.path || ''}`,
+        defaultMessage: `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${form.path || ''}`
+      }
+    }
+    return null;
+  };
+  
+  const sanitizePayload = (payload = {}) => {
+    const { onItemClick, onItemLevelAddClick, related, relatedType, menuAttached, ...purePayload } = payload;
+    const sanitizedType = purePayload.type || navigationItemType.INTERNAL;
+    const relatedId = related
+    const relatedCollectionType = relatedType;
+    return {
+      ...purePayload,
+      menuAttached: isNil(menuAttached) ? false : menuAttached,
+      type: sanitizedType,
+      path: sanitizedType === navigationItemType.INTERNAL ? purePayload.path : undefined,
+      externalPath: sanitizedType === navigationItemType.EXTERNAL ? purePayload.externalPath : undefined,
+      related: relatedId,
+      relatedType: relatedCollectionType,
+      isSingle: isSingleSelected,
+      uiRouterKey: generateUiRouterKey(purePayload.title, relatedId, relatedCollectionType),
+    };
+  };
+
+  const handleSubmit = async e => {
+    if (e) {
+      e.preventDefault();
+    }
+
+    const payload = sanitizePayload(form);
+    const errors = await checkFormValidity(payload, formDefinition.schema(isSingleSelected));
+    if (!errors || isEmpty(errors)) {
+      return onSubmit(payload);
+    } else {
+      setFormErrorsState(errors);
+    }
+  };
+
+  const onTypeChange = ({ target: { name, value } }) =>
+    onChange({ target: { name, value: value ? navigationItemType.INTERNAL : navigationItemType.EXTERNAL } });
+
+  const onChange = ({ target: { name, value } }) => {
+    setFormState(prevState => ({
+      ...prevState,
+      updated: true,
+      [name]: value,
+    }));
+    if (!hasChanged) {
+      setChangedState(true);
+    }
+  };
+
+  const generateUiRouterKey = (title, related, relatedType) => {
+    if (title) {
+      return isString(title) && !isEmpty(title) ? slugify(title).toLowerCase() : undefined;
+    } else if (related) {
+      const relationTitle = extractRelatedItemLabel({
+        ...contentTypeEntities.find(_ => _.id === related),
+        __collectionUid: relatedType
+      }, contentTypesNameFields, { contentTypes });
+      return isString(relationTitle) && !isEmpty(relationTitle) ? slugify(relationTitle).toLowerCase() : undefined;
+    }
+    return undefined;
+  };
+
+  const relatedTypeSelectValue = form.relatedType;
+  const relatedSelectValue = form.related;
+
+  const isSingleSelected = useMemo(
+    () => relatedTypeSelectValue ? contentTypes.find(_ => _.uid === relatedTypeSelectValue)?.isSingle || false : false,
+    [relatedTypeSelectValue, contentTypes],
+  );
+
+  const relatedSelectOptions = contentTypeEntities
+    .filter((item) => {
+      const usedContentTypeEntitiesOfSameType = usedContentTypeEntities
+        .filter(uctItem => relatedTypeSelectValue === uctItem.__collectionUid);
+      return !find(usedContentTypeEntitiesOfSameType, uctItem => (item.id === uctItem.id && uctItem.id !== form.related)); 
+    })
+    .map((item) => {
+      const label = appendLabelPublicationStatus(
+        extractRelatedItemLabel({
+          ...item,
+          __collectionUid: get(relatedTypeSelectValue, 'value', relatedTypeSelectValue),
+        }, contentTypesNameFields, { contentTypes }),
+        item
+      );
+      return ({
+        key: get(item, 'id'),
+        metadatas: {
+          intlLabel: {
+            id: label || " ",
+            defaultMessage: label || " ",
+          }
+        },
+        value: item.id,
+        label: label,
+      })
+    });
+
+  const isExternal = form.type === navigationItemType.EXTERNAL;
+  const pathSourceName = isExternal ? 'externalPath' : 'path';
+
+  const submitDisabled = (form.type !== navigationItemType.EXTERNAL) && isNil(form.related);
+
+  const debouncedSearch = useCallback(
+    debounce(nextValue => setContentTypeSearchQuery(nextValue), 500),
+    [],
+  );
+
+  const debounceContentTypeSearchQuery = value => {
+    setContentTypeSearchInputValue(value);
+    debouncedSearch(value);
+  };
+
+  const onChangeRelatedType = ({ target: { name, value } }) => {
+    const relatedTypeBeingReverted = data.relatedType && (data.relatedType.value === get(value, 'value', value));
+    setContentTypeSearchQuery(undefined);
+    setContentTypeSearchInputValue(undefined);
+    setFormState(prevState => ({
+      ...prevState,
+      updated: true,
+      related: relatedTypeBeingReverted ? data.related?.value : undefined,
+      [name]: value,
+    }));
+    if (!hasChanged) {
+      setChangedState(true);
+    }
+  };
+
+  const relatedTypeSelectOptions = useMemo(
+    () => contentTypes
+      .filter((contentType) => {
+        if (contentType.isSingle) {
+          return !usedContentTypesData.some((_) => _.__collectionUid === contentType.uid && _.__collectionUid !== form.relatedType);
+        }
+        return true;
+      })
+      .map((item) => ({
+        key: get(item, 'uid'),
+        metadatas: {
+          intlLabel: {
+            id: get(item, 'label', get(item, 'name')),
+            defaultMessage: get(item, 'label', get(item, 'name')),
+          }
+        },
+        value: get(item, 'uid'),
+        label: appendLabelPublicationStatus(get(item, 'label', get(item, 'name')), item, true),
+      })),
+    [contentTypes, usedContentTypesData],
+  );
+
+  const thereAreNoMoreContentTypes = isEmpty(relatedSelectOptions) && !contentTypeSearchQuery;
+
+  useEffect(
+    () => {
+      const value = get(relatedSelectOptions, '0');
+      if (isSingleSelected && relatedSelectOptions.length === 1 && !isEqual(value, relatedSelectValue)) {
+        onChange({ target: { name: relatedFieldName, value } });
+      }
+    },
+    [isSingleSelected, relatedSelectOptions],
+  );
+
+  useEffect(() => {
+    const value = relatedType;
+    const fetchContentTypeEntities = async () => {
+      if (value) {
+        const item = find(
+          contentTypes,
+          (_) => _.uid === value,
+        );
+        if (item) {
+          await getContentTypeEntities({
+            modelUID: item.uid,
+            query: contentTypeSearchQuery,
+          }, item.plugin);
+        }
+      }
+    };
+    fetchContentTypeEntities();
+  }, [relatedType, contentTypeSearchQuery]);
+  return (
+    <>
+      <Formik>
+        <Form>
+          <ModalBody>
+            <Grid gap={5}>
+              <GridItem key={`${inputsPrefix}title`} col={12}>
+                <GenericInput
+                  autoFocused={true}
+                  intlLabel={{
+                    id: getTradId('popup.item.form.title.label'),
+                    defaultMessage: 'Title',
+                  }}
+                  name={`${inputsPrefix}title`}
+                  placeholder={{
+                    id: getTradId('popup.item.form.title.placeholder'),
+                    defaultMessage: 'e.g. Blog',
+                  }}
+                  type='text'
+                  error={get(formErrors, `${inputsPrefix}title.id`)}
+                  onChange={onChange}
+                  value={get(form, `${inputsPrefix}title`, '')}
+                />
+              </GridItem>
+              <GridItem key={`${inputsPrefix}menuAttached`} col={6} lg={12}>
+                <GenericInput
+                  intlLabel={{
+                    id: getTradId('popup.item.form.menuAttached.label'),
+                    defaultMessage: 'MenuAttached',
+                  }}
+                  name={`${inputsPrefix}menuAttached`}
+                  type='bool'
+                  error={get(formErrors, `${inputsPrefix}menuAttached.id`)}
+                  onChange={onChange}
+                  value={get(form, `${inputsPrefix}menuAttached`, '')}
+                  disabled={!(data.isMenuAllowedLevel && data.parentAttachedToMenu)}
+                />
+              </GridItem>
+              <GridItem key={`${inputsPrefix}type`} col={6} lg={12}>
+                <GenericInput
+                  intlLabel={{
+                    id: getTradId('popup.item.form.type.label'),
+                    defaultMessage: 'Internal link',
+                  }}
+                  name={`${inputsPrefix}type`}
+                  type='bool'
+                  error={get(formErrors, `${inputsPrefix}type.id`)}
+                  onChange={onTypeChange}
+                  value={get(form, `${inputsPrefix}type`, '') === navigationItemType.INTERNAL}
+                />
+              </GridItem>
+              <GridItem key={`${inputsPrefix}path`} col={12}>
+                <GenericInput
+                  intlLabel={{
+                    id: getTradId(`popup.item.form.${pathSourceName}.label`),
+                    defaultMessage: 'Path',
+                  }}
+                  name={`${inputsPrefix}${pathSourceName}`}
+                  placeholder={{
+                    id: getTradId(`popup.item.form.${pathSourceName}.placeholder`),
+                    defaultMessage: 'e.g. Blog',
+                  }}
+                  type='text'
+                  error={get(formErrors, `${inputsPrefix}${pathSourceName}.id`)}
+                  onChange={onChange}
+                  value={get(form, `${inputsPrefix}${pathSourceName}`, '')}
+                  description={generatePreviewPath()}
+                />
+              </GridItem>
+              {!isExternal && (
+                <>
+                  <GridItem col={6} lg={12}>
+                    <GenericInput
+                      type="select"
+                      intlLabel={{
+                        id: getTradId('popup.item.form.relatedType.label'),
+                        defaultMessage: 'Related Type'
+                      }}
+                      placeholder={{
+                        id: getTradId('popup.item.form.relatedType.placeholder'),
+                        defaultMessage: 'Related Type'
+                      }}
+                      name={`${inputsPrefix}relatedType`}
+                      error={get(formErrors, `${inputsPrefix}relatedType.id`)}
+                      onChange={onChangeRelatedType}
+                      options={relatedTypeSelectOptions}
+                      value={relatedTypeSelectValue}
+                    />
+                  </GridItem>
+                  {relatedTypeSelectValue && !isSingleSelected && (
+                    <GridItem col={6} lg={12}>
+                      <GenericInput
+                        type="select"
+                        intlLabel={{
+                          id: getTradId('popup.item.form.related.label'),
+                          defaultMessage: 'Related'
+                        }}
+                        placeholder={{
+                          id: getTradId('popup.item.form.related.label'),
+                          defaultMessage: 'Related'
+                        }}
+                        name={relatedFieldName}
+                        error={get(formErrors, `${relatedFieldName}.id`)}
+                        onChange={onChange}
+                        onInputChange={debounceContentTypeSearchQuery}
+                        inputValue={contentTypeSearchInputValue}
+                        options={relatedSelectOptions}
+                        value={relatedSelectValue}
+                        disabled={isLoading || thereAreNoMoreContentTypes}
+                        description={
+                          !isLoading && thereAreNoMoreContentTypes
+                            ? {
+                              id: getTradId('popup.item.form.related.empty'),
+                              defaultMessage: 'There are no more entities',
+                              values: { contentTypeName: relatedTypeSelectValue },
+                            }
+                            : undefined
+                        }
+                      />
+                    </GridItem>
+                  )}
+                </>
+              )}
+            </Grid>
+          </ModalBody>
+        </Form>
+      </Formik>
+      <NavigationItemPopupFooter handleSubmit={handleSubmit} handleCancel={onCancel} submitDisabled={submitDisabled} />
+    </>
+  );
+};
+
+NavigationItemForm.defaultProps = {
+  fieldsToDisable: [],
+  formErrors: {},
+  inputsPrefix: '',
+  onSubmit: (e) => e.preventDefault(),
+  requestError: null,
+};
+
+NavigationItemForm.propTypes = {
+  isLoading: PropTypes.bool,
+  fieldsToDisable: PropTypes.array,
+  formErrors: PropTypes.object.isRequired,
+  inputsPrefix: PropTypes.string,
+  data: PropTypes.object.isRequired,
+  onSubmit: PropTypes.func,
+  requestError: PropTypes.object,
+  contentTypes: PropTypes.array,
+  contentTypeEntities: PropTypes.array,
+  usedContentTypeEntities: PropTypes.array,
+  availableAudience: PropTypes.array,
+  additionalFields: PropTypes.array,
+  getContentTypeEntities: PropTypes.func.isRequired,
+  appendLabelPublicationStatus: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+export default NavigationItemForm;

package/admin/src/{containers → pages}/View/components/NavigationItemForm/utils/form.js

@@ -1,6 +1,6 @@
 import * as yup from "yup";
 import { isNil } from "lodash";
-import { translatedErrors } from "strapi-helper-plugin";
+import { translatedErrors } from "@strapi/helper-plugin";
 import { navigationItemType } from "../../../utils/enums";
 import pluginId from "../../../../../pluginId";
 
@@ -29,7 +29,7 @@ export const form = {
           is: val => val === navigationItemType.EXTERNAL,
           then: yup.string()
             .required(translatedErrors.required)
-            .matches(/(#.*)|(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,}|mailto:.+@(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)+[^.\s]{2,})/, { 
+            .matches(/(#.*)|(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/, { 
               excludeEmptyString: true,
               message: `${pluginId}.popup.item.form.externalPath.validation.type`,
             }),

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

@@ -0,0 +1,40 @@
+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';
+
+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'))}
+				</Button>
+			}
+			endActions={
+				<Button onClick={handleSubmit} disabled={submitDisabled}>
+					{formatMessage(getTrad(`popup.item.form.button.save`))}
+				</Button>
+			}
+		/>
+	);
+};
+
+NavigationItemPopupFooter.defaultProps = {
+	onValidate: undefined,
+	submitDisabled: false,
+	formViewId: undefined,
+};
+
+NavigationItemPopupFooter.propTypes = {
+	handleCancel: PropTypes.func.isRequired,
+	handleSubmit: PropTypes.func,
+	submitDisabled: PropTypes.bool,
+	formViewId: PropTypes.object,
+};

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

@@ -0,0 +1,20 @@
+
+
+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';
+
+export const NavigationItemPopupHeader = () => {
+	const { formatMessage } = useIntl();
+	return (
+		<ModalHeader>
+			<ButtonText textColor="neutral800" as="h2" id="asset-dialog-title">
+				{formatMessage(
+					getTrad('popup.item.header'),
+				)}
+			</ButtonText>
+		</ModalHeader>
+	);
+};

package/admin/src/{containers → pages}/View/components/NavigationItemPopup/index.js

@@ -5,15 +5,18 @@
  */
 
 import React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { HeaderModal, HeaderModalTitle } from 'strapi-helper-plugin';
 import { find } from 'lodash';
+
+//Design System
+import { ModalLayout } from '@strapi/design-system/ModalLayout';
+
 import NavigationItemForm from '../NavigationItemForm';
 import { extractRelatedItemLabel, isRelationCorrect, isRelationPublished } from '../../utils/parsers';
-import { MediumPopup } from './MediumPopup';
 import { navigationItemType } from '../../utils/enums';
-import { getTrad, getTradId } from '../../../../translations';
+import { getTrad } from '../../../../translations';
+import { NavigationItemPopupHeader } from './NavigationItemPopupHeader';
 
 const NavigationItemPopUp = ({
   isOpen,
@@ -26,6 +29,7 @@ const NavigationItemPopUp = ({
   getContentTypeItems,
   usedContentTypesData,
 }) => {
+
   const { formatMessage } = useIntl();
 
   const handleOnSubmit = (payload) => {
@@ -45,7 +49,7 @@ const NavigationItemPopUp = ({
   const appendLabelPublicationStatus = (label = '', item = {}, isCollection = false) => {
     const appendix = isRelationPublished({
       relatedRef: item,
-      type: item.isSingle ? navigationItemType.INTERNAL : item.type, 
+      type: item.isSingle ? navigationItemType.INTERNAL : item.type,
       isCollection,
     }) ? '' : `[${formatMessage(getTrad('notification.navigation.item.relation.status.draft'))}] `.toUpperCase();
     return `${appendix}${label}`;
@@ -60,9 +64,9 @@ const NavigationItemPopUp = ({
       related: related && isRelationCorrect(data) ? {
         value: related,
         label: appendLabelPublicationStatus(
-            extractRelatedItemLabel({
+          extractRelatedItemLabel({
             ...relatedItem,
-            __collectionName: relatedType,
+            __collectionUid: relatedType,
           }, contentTypesNameFields, config),
           relatedItem,
         ),
@@ -75,14 +79,8 @@ const NavigationItemPopUp = ({
   };
 
   return (
-    <MediumPopup isOpen={isOpen} onToggle={onClose}>
-      <HeaderModal>
-        <section>
-          <HeaderModalTitle>
-            <FormattedMessage id={getTradId('popup.item.header')} />
-          </HeaderModalTitle>
-        </section>
-      </HeaderModal>
+    <ModalLayout labelledBy="condition-modal-breadcrumbs" onClose={onClose} isOpen={isOpen}>
+      <NavigationItemPopupHeader />
       <NavigationItemForm
         data={prepareFormData(data)}
         isLoading={isLoading}
@@ -95,9 +93,11 @@ const NavigationItemPopUp = ({
         getContentTypeEntities={getContentTypeItems}
         usedContentTypesData={usedContentTypesData}
         onSubmit={handleOnSubmit}
+        onCancel={onClose}
         appendLabelPublicationStatus={appendLabelPublicationStatus}
       />
-    </MediumPopup>
+    </ModalLayout>
+
   );
 };