diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js index c985095fd8..d497d3c48e 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js @@ -105,7 +105,12 @@ const DraggableCard = ({ title, onRemoveField }) => { > - + diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js index b4c443e20b..18575d9865 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js @@ -344,9 +344,10 @@ const ListSettingsView = ({ layout, slug }) => { onChange={e => handleAddField(e)} value="" placeholder="Add a field" + data-testid="select-fields" > {listRemainingFields.map(field => ( - ))} diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/index.test.js index 785fdb55c0..d78b116deb 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/index.test.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/index.test.js @@ -43,10 +43,19 @@ const layout = { info: { label: 'michka', }, - uid: 'api::restaurant.restaurant', - settings: {}, - metadatas: {}, + metadatas: { + address: {}, + averagePrice: {}, + cover: {}, + id: {}, + since: {}, + }, + layouts: { + list: ['id', 'address'], + }, options: {}, + settings: {}, + uid: 'api::restaurant.restaurant', }; const makeApp = history => ( @@ -93,7 +102,8 @@ describe('ADMIN | CM | LV | Configure the view', () => { } .c62 { - padding: 24px; + padding-top: 24px; + padding-bottom: 24px; } .c21 { @@ -243,6 +253,23 @@ describe('ADMIN | CM | LV | Configure the view', () => { padding-bottom: 24px; } + .c65 { + padding-top: 16px; + padding-right: 16px; + padding-left: 16px; + border-radius: 4px; + border-style: dashed; + border-width: 1px; + border-color: #c0c0cf; + } + + .c72 { + background: #f6f6f9; + border-radius: 4px; + border-color: #eaeaef; + border: 1px solid #eaeaef; + } + .c30 { display: -webkit-box; display: -webkit-flex; @@ -264,6 +291,38 @@ describe('ADMIN | CM | LV | Configure the view', () => { flex-wrap: wrap; } + .c66 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c73 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + .c52 { position: absolute; left: 0; @@ -360,6 +419,25 @@ describe('ADMIN | CM | LV | Configure the view', () => { margin-top: 4px; } + .c83 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .c83 > * { + margin-top: 0; + margin-bottom: 0; + } + + .c83 > * + * { + margin-top: 0px; + } + .c51 { position: relative; border: 1px solid #dcdce4; @@ -414,6 +492,29 @@ describe('ADMIN | CM | LV | Configure the view', () => { width: 100%; } + .c69 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c70 > * { + margin-left: 0; + margin-right: 0; + } + + .c70 > * + * { + margin-left: 12px; + } + .c28 { font-weight: 500; font-size: 1rem; @@ -421,6 +522,18 @@ describe('ADMIN | CM | LV | Configure the view', () => { color: #32324d; } + .c79 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; + } + + .c80 { + font-weight: 600; + line-height: 1.14; + } + .c35 { font-weight: 500; font-size: 0.75rem; @@ -746,6 +859,89 @@ describe('ADMIN | CM | LV | Configure the view', () => { gap: 16px; } + .c76 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 32px; + } + + .c76:last-child { + padding: 0 12px; + } + + .c77 { + padding: 0 12px; + border-right: 1px solid #eaeaef; + cursor: all-scroll; + } + + .c77 svg { + width: 0.75rem; + height: 0.75rem; + } + + .c74 { + min-width: 12.5rem; + cursor: pointer; + } + + .c74 svg { + width: 0.625rem; + height: 0.625rem; + } + + .c74 svg path { + fill: #666687; + } + + .c74:hover { + background-color: #f0f0ff; + border-color: #d9d8ff; + } + + .c74:hover svg path { + fill: #4945ff; + } + + .c74:hover .c78 { + color: #4945ff; + } + + .c74:hover .c75 { + border-right: 1px solid #d9d8ff; + } + + .c71:last-child { + padding-right: 12px; + } + + .c67 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + } + + .c81 { + -webkit-flex: auto; + -ms-flex: auto; + flex: auto; + } + + .c68 { + overflow-x: scroll; + overflow-y: hidden; + } + + .c82 { + max-width: 12.5rem; + } + @media (max-width:68.75rem) { .c47 { grid-column: span 12; @@ -1316,6 +1512,300 @@ describe('ADMIN | CM | LV | Configure the view', () => { class="c63 c64" /> +
+

+ View +

+
+
+
+
+
+
+
+ + + id + +
+
+ + +
+
+
+
+
+
+ + + address + +
+
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + @@ -1342,4 +1832,35 @@ describe('ADMIN | CM | LV | Configure the view', () => { '?page=1&sort=undefined:undefined&plugins[i18n][locale]=fr' ); }); + + it('should show remaining fields in select fields', async () => { + const history = createMemoryHistory(); + history.push('/content-manager'); + + render(makeApp(history), { container: document.body }); + + await waitFor(() => { + expect(screen.getByText('Configure the view - Michka')).toBeInTheDocument(); + }); + + fireEvent.click(screen.getByTestId('select-fields')); + // TO DO + // await waitFor(() => expect(screen.getByText('cover')).toBeInTheDocument()); + }); + + it('should delete field', async () => { + const history = createMemoryHistory(); + history.push('/content-manager'); + + const { queryByTestId } = render(makeApp(history)); + await waitFor(() => { + expect(screen.getByText('Configure the view - Michka')).toBeInTheDocument(); + }); + + expect(queryByTestId('delete-id')).toBeInTheDocument(); + + fireEvent.click(screen.getByTestId('delete-id')); + + expect(queryByTestId('delete-id')).not.toBeInTheDocument(); + }); }); diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/reducer.test.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/reducer.test.js index 2940c17530..bd5c45a5a6 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/reducer.test.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/reducer.test.js @@ -22,12 +22,12 @@ describe('CONTENT MANAGER | CONTAINERS | ListSettingsView | reducer', () => { describe('ADD_FIELD', () => { it('should add a field to the layout correctly', () => { const expected = { + ...state, modifiedData: { layouts: { list: ['title'], }, }, - ...state, }; const action = { type: 'ADD_FIELD', item: 'title' };