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

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

@@ -1,427 +0,0 @@
-import React, { useEffect, useMemo, useState, useCallback } from 'react';
-import { Button, Enumeration, Flex, Label, Text, Toggle } from '@buffetjs/core';
-import { useIntl } from 'react-intl';
-import { debounce, find, get, isEmpty, isEqual, isNil, isString } from 'lodash';
-import PropTypes from 'prop-types';
-import { ButtonModal, ModalBody, ModalForm } from 'strapi-helper-plugin';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEye, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import ModalFooter from './ModalFooter';
-import Input from '../../../../components/Input';
-import { navigationItemAdditionalFields, navigationItemType } from '../../utils/enums';
-import slugify from 'slugify';
-import Select from '../../../../components/Select';
-import { extractRelatedItemLabel } from '../../utils/parsers';
-import { form as formDefinition } from './utils/form';
-import { checkFormValidity } from '../../utils/form';
-import { getTrad, getTradId } from '../../../../translations';
-
-const NavigationItemForm = ({
-  isLoading,
-  inputsPrefix,
-  data = {},
-  contentTypes = [],
-  contentTypeEntities = [],
-  usedContentTypeEntities = [],
-  availableAudience = [],
-  additionalFields = [],
-  contentTypesNameFields = {},
-  onSubmit,
-  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 });
-  }
-
-  const sanitizePayload = (payload = {}) => {
-    const { onItemClick, onItemLevelAddClick, related, relatedType, menuAttached, ...purePayload } = payload;
-    const sanitizedType = purePayload.type || navigationItemType.INTERNAL;
-    const relatedId = related?.value
-    const relatedCollectionType = relatedType?.value;
-    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 handleRemove = e => {
-    if (e) {
-      e.preventDefault();
-    }
-    return onSubmit(sanitizePayload({
-      ...form,
-      removed: true,
-    }));
-  };
-
-  const onChange = ({ target: { name, value } }) => {
-    setFormState(prevState => ({
-      ...prevState,
-      updated: true,
-      [name]: value,
-    }));
-    if (!hasChanged) {
-      setChangedState(true);
-    }
-  };
-
-  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
-      } : undefined,
-      [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),
-        __collectionName: relatedType }, contentTypesNameFields, { contentTypes });
-      return isString(relationTitle) && !isEmpty(relationTitle) ? slugify(relationTitle).toLowerCase() : undefined;
-    }
-    return undefined;
-  };
-
-  const typeSelectValue = form.type || navigationItemType.INTERNAL;
-  const relatedTypeSelectValue = form.relatedType;
-  const relatedSelectValue = form.related;
-
-  const typeSelectOptions = useMemo(
-    () => Object.keys(navigationItemType).map((key) => ({
-      value: key,
-      label: formatMessage(getTrad(`popup.item.form.type.${key.toLowerCase()}.label`)),
-    })),
-    [],
-  );
-
-  const isSingleSelected = useMemo(
-    () => relatedTypeSelectValue ? contentTypes.find(_ => _.uid === relatedType.value)?.isSingle : false,
-    [relatedTypeSelectValue, contentTypes],
-  );
-
-  const relatedTypeSelectOptions = useMemo(
-    () => contentTypes
-    .filter((contentType) => {
-      if (contentType.isSingle) {
-        return !usedContentTypesData.some((_) => _.__collectionName === contentType.uid);
-      }
-      return true;
-    })
-      .map((item) => ({
-        value: get(item, 'uid'),
-        label: appendLabelPublicationStatus(get(item, 'label', get(item, 'name')), item, true),
-      })),
-    [contentTypes, usedContentTypesData],
-  );
-
-  const relatedSelectOptions = contentTypeEntities
-    .filter((item) => {
-      const usedContentTypeEntitiesOfSameType = usedContentTypeEntities
-        .filter(uctItem => (get(relatedTypeSelectValue, 'value') === uctItem.__collectionName) && (uctItem.id !== get(relatedSelectValue, 'value')));
-      return !find(usedContentTypeEntitiesOfSameType, uctItem => item.id === uctItem.id); 
-    })
-    .map((item) => ({
-      value: item.id,
-      label: appendLabelPublicationStatus(
-          extractRelatedItemLabel({
-          ...item,
-          __collectionName: get(relatedTypeSelectValue, 'value', relatedTypeSelectValue),
-        }, contentTypesNameFields, { contentTypes }), 
-        item
-      ),
-    }));
-
-  const isExternal = form.type === navigationItemType.EXTERNAL;
-  const pathSourceName = isExternal ? 'externalPath' : 'path';
-
-  const audience = get(form, `${inputsPrefix}audience`, []);
-  const audienceOptions = availableAudience.map((item) => ({
-    value: item.id,
-    label: item.name,
-  }));
-
-  const submitDisabled = (form.type !== navigationItemType.EXTERNAL) && isNil(form.related);
-
-  const generatePreviewPath = () => {
-    if (!isExternal && data.levelPath) {
-      return (
-        <Text fontSize="sm" color="grey">
-          <FontAwesomeIcon icon={faEye} />{' '}
-          {formatMessage(getTrad('popup.item.form.path.preview'))}{' '}
-          {data.levelPath !== '/' ? `${data.levelPath}` : ''}/{form.path}
-        </Text>
-      );
-    }
-    return null;
-  };
-
-  const debouncedSearch = useCallback(
-    debounce(nextValue => setContentTypeSearchQuery(nextValue), 500),
-		[],
-	);
-
-	const debounceContentTypeSearchQuery = value => {
-    setContentTypeSearchInputValue(value);
-		debouncedSearch(value);
-	};
-
-  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({ 
-            type: item.endpoint || item.collectionName,
-            query: contentTypeSearchQuery,
-          }, item.plugin);
-        }
-      }
-    };
-    fetchContentTypeEntities();
-  }, [relatedType, contentTypeSearchQuery]);
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <ModalForm>
-        <ModalBody>
-          <section className="col-12">
-            <div className="row">
-              <div className="col-lg-9 col-md-12">
-                <Input
-                  autoFocus
-                  error={get(formErrors, `${inputsPrefix}title`)}
-                  label={getTradId('popup.item.form.title.label')}
-                  name={`${inputsPrefix}title`}
-                  onChange={onChange}
-                  placeholder={!isExternal ? getTradId('popup.item.form.title.placeholder') : ''}
-                  type="text"
-                  validations={{ required: true }}
-                  value={get(form, `${inputsPrefix}title`, '')}
-                />
-              </div>
-              <div className="col-lg-3 col-md-12">
-                <Flex alignItems="flex-start" flexWrap="wrap">
-                  <Label
-                    htmlFor={`${inputsPrefix}menuAttached`}
-                    style={{ display: 'block' }}
-                    message={formatMessage(getTrad('popup.item.form.menuAttached.label'))}
-                  />
-                  <Toggle
-                    name={`${inputsPrefix}menuAttached`}
-                    onChange={onChange}
-                    disabled={!(data.isMenuAllowedLevel && data.parentAttachedToMenu)}
-                    value={get(form, `${inputsPrefix}menuAttached`, false)}
-                  />
-                </Flex>
-              </div>
-            </div>
-            <div className="row">
-              <div className="col-lg-7 col-md-12">
-                <Input
-                  error={get(formErrors, `${inputsPrefix}${pathSourceName}`)}
-                  label={getTradId(`popup.item.form.${pathSourceName}.label`)}
-                  name={`${inputsPrefix}${pathSourceName}`}
-                  onChange={onChange}
-                  placeholder={getTradId(`popup.item.form.${pathSourceName}.placeholder`)}
-                  description={generatePreviewPath()}
-                  type="text"
-                  validations={{ required: true }}
-                  value={get(form, `${inputsPrefix}${pathSourceName}`, '')}
-                />
-              </div>
-              <div className="col-lg-5 col-md-12">
-                <Label
-                  htmlFor={`${inputsPrefix}type`}
-                  message={formatMessage(getTrad('popup.item.form.type.label'))}
-                />
-                <Enumeration
-                  name={`${inputsPrefix}type`}
-                  onChange={onChange}
-                  options={typeSelectOptions}
-                  value={typeSelectValue}
-                />
-              </div>
-            </div>
-            {additionalFields.includes(navigationItemAdditionalFields.AUDIENCE) && (<div className="row">
-              <div className="col-lg-12">
-                <Label
-                  htmlFor={`${inputsPrefix}audience`}
-                  message={formatMessage(getTrad('popup.item.form.audience.label'))}
-                />
-                <Select
-                  name={`${inputsPrefix}audience`}
-                  onChange={onChange}
-                  options={audienceOptions}
-                  isMulti={true}
-                  value={audience}
-                />
-              </div>
-            </div>)}
-            {!isExternal && (
-              <>
-                <div className="row">
-                  <div className="col-lg-12">
-                    <hr />
-                    <Label
-                      message={formatMessage(getTrad('popup.item.form.relatedSection.label'))}
-                    />
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-lg-6 col-md-12">
-                    <Label
-                      htmlFor={`${inputsPrefix}relatedType`}
-                      message={formatMessage(getTrad('popup.item.form.relatedType.label'))}
-                    />
-                    <Select
-                      name={`${inputsPrefix}relatedType`}
-                      error={get(formErrors, `${inputsPrefix}relatedType`)}
-                      onChange={onChangeRelatedType}
-                      options={relatedTypeSelectOptions}
-                      value={relatedTypeSelectValue}
-                    />
-                  </div>
-                  {relatedTypeSelectValue && !isSingleSelected && (
-                    <div className="col-lg-6 col-md-12">
-                      <Label
-                        htmlFor={relatedFieldName}
-                        message={formatMessage(getTrad('popup.item.form.related.label'))}
-                      />
-                      <Select
-                        name={relatedFieldName}
-                        error={get(formErrors, relatedFieldName)}
-                        onChange={onChange}
-                        onInputChange={debounceContentTypeSearchQuery}
-                        inputValue={contentTypeSearchInputValue}
-                        isLoading={isLoading}
-                        options={relatedSelectOptions}
-                        value={relatedSelectValue}
-                      />
-                      {!isLoading && thereAreNoMoreContentTypes && (
-                        <Text
-                          color="orange"
-                          fontSize="sm"
-                        >
-                          <FontAwesomeIcon icon={faInfoCircle} />{' '}
-                          {formatMessage(getTrad('popup.item.form.related.empty'), { contentTypeName: get(relatedTypeSelectValue, 'label') })}
-                        </Text>)}
-                    </div>
-                  )}
-                </div>
-              </>
-            )}
-          </section>
-        </ModalBody>
-      </ModalForm>
-      <ModalFooter>
-        <section>
-          <Button
-            onClick={handleRemove}
-            color="delete"
-            label={formatMessage(getTrad('popup.item.form.button.remove'))}
-          />
-        </section>
-        <section>
-          <ButtonModal
-            onClick={handleSubmit}
-            disabled={submitDisabled}
-            message={getTradId(`popup.item.form.button.${
-              form.viewId ? 'update' : 'create'
-            }`)}
-          />
-        </section>
-      </ModalFooter>
-    </form>
-  );
-};
-
-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,
-};
-
-export default NavigationItemForm;

package/admin/src/containers/View/components/NavigationItemPopup/MediumPopup.js

@@ -1,6 +0,0 @@
-import styled from "styled-components";
-const { Modal } = require("strapi-helper-plugin");
-
-export const MediumPopup = styled(Modal)`
-    width: 72rem;
-`;

package/admin/src/containers/View/index.js

@@ -1,240 +0,0 @@
-/*
- *
- * Navigation View
- *
- */
-
-import React, { memo, useMemo, useState } from 'react';
-import { FormattedMessage, useIntl } from "react-intl";
-import { LoadingIndicatorPage } from "strapi-helper-plugin";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faHamburger, faPlus } from "@fortawesome/free-solid-svg-icons";
-import useDataManager from "../../hooks/useDataManager";
-import { isEmpty, get } from "lodash";
-import { Header } from "@buffetjs/custom";
-import { Button, HeaderActions, Select } from "@buffetjs/core";
-import Wrapper from "../View/Wrapper";
-import EmptyView from "../../components/EmptyView";
-import HeaderForm from "./HeaderForm";
-import HeaderFormCell from "./HeaderFormCell";
-import NavigationItemPopUp from "./components/NavigationItemPopup";
-import List from "../../components/List";
-import {
-  transformItemToViewPayload,
-  transformToRESTPayload, 
-  usedContentTypes,
-  validateNavigationStructure,
-} from './utils/parsers';
-import FadedWrapper from "./FadedWrapper";
-import { getTrad, getTradId } from '../../translations';
-
-const View = () => {
-  const {
-    items: availableNavigations,
-    activeItem: activeNavigation,
-    changedActiveItem: changedActiveNavigation,
-    config,
-    navigationItemPopupOpened,
-    isLoading,
-    isLoadingForAdditionalDataToBeSet,
-    isLoadingForSubmit,
-    handleChangeNavigationItemPopupVisibility,
-    handleChangeSelection,
-    handleChangeNavigationData,
-    handleResetNavigationData,
-    handleSubmitNavigation,
-    getContentTypeItems,
-    error
-  } = useDataManager();
-  const [activeNavigationItem, setActiveNavigationItemState] = useState({});
-  const { formatMessage } = useIntl();
-
-  const options = availableNavigations.map((item) => ({
-    value: item.id,
-    label: item.name,
-  }));
-
-  const structureHasErrors = !validateNavigationStructure((changedActiveNavigation || {}).items);
-  const navigationSelectValue = get(activeNavigation, "id", null);
-  const actions = [
-    {
-      label: formatMessage(getTrad('submit.cta.cancel')),
-      onClick: () => isLoadingForSubmit ? null : handleResetNavigationData(),
-      color: "cancel",
-      type: "button",
-    },
-    {
-      label: formatMessage(getTrad('submit.cta.save')),
-      onClick: () =>
-        isLoadingForSubmit || structureHasErrors ? null : handleSubmitNavigation(formatMessage, transformToRESTPayload(changedActiveNavigation, config)),
-      color: "success",
-      type: "submit",
-      isLoading: isLoadingForSubmit,
-      disabled: structureHasErrors,
-    },
-  ];
-
-  const pullUsedContentTypeItem = (items = []) =>
-    items.reduce((prev, curr) =>
-        [...prev, curr.relatedRef ? {
-          __collectionName: curr.relatedRef.__collectionName,
-          id: curr.relatedRef.id
-        } : undefined, ...pullUsedContentTypeItem(curr.items)].filter(item => item)
-      , []);
-  const usedContentTypeItems = pullUsedContentTypeItem((changedActiveNavigation || {}).items);
-
-  const changeNavigationItemPopupState = (visible, editedItem = {}) => {
-    setActiveNavigationItemState(editedItem);
-    handleChangeNavigationItemPopupVisibility(visible);
-  };
-
-  const addNewNavigationItem = (
-    e,
-    viewId = null,
-    isMenuAllowedLevel = true,
-    levelPath = '',
-    parentAttachedToMenu = true,
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-    changeNavigationItemPopupState(true, {
-      viewParentId: viewId,
-      isMenuAllowedLevel,
-      levelPath,
-      parentAttachedToMenu,
-    });
-  };
-
-  const editNavigationItem = (
-    e,
-    item,
-    levelPath = '',
-    parentAttachedToMenu = true,
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-    changeNavigationItemPopupState(true, {
-      ...item,
-      levelPath,
-      parentAttachedToMenu,
-    });
-  };
-
-  const restoreNavigationItem = (e, item) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    handleSubmitNavigationItem({
-      ...item,
-      removed: false,
-    });
-  };
-
-  const reOrderNavigationItem = (e, item, moveBy = 0) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    handleSubmitNavigationItem({
-      ...item,
-      order: item.order + (moveBy * 1.5),
-    });
-  }
-
-  const onPopUpClose = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    changeNavigationItemPopupState(false);
-  };
-
-  const handleSubmitNavigationItem = (payload) => {
-    const changedStructure = {
-      ...changedActiveNavigation,
-      items: transformItemToViewPayload(payload, changedActiveNavigation.items, config),
-    };
-    handleChangeNavigationData(changedStructure, true);
-  };
-
-  const usedContentTypesData = useMemo(
-    () => changedActiveNavigation ? usedContentTypes(changedActiveNavigation.items) : [],
-    [changedActiveNavigation],
-  );
-
-  return (
-    <div className="container-fluid">
-      <div className="row">
-        <Wrapper className="col-md-12">
-          <HeaderForm>
-            <HeaderFormCell>
-              <Header
-                title={{
-                  label: formatMessage(getTrad('header.title')),
-                }}
-                content={formatMessage(getTrad('header.description'))}
-              />
-            </HeaderFormCell>
-            { options && (options.length > 1) && (<HeaderFormCell>
-              <Select
-                name="activeNavigation"
-                onChange={({ target: { value } }) =>
-                  handleChangeSelection(value)
-                }
-                options={options}
-                value={navigationSelectValue}
-              />
-            </HeaderFormCell>) }
-            <HeaderFormCell align="right" fill>
-              <HeaderActions actions={actions} />
-            </HeaderFormCell>
-          </HeaderForm>
-          <FadedWrapper>
-            {isLoading && <LoadingIndicatorPage />}
-            {changedActiveNavigation && (
-              <>
-                {isEmpty(changedActiveNavigation.items || []) && (
-                  <EmptyView>
-                    <FontAwesomeIcon icon={faHamburger} size="5x" />
-                    <FormattedMessage id={getTradId('empty')} />
-                    <Button
-                      color="primary"
-                      icon={<FontAwesomeIcon icon={faPlus} />}
-                      label={formatMessage(getTrad('empty.cta'))}
-                      onClick={addNewNavigationItem}
-                    />
-                  </EmptyView>
-                )}
-                {!isEmpty(changedActiveNavigation.items || []) && (
-                  <List
-                    items={changedActiveNavigation.items || []}
-                    onItemClick={editNavigationItem}
-                    onItemReOrder={reOrderNavigationItem}
-                    onItemRestoreClick={restoreNavigationItem}
-                    onItemLevelAddClick={addNewNavigationItem}
-                    root
-                    error={error}
-                    allowedLevels={config.allowedLevels}
-                    contentTypes={config.contentTypes}
-                    isParentAttachedToMenu={true}
-                    contentTypesNameFields={config.contentTypesNameFields}
-                  />
-                )}
-              </>
-            )}
-          </FadedWrapper>
-          <NavigationItemPopUp
-            isOpen={navigationItemPopupOpened}
-            isLoading={isLoadingForAdditionalDataToBeSet}
-            data={activeNavigationItem}
-            config={config}
-            usedContentTypesData={usedContentTypesData}
-            usedContentTypeItems={usedContentTypeItems}
-            getContentTypeItems={getContentTypeItems}
-            onSubmit={handleSubmitNavigationItem}
-            onClose={onPopUpClose}
-          />
-        </Wrapper>
-      </div>
-    </div>
-  );
-};
-
-export default memo(View);

package/admin/src/lifecycles.js

@@ -1,3 +0,0 @@
-function lifecycles() {}
-
-export default lifecycles;

package/admin/src/permissions.js

@@ -1,14 +0,0 @@
-const pluginPermissions = {
-  // This permission regards the main component (App) and is used to tell
-  // If the plugin link should be displayed in the menu
-  // And also if the plugin is accessible. This use case is found when a user types the url of the
-  // plugin directly in the browser
-  main: [
-    { action: "plugins::navigation.read", subject: null },
-    { action: "plugins::navigation.update", subject: null },
-  ],
-  open: [{ action: "plugins::navigation.read", subject: null }],
-  update: [{ action: "plugins::navigation.update", subject: null }],
-};
-
-export default pluginPermissions;