feedback fixes

packages/core/admin/admin/src/content-manager/components/SettingFormWrapper/index.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-const SettingFormWrapper = styled.div`
-  padding: 24px 30px 0px;
-  background-color: #fafafb;
-  border-radius: 2px;
-`;
-
-export default SettingFormWrapper;

packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DragWrapper.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const DragWrapper = () => {
-  return <div>yo yo yo</div>;
-};
-
-export default DragWrapper;

packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { get } from 'lodash';
+import { useIntl } from 'react-intl';
+import { Row } from '@strapi/parts/Row';
+import { Grid, GridItem } from '@strapi/parts/Grid';
+import { Select, Option } from '@strapi/parts/Select';
+import { ToggleInput } from '@strapi/parts/ToggleInput';
+import { Box } from '@strapi/parts/Box';
+import { H3 } from '@strapi/parts/Text';
+
+const RowGap = styled(Row)`
+  gap: ${({ theme }) => theme.spaces[4]};
+`;
+
+const Settings = ({ modifiedData, onChange, sortOptions }) => {
+  const { formatMessage } = useIntl();
+  const { settings } = modifiedData;
+
+  return (
+    <>
+      <Box paddingBottom={4}>
+        <H3>
+          {formatMessage({
+            id: 'content-manager.containers.SettingPage.settings',
+            defaultMessage: 'Settings',
+          })}
+        </H3>
+      </Box>
+      <RowGap justifyContent="space-between" wrap="wrap" paddingBottom={6}>
+        <ToggleInput
+          label={formatMessage({
+            id: 'content-manager.form.Input.search',
+            defaultMessage: 'Enable search',
+          })}
+          onChange={e => {
+            onChange({ target: { name: 'settings.searchable', value: e.target.checked } });
+          }}
+          onLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.on-label',
+            defaultMessage: 'on',
+          })}
+          offLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.off-label',
+            defaultMessage: 'off',
+          })}
+          name="settings.searchable"
+          checked={settings.searchable}
+        />
+        <ToggleInput
+          label={formatMessage({
+            id: 'content-manager.form.Input.filters',
+            defaultMessage: 'Enable filters',
+          })}
+          onChange={e => {
+            onChange({ target: { name: 'settings.filterable', value: e.target.checked } });
+          }}
+          onLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.on-label',
+            defaultMessage: 'on',
+          })}
+          offLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.off-label',
+            defaultMessage: 'off',
+          })}
+          name="settings.filterable"
+          checked={settings.filterable}
+        />
+        <ToggleInput
+          label={formatMessage({
+            id: 'content-manager.form.Input.bulkActions',
+            defaultMessage: 'Enable bulk actions',
+          })}
+          onChange={e => {
+            onChange({ target: { name: 'settings.bulkable', value: e.target.checked } });
+          }}
+          onLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.on-label',
+            defaultMessage: 'on',
+          })}
+          offLabel={formatMessage({
+            id: 'app.components.ToggleCheckbox.off-label',
+            defaultMessage: 'off',
+          })}
+          name="settings.bulkable"
+          checked={settings.bulkable}
+        />
+      </RowGap>
+      <Grid gap={4}>
+        <GridItem s={12} col={6}>
+          <Select
+            label={formatMessage({
+              id: 'content-manager.form.Input.pageEntries',
+              defaultMessage: 'Entries per page',
+            })}
+            hint={formatMessage({
+              id: 'content-manager.form.Input.pageEntries.inputDescription',
+              defaultMessage:
+                'Note: You can override this value in the Collection Type settings page.',
+            })}
+            onChange={e => onChange({ target: { name: 'settings.pageSize', value: e } })}
+            name="settings.pageSize"
+            value={get(modifiedData, 'settings.pageSize', '')}
+          >
+            {[10, 20, 50, 100].map(pageSize => (
+              <Option key={pageSize} value={pageSize}>
+                {pageSize}
+              </Option>
+            ))}
+          </Select>
+        </GridItem>
+        <GridItem s={12} col={3}>
+          <Select
+            label={formatMessage({
+              id: 'content-manager.form.Input.defaultSort',
+              defaultMessage: 'Default sort attribute',
+            })}
+            onChange={e => onChange({ target: { name: 'settings.defaultSortBy', value: e } })}
+            name="settings.defaultSortBy"
+            value={get(modifiedData, 'settings.defaultSortBy', '')}
+          >
+            {sortOptions.map(sortBy => (
+              <Option key={sortBy} value={sortBy}>
+                {sortBy}
+              </Option>
+            ))}
+          </Select>
+        </GridItem>
+        <GridItem s={12} col={3}>
+          <Select
+            label={formatMessage({
+              id: 'content-manager.form.Input.sort.order',
+              defaultMessage: 'Default sort order',
+            })}
+            onChange={e => onChange({ target: { name: 'settings.defaultSortOrder', value: e } })}
+            name="settings.defaultSortOrder"
+            value={get(modifiedData, 'settings.defaultSortOrder', '')}
+          >
+            {['ASC', 'DESC'].map(order => (
+              <Option key={order} value={order}>
+                {order}
+              </Option>
+            ))}
+          </Select>
+        </GridItem>
+      </Grid>
+    </>
+  );
+};
+
+Settings.defaultProps = {
+  modifiedData: {},
+  sortOptions: [],
+};
+
+Settings.propTypes = {
+  modifiedData: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  sortOptions: PropTypes.array,
+};
+
+export default Settings;

packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/SettingsForm.js

@@ -1,256 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { GenericInput, ConfirmDialog, useTracking } from '@strapi/helper-plugin';
-import { get, isEqual, upperFirst } from 'lodash';
-import { stringify } from 'qs';
-import { useIntl } from 'react-intl';
-import { Layout, HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
-import { Link } from '@strapi/parts/Link';
-import { Main } from '@strapi/parts/Main';
-import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
-import { Grid, GridItem } from '@strapi/parts/Grid';
-import { Select, Option } from '@strapi/parts/Select';
-import { H3 } from '@strapi/parts/Text';
-import { Button } from '@strapi/parts/Button';
-import CheckIcon from '@strapi/icons/CheckIcon';
-import BackIcon from '@strapi/icons/BackIcon';
-import { usePluginsQueryParams } from '../../../hooks';
-
-const RowGap = styled(Row)`
-  gap: ${({ theme }) => theme.spaces[4]};
-`;
-
-const SettingsForm = ({
-  children,
-  initialData,
-  isEditSettings,
-  isSubmittingForm,
-  modifiedData,
-  collectionName,
-  onChange,
-  onConfirmSubmit,
-  sortOptions,
-}) => {
-  const pluginsQueryParams = usePluginsQueryParams();
-  const { trackUsage } = useTracking();
-  const { formatMessage } = useIntl();
-  const [showWarningSubmit, setWarningSubmit] = useState(false);
-  const toggleWarningSubmit = () => setWarningSubmit(prevState => !prevState);
-
-  const handleSubmit = e => {
-    e.preventDefault();
-    toggleWarningSubmit();
-    trackUsage('willSaveContentTypeLayout');
-  };
-
-  const goBackUrl = () => {
-    const {
-      settings: { pageSize, defaultSortBy, defaultSortOrder },
-      kind,
-      uid,
-    } = modifiedData;
-    const sort = `${defaultSortBy}:${defaultSortOrder}`;
-    const goBackSearch = `${stringify(
-      {
-        page: 1,
-        pageSize,
-        sort,
-      },
-      { encode: false }
-    )}${pluginsQueryParams ? `&${pluginsQueryParams}` : ''}`;
-
-    return `/content-manager/${kind}/${uid}?${goBackSearch}`;
-  };
-
-  return (
-    <Layout>
-      <Main aria-busy={isSubmittingForm}>
-        <form onSubmit={handleSubmit}>
-          <HeaderLayout
-            navigationAction={
-              <Link startIcon={<BackIcon />} to={goBackUrl}>
-                go back
-              </Link>
-            }
-            primaryAction={
-              <Button
-                size="L"
-                startIcon={<CheckIcon />}
-                disabled={isEqual(modifiedData, initialData)}
-                type="submit"
-              >
-                {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
-              </Button>
-            }
-            subtitle={formatMessage({
-              id: `components.SettingsViewWrapper.pluginHeader.description.${
-                isEditSettings ? 'edit' : 'list'
-              }-settings`,
-              defaultMessage: `Define the settings of the ${
-                isEditSettings ? 'edit' : 'list'
-              } view.`,
-            })}
-            title={formatMessage(
-              {
-                id: 'components.SettingsViewWrapper.pluginHeader.title',
-                defaultMessage: 'Configure the view - {name}',
-              },
-              { name: upperFirst(collectionName) }
-            )}
-          />
-          <ContentLayout>
-            <Box
-              background="neutral0"
-              hasRadius
-              shadow="tableShadow"
-              paddingTop={6}
-              paddingBottom={6}
-              paddingLeft={7}
-              paddingRight={7}
-            >
-              <Box paddingBottom={4}>
-                <H3>
-                  {formatMessage({
-                    id: 'content-manager.containers.SettingPage.settings',
-                    defaultMessage: 'Settings',
-                  })}
-                </H3>
-              </Box>
-              <RowGap justifyContent="space-between" wrap="wrap" paddingBottom={6}>
-                <GenericInput
-                  value={get(modifiedData, 'settings.searchable', '')}
-                  name="settings.searchable"
-                  intlLabel={{
-                    id: 'content-manager.form.Input.search',
-                    defaultMessage: 'Enable search',
-                  }}
-                  onChange={onChange}
-                  type="bool"
-                />
-                <GenericInput
-                  value={get(modifiedData, 'settings.filterable', '')}
-                  name="settings.filterable"
-                  intlLabel={{
-                    id: 'content-manager.form.Input.filters',
-                    defaultMessage: 'Enable filters',
-                  }}
-                  onChange={onChange}
-                  type="bool"
-                />
-                <GenericInput
-                  value={get(modifiedData, 'settings.bulkable', '')}
-                  name="settings.bulkable"
-                  intlLabel={{
-                    id: 'content-manager.form.Input.bulkActions',
-                    defaultMessage: 'Enable bulk actions',
-                  }}
-                  onChange={onChange}
-                  type="bool"
-                />
-              </RowGap>
-              <Grid gap={4}>
-                <GridItem s={12} col={6}>
-                  <Select
-                    label={formatMessage({
-                      id: 'content-manager.form.Input.pageEntries',
-                      defaultMessage: 'Entries per page',
-                    })}
-                    hint={formatMessage({
-                      id: 'content-manager.form.Input.pageEntries.inputDescription',
-                      defaultMessage:
-                        'Note: You can override this value in the Collection Type settings page.',
-                    })}
-                    onChange={e => onChange({ target: { name: 'settings.pageSize', value: e } })}
-                    name="settings.pageSize"
-                    value={get(modifiedData, 'settings.pageSize', '')}
-                  >
-                    {[10, 20, 50, 100].map(pageSize => (
-                      <Option key={pageSize} value={pageSize}>
-                        {pageSize}
-                      </Option>
-                    ))}
-                  </Select>
-                </GridItem>
-                <GridItem s={12} col={3}>
-                  <Select
-                    label={formatMessage({
-                      id: 'content-manager.form.Input.defaultSort',
-                      defaultMessage: 'Default sort attribute',
-                    })}
-                    onChange={e =>
-                      onChange({ target: { name: 'settings.defaultSortBy', value: e } })}
-                    name="settings.defaultSortBy"
-                    value={get(modifiedData, 'settings.defaultSortBy', '')}
-                  >
-                    {sortOptions.map(sortBy => (
-                      <Option key={sortBy} value={sortBy}>
-                        {sortBy}
-                      </Option>
-                    ))}
-                  </Select>
-                </GridItem>
-                <GridItem s={12} col={3}>
-                  <Select
-                    label={formatMessage({
-                      id: 'content-manager.form.Input.sort.order',
-                      defaultMessage: 'Default sort order',
-                    })}
-                    onChange={e =>
-                      onChange({ target: { name: 'settings.defaultSortOrder', value: e } })}
-                    name="settings.defaultSortOrder"
-                    value={get(modifiedData, 'settings.defaultSortOrder', '')}
-                  >
-                    {['ASC', 'DESC'].map(order => (
-                      <Option key={order} value={order}>
-                        {order}
-                      </Option>
-                    ))}
-                  </Select>
-                </GridItem>
-              </Grid>
-              {children}
-            </Box>
-          </ContentLayout>
-          <ConfirmDialog
-            bodyText={{
-              id: 'content-manager.popUpWarning.warning.updateAllSettings',
-              defaultMessage: 'This will modify all your settings',
-            }}
-            iconRightButton={<CheckIcon />}
-            isConfirmButtonLoading={isSubmittingForm}
-            isOpen={showWarningSubmit}
-            onToggleDialog={toggleWarningSubmit}
-            onConfirm={onConfirmSubmit}
-            variantRightButton="success-light"
-          />
-        </form>
-      </Main>
-    </Layout>
-  );
-};
-
-SettingsForm.defaultProps = {
-  collectionName: '',
-  initialData: {},
-  isEditSettings: false,
-  isSubmittingForm: false,
-  modifiedData: {},
-  onConfirmSubmit: () => {},
-  sortOptions: [],
-};
-
-SettingsForm.propTypes = {
-  children: PropTypes.node.isRequired,
-  collectionName: PropTypes.string,
-  initialData: PropTypes.object,
-  isEditSettings: PropTypes.bool,
-  isSubmittingForm: PropTypes.bool,
-  modifiedData: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-  onConfirmSubmit: PropTypes.func,
-  sortOptions: PropTypes.array,
-};
-
-export default SettingsForm;

packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js

@@ -3,27 +3,32 @@ import React, {
   useContext,
   // useMemo,
   useReducer,
-  // useState
+  useState,
 } from 'react';
 import PropTypes from 'prop-types';
 import { useMutation } from 'react-query';
-import {
-  // get,
-  pick,
-} from 'lodash';
-import { useNotification, useTracking } from '@strapi/helper-plugin';
-// import { useIntl } from 'react-intl';
+import { isEqual, upperFirst, pick } from 'lodash';
+import { stringify } from 'qs';
+import { useNotification, useTracking, ConfirmDialog } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
 import { Box } from '@strapi/parts/Box';
 import { Divider } from '@strapi/parts/Divider';
+import { Layout, HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
+import { Link } from '@strapi/parts/Link';
+import { Main } from '@strapi/parts/Main';
+import { Button } from '@strapi/parts/Button';
+import CheckIcon from '@strapi/icons/CheckIcon';
+import BackIcon from '@strapi/icons/BackIcon';
 import ModelsContext from '../../contexts/ModelsContext';
+import { usePluginsQueryParams } from '../../hooks';
 import putCMSettingsLV from './utils/api';
-import SettingsForm from './components/SettingsForm';
-import DragWrapper from './components/DragWrapper';
+import Settings from './components/Settings';
 // import LayoutDndProvider from '../../components/LayoutDndProvider';
 import init from './init';
 import reducer, { initialState } from './reducer';
 
 const ListSettingsView = ({ layout, slug, updateLayout }) => {
+  const pluginsQueryParams = usePluginsQueryParams();
   const toggleNotification = useNotification();
   const { refetchData } = useContext(ModelsContext);
   const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
@@ -32,7 +37,7 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => {
   // const [isOpen, setIsOpen] = useState(false);
   // const [isModalFormOpen, setIsModalFormOpen] = useState(false);
   // const [isDraggingSibling, setIsDraggingSibling] = useState(false);
-  // const { formatMessage } = useIntl();
+  const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   // const toggleModalForm = () => setIsModalFormOpen(prevState => !prevState);
   const {
@@ -100,6 +105,34 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => {
     });
   };
 
+  const [showWarningSubmit, setWarningSubmit] = useState(false);
+  const toggleWarningSubmit = () => setWarningSubmit(prevState => !prevState);
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    toggleWarningSubmit();
+    trackUsage('willSaveContentTypeLayout');
+  };
+
+  const goBackUrl = () => {
+    const {
+      settings: { pageSize, defaultSortBy, defaultSortOrder },
+      kind,
+      uid,
+    } = modifiedData;
+    const sort = `${defaultSortBy}:${defaultSortOrder}`;
+    const goBackSearch = `${stringify(
+      {
+        page: 1,
+        pageSize,
+        sort,
+      },
+      { encode: false }
+    )}${pluginsQueryParams ? `&${pluginsQueryParams}` : ''}`;
+
+    return `/content-manager/${kind}/${uid}?${goBackSearch}`;
+  };
+
   // const handleChangeEditLabel = ({ target: { name, value } }) => {
   //   dispatch({
   //     type: 'ON_CHANGE_LABEL_METAS',
@@ -184,21 +217,72 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => {
   // };
 
   return (
-    <SettingsForm
-      collectionName={modifiedData.info.label}
-      initialData={initialData}
-      isSubmittingForm={isSubmittingForm}
-      modifiedData={modifiedData}
-      onChange={handleChange}
-      onConfirmSubmit={handleConfirm}
-      refetchData={refetchData}
-      sortOptions={sortOptions}
-    >
-      <Box padding={6}>
-        <Divider />
-      </Box>
-      <DragWrapper />
-    </SettingsForm>
+    <Layout>
+      <Main aria-busy={isSubmittingForm}>
+        <form onSubmit={handleSubmit}>
+          <HeaderLayout
+            navigationAction={
+              <Link startIcon={<BackIcon />} to={goBackUrl}>
+                {formatMessage({ id: 'app.components.go-back', defaultMessage: 'Go back' })}
+              </Link>
+            }
+            primaryAction={
+              <Button
+                size="L"
+                startIcon={<CheckIcon />}
+                disabled={isEqual(modifiedData, initialData)}
+                type="submit"
+              >
+                {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+              </Button>
+            }
+            subtitle={formatMessage({
+              id: `components.SettingsViewWrapper.pluginHeader.description.list-settings`,
+              defaultMessage: `Define the settings of the list view.`,
+            })}
+            title={formatMessage(
+              {
+                id: 'components.SettingsViewWrapper.pluginHeader.title',
+                defaultMessage: 'Configure the view - {name}',
+              },
+              { name: upperFirst(modifiedData.info.label) }
+            )}
+          />
+          <ContentLayout>
+            <Box
+              background="neutral0"
+              hasRadius
+              shadow="tableShadow"
+              paddingTop={6}
+              paddingBottom={6}
+              paddingLeft={7}
+              paddingRight={7}
+            >
+              <Settings
+                modifiedData={modifiedData}
+                onChange={handleChange}
+                sortOptions={sortOptions}
+              />
+              <Box padding={6}>
+                <Divider />
+              </Box>
+            </Box>
+          </ContentLayout>
+          <ConfirmDialog
+            bodyText={{
+              id: 'content-manager.popUpWarning.warning.updateAllSettings',
+              defaultMessage: 'This will modify all your settings',
+            }}
+            iconRightButton={<CheckIcon />}
+            isConfirmButtonLoading={isSubmittingForm}
+            isOpen={showWarningSubmit}
+            onToggleDialog={toggleWarningSubmit}
+            onConfirm={handleConfirm}
+            variantRightButton="success-light"
+          />
+        </form>
+      </Main>
+    </Layout>
 
     //     <LayoutDndProvider
     //       isDraggingSibling={isDraggingSibling}

packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/index.test.js

@@ -818,7 +818,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
                       <span
                         class="c9 c10 c11"
                       >
-                        go back
+                        Go back
                       </span>
                     </a>
                   </div>
@@ -925,7 +925,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
                               <span
                                 class="c42"
                               >
-                                Off
+                                off
                               </span>
                             </div>
                             <div
@@ -935,7 +935,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
                               <span
                                 class="c35"
                               >
-                                On
+                                on
                               </span>
                             </div>
                             <input
@@ -981,7 +981,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
                               <span
                                 class="c42"
                               >
-                                Off
+                                off
                               </span>
                             </div>
                             <div
@@ -991,7 +991,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
                               <span
                                 class="c35"
                               >
-                                On
+                                on
                               </span>
                             </div>
                             <input
@@ -1037,7 +1037,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
                               <span
                                 class="c42"
                               >
-                                Off
+                                off
                               </span>
                             </div>
                             <div
@@ -1047,7 +1047,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
                               <span
                                 class="c35"
                               >
-                                On
+                                on
                               </span>
                             </div>
                             <input
@@ -1315,9 +1315,6 @@ describe('ADMIN | CM | LV | Configure the view', () => {
                       class="c63 c64"
                     />
                   </div>
-                  <div>
-                    yo yo yo
-                  </div>
                 </div>
               </div>
             </form>