Dynamic zones ui

2025-11-04 03:43:34 +00:00 · 2019-11-21 18:48:13 +01:00 · 2019-11-21 18:48:13 +01:00 · 3e1779c896
commit 3e1779c896
parent 7d1634cde6
10 changed files with 26 additions and 56 deletions
--- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/RoundCTA.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/RoundCTA.js
@ -15,10 +15,19 @@ const RoundCTA = styled.div`
    line-height: 27px;
    margin: auto;
  }
-  &:hover {
+  &:not(.arrow-btn):hover {
    background-color: #faa684;
    color: #f64d0a;
  }
+  &.arrow-btn {
+    height: 22px;
+    width: 22px;
+    background-color: #ffffff;
+    border: 2px solid #ffffff;
+    &:hover {
+      background-color: #f2f3f4;
+    }
+  }
 `;

 export default RoundCTA;
--- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js
@ -91,7 +91,8 @@ const DynamicZone = ({ max, min, name }) => {
            <div key={index}>
              {showDownIcon && (
                <RoundCTA
-                  style={{ top: -15, right: 30 }}
+                  style={{ top: -15, right: 54 }}
+                  className="arrow-btn"
                  onClick={() => moveComponentDown(name, index)}
                >
                  <i className="fa fa-arrow-down" />
@ -99,7 +100,8 @@ const DynamicZone = ({ max, min, name }) => {
              )}
              {showUpIcon && (
                <RoundCTA
-                  style={{ top: -15, right: 45 }}
+                  style={{ top: -15, right: 88 }}
+                  className="arrow-btn"
                  onClick={() => moveComponentUp(name, index)}
                >
                  <i className="fa fa-arrow-up" />
--- a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/ListItem.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/ListItem.js
@ -16,10 +16,9 @@ function ListItem({
  moveRelation,
  nextSearch,
  onRemove,
-  source,
  targetModel,
 }) {
-  const to = `/plugins/${pluginId}/${targetModel}/${data.id}?source=${source}&redirectUrl=${nextSearch}`;
+  const to = `/plugins/${pluginId}/${targetModel}/${data.id}?redirectUrl=${nextSearch}`;

  const originalIndex = findRelation(data.id).index;
  const [{ isDragging }, drag, preview] = useDrag({
@ -73,7 +72,6 @@ ListItem.propTypes = {
  moveRelation: PropTypes.func,
  nextSearch: PropTypes.string,
  onRemove: PropTypes.func,
-  source: PropTypes.string.isRequired,
  targetModel: PropTypes.string,
 };

--- a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/index.js
@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef, memo } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Link, useLocation } from 'react-router-dom';
-import { get, isArray, isEmpty } from 'lodash';
+import { cloneDeep, get, isArray, isEmpty } from 'lodash';
 import { request } from 'strapi-helper-plugin';
 import pluginId from '../../pluginId';
 import useDataManager from '../../hooks/useDataManager';
@ -22,7 +22,6 @@ function SelectWrapper({
  relationType,
  targetModel,
  placeholder,
-  plugin,
 }) {
  const { pathname, search } = useLocation();
  const {
@ -33,13 +32,12 @@ function SelectWrapper({
    onRemoveRelation,
  } = useDataManager();
  const { isDraggingComponent } = useEditView();
+
  const value = get(modifiedData, name, null);
-  const source = isEmpty(plugin) ? 'content-manager' : plugin;
  const [state, setState] = useState({
    _q: '',
    _limit: 20,
    _start: 0,
-    source,
  });
  const [options, setOptions] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
@ -153,7 +151,7 @@ function SelectWrapper({
  const nextSearch = `${pathname}${search}`;
  const to = `/plugins/${pluginId}/${targetModel}/${
    value ? value.id : null
-  }?source=${source}&redirectUrl=${nextSearch}`;
+  }?redirectUrl=${nextSearch}`;
  const link =
    value === null ||
    value === undefined ||
@ -210,7 +208,6 @@ function SelectWrapper({
            placeholder
          )
        }
-        source={source}
        targetModel={targetModel}
        value={value}
      />
--- a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js
@ -9,7 +9,7 @@ import React, {
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { useHistory, useLocation } from 'react-router-dom';
-import { BackHeader, getQueryParameters, LiLink } from 'strapi-helper-plugin';
+import { BackHeader, LiLink } from 'strapi-helper-plugin';
 import pluginId from '../../pluginId';
 import Container from '../../components/Container';
 import DynamicZone from '../../components/DynamicZone';
@ -64,7 +64,6 @@ const EditView = ({
    () => get(currentContentTypeLayoutData, ['schema'], {}),
    [currentContentTypeLayoutData]
  );
-  const source = getQueryParameters(search, 'source');

  const getFieldMetas = useCallback(
    fieldName => {
@ -276,8 +275,7 @@ const EditView = ({
                    }}
                    icon="layout"
                    key={`${pluginId}.link`}
-                    // url={`/plugins/${pluginId}/ctm-configurations/edit-settings/content-types/${slug}${`?source=${source}`}`}
-                    url={`ctm-configurations/edit-settings/content-types${`?source=${source}`}`}
+                    url={`ctm-configurations/edit-settings/content-types`}
                    onClick={() => {
                      // emitEvent('willEditContentTypeLayoutFromEditView');
                    }}
@ -287,7 +285,6 @@ const EditView = ({
                    plugins,
                    currentEnvironment,
                    slug,
-                    source,
                    emitEvent,
                    true
                  )}
--- a/packages/strapi-plugin-content-manager/admin/src/containers/EditViewDataManagerProvider/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditViewDataManagerProvider/index.js
@ -1,12 +1,8 @@
 import React, { useEffect, useReducer } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { cloneDeep, get, isEmpty, set } from 'lodash';
-import {
-  getQueryParameters,
-  request,
-  LoadingIndicatorPage,
-} from 'strapi-helper-plugin';
+import { request, LoadingIndicatorPage } from 'strapi-helper-plugin';
 import pluginId from '../../pluginId';
 import EditViewDataManagerContext from '../../contexts/EditViewDataManager';
 import createYupSchema from './utils/schema';
@ -27,7 +23,6 @@ const EditViewDataManagerProvider = ({
 }) => {
  const { id } = useParams();
  // Retrieve the search
-  const { search } = useLocation();
  const [reducerState, dispatch] = useReducer(reducer, initialState, init);
  const {
    formErrors,
@ -42,7 +37,6 @@ const EditViewDataManagerProvider = ({
  const abortController = new AbortController();
  const { signal } = abortController;
  const isCreatingEntry = id === 'create';
-  const source = getQueryParameters(search, 'source');

  useEffect(() => {
    if (!isLoading) {
@ -56,7 +50,6 @@ const EditViewDataManagerProvider = ({
      try {
        const data = await request(getRequestUrl(`${slug}/${id}`), {
          method: 'GET',
-          params: { source },
          signal,
        });

@ -107,7 +100,7 @@ const EditViewDataManagerProvider = ({
      abortController.abort();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, slug, source]);
+  }, [id, slug]);

  const addComponentToDynamicZone = (
    keys,
@ -236,7 +229,6 @@ const EditViewDataManagerProvider = ({
          {
            method,
            headers,
-            params: { source },
            body: formData,
            signal,
          },
@ -369,7 +361,6 @@ const EditViewDataManagerProvider = ({
        setIsSubmitting,
        shouldShowLoadingState,
        slug,
-        source,
      }}
    >
      {showLoader ? (
--- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js
@ -400,11 +400,7 @@ function ListView({
          }}
          popUpWarningType="danger"
          onConfirm={() => {
-            onDeleteSeveralData(
-              entriesToDelete,
-              slug,
-              getSearchParams().source
-            );
+            onDeleteSeveralData(entriesToDelete, slug);
          }}
        />
      </ListViewProvider>
--- a/packages/strapi-plugin-content-manager/admin/src/utils/getComponents.js
+++ b/packages/strapi-plugin-content-manager/admin/src/utils/getComponents.js
@ -11,7 +11,6 @@ const getInjectedComponents = (
  plugins,
  currentEnvironment,
  slug,
-  source,
  emitEvent,
  push
 ) => {
@ -32,7 +31,6 @@ const getInjectedComponents = (
          <Component
            currentEnvironment={currentEnvironment}
            getModelName={() => slug}
-            getSource={() => source}
            getContentTypeBuilderBaseUrl={() =>
              '/plugins/content-type-builder/models/'
            }
--- a/packages/strapi-plugin-content-type-builder/admin/src/InjectedComponents/ContentManager/EditViewButton.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/InjectedComponents/ContentManager/EditViewButton.js
@ -13,20 +13,12 @@ import { Button } from '@buffetjs/core';
 function EditViewButton(props) {
  const { formatMessage } = useGlobalContext();
  // Retrieve URL from props
-  const base = `${props.getContentTypeBuilderBaseUrl()}${props.getModelName()}`;
-  const url =
-    props.getSource() === 'users-permissions'
-      ? `${base}&source=${props.getSource()}`
-      : base;
+  const url = `${props.getContentTypeBuilderBaseUrl()}${props.getModelName()}`;

  const handleClick = () => {
    props.push(url);
  };

-  if (props.getSource() === 'admin') {
-    return null;
-  }
-
  if (props.currentEnvironment === 'development') {
    return (
      <Button
@ -52,7 +44,6 @@ EditViewButton.propTypes = {
  currentEnvironment: PropTypes.string.isRequired,
  getContentTypeBuilderBaseUrl: PropTypes.func.isRequired,
  getModelName: PropTypes.func.isRequired,
-  getSource: PropTypes.func.isRequired,
  push: PropTypes.func.isRequired,
 };

--- a/packages/strapi-plugin-content-type-builder/admin/src/InjectedComponents/ContentManager/EditViewLink.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/InjectedComponents/ContentManager/EditViewLink.js
@ -11,15 +11,7 @@ import { LiLink } from 'strapi-helper-plugin';
 // Create link from content-type-builder to content-manager
 function EditViewLink(props) {
  // Retrieve URL from props
-  const base = `${props.getContentTypeBuilderBaseUrl()}${props.getModelName()}`;
-  const url =
-    props.getSource() === 'users-permissions'
-      ? `${base}&source=${props.getSource()}`
-      : base;
-
-  if (props.getSource() === 'admin') {
-    return null;
-  }
+  const url = `${props.getContentTypeBuilderBaseUrl()}${props.getModelName()}`;

  if (props.currentEnvironment === 'development') {
    return <LiLink {...props} url={url} />;
@ -32,7 +24,6 @@ EditViewLink.propTypes = {
  currentEnvironment: PropTypes.string.isRequired,
  getContentTypeBuilderBaseUrl: PropTypes.func.isRequired,
  getModelName: PropTypes.func.isRequired,
-  getSource: PropTypes.func.isRequired,
 };

 export default EditViewLink;