Merge pull request #17665 from strapi/fix/list-settings-view

Fix: Remove configure the view confirmation

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

@@ -12,7 +12,7 @@ import { useFetchContentTypeLayout } from '../../hooks';
 import { formatLayoutToApi } from '../../utils';
 import EditSettingsView from '../EditSettingsView';
 import EditViewLayoutManager from '../EditViewLayoutManager';
-import ListSettingsView from '../ListSettingsView';
+import { ListSettingsView } from '../ListSettingsView';
 import ListViewLayout from '../ListViewLayoutManager';
 
 import ErrorFallback from './components/ErrorFallback';

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

@@ -1,4 +1,4 @@
-import React, { useContext, useReducer, useState } from 'react';
+import * as React from 'react';
 
 import {
   Button,
@@ -9,13 +9,7 @@ import {
   Layout,
   Main,
 } from '@strapi/design-system';
-import {
+import { Link, useFetchClient, useNotification, useTracking } from '@strapi/helper-plugin';
-  ConfirmDialog,
-  Link,
-  useFetchClient,
-  useNotification,
-  useTracking,
-} from '@strapi/helper-plugin';
 import { ArrowLeft, Check } from '@strapi/icons';
 import isEqual from 'lodash/isEqual';
 import upperFirst from 'lodash/upperFirst';
@@ -34,16 +28,14 @@ import { SortDisplayedFields } from './components/SortDisplayedFields';
 import { EXCLUDED_SORT_ATTRIBUTE_TYPES } from './constants';
 import reducer, { initialState } from './reducer';
 
-const ListSettingsView = ({ layout, slug }) => {
+export const ListSettingsView = ({ layout, slug }) => {
   const { put } = useFetchClient();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const pluginsQueryParams = usePluginsQueryParams();
   const toggleNotification = useNotification();
-  const { refetchData } = useContext(ModelsContext);
+  const { refetchData } = React.useContext(ModelsContext);
-  const [showWarningSubmit, setWarningSubmit] = useState(false);
+  const [{ fieldToEdit, fieldForm, initialData, modifiedData }, dispatch] = React.useReducer(
-  const toggleWarningSubmit = () => setWarningSubmit((prevState) => !prevState);
-  const [{ fieldToEdit, fieldForm, initialData, modifiedData }, dispatch] = useReducer(
     reducer,
     initialState,
     () => ({
@@ -101,16 +93,6 @@ const ListSettingsView = ({ layout, slug }) => {
     }
   );
 
-  const handleConfirm = async () => {
-    const { layouts, settings, metadatas } = modifiedData;
-
-    mutate({
-      layouts,
-      settings,
-      metadatas,
-    });
-  };
-
   const handleAddField = (item) => {
     dispatch({
       type: 'ADD_FIELD',
@@ -134,9 +116,17 @@ const ListSettingsView = ({ layout, slug }) => {
     }
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (event) => {
-    e.preventDefault();
+    event.preventDefault();
-    toggleWarningSubmit();
+
+    const { layouts, settings, metadatas } = modifiedData;
+
+    mutate({
+      layouts,
+      settings,
+      metadatas,
+    });
+
     trackUsage('willSaveContentTypeLayout');
   };
 
@@ -253,19 +243,6 @@ const ListSettingsView = ({ layout, slug }) => {
               />
             </Flex>
           </ContentLayout>
-
-          <ConfirmDialog
-            bodyText={{
-              id: getTrad('popUpWarning.warning.updateAllSettings'),
-              defaultMessage: 'This will modify all your settings',
-            }}
-            iconRightButton={<Check />}
-            isConfirmButtonLoading={isSubmittingForm}
-            isOpen={showWarningSubmit}
-            onToggleDialog={toggleWarningSubmit}
-            onConfirm={handleConfirm}
-            variantRightButton="success-light"
-          />
         </form>
 
         {isModalFormOpen && (
@@ -305,5 +282,3 @@ ListSettingsView.propTypes = {
   }).isRequired,
   slug: PropTypes.string.isRequired,
 };
-
-export default ListSettingsView;

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

@@ -10,7 +10,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { MemoryRouter, Route } from 'react-router-dom';
 
 import ModelsContext from '../../../contexts/ModelsContext';
-import ListSettingsView from '../index';
+import { ListSettingsView } from '../index';
 
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
@@ -179,7 +179,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
     expect(testLocation.search).toEqual('?page=1&pageSize=10&sort=id:ASC&plugins[i18n][locale]=fr');
   });
 
-  it('should add field and let the user save', async () => {
+  it('should add field', async () => {
     const { getByRole, user } = render();
 
     await waitFor(() =>
@@ -191,28 +191,6 @@ describe('ADMIN | CM | LV | Configure the view', () => {
 
     expect(getByRole('button', { name: `Edit Cover` })).toBeInTheDocument();
     expect(getByRole('button', { name: `Delete Cover` })).toBeInTheDocument();
-
-    fireEvent.click(getByRole('button', { name: 'Save' }));
-
-    expect(getByRole('dialog', { name: 'Confirmation' })).toBeInTheDocument();
-
-    await user.click(getByRole('button', { name: 'Confirm' }));
-  });
-
-  it('should delete field', async () => {
-    const { getByRole, user } = render();
-
-    await waitFor(() =>
-      expect(getByRole('heading', { name: 'Configure the view - Michka' })).toBeInTheDocument()
-    );
-
-    await user.click(getByRole('button', { name: 'Delete id' }));
-
-    fireEvent.click(getByRole('button', { name: 'Save' }));
-
-    expect(getByRole('dialog', { name: 'Confirmation' })).toBeInTheDocument();
-
-    await user.click(getByRole('button', { name: 'Confirm' }));
   });
 
   describe('Edit modal', () => {