diff --git a/packages/core/admin/admin/src/pages/Roles/ListPage/tests/index.test.js b/packages/core/admin/admin/src/pages/Roles/ListPage/tests/index.test.js index b7e3e88e12..a57ef79dc9 100644 --- a/packages/core/admin/admin/src/pages/Roles/ListPage/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/Roles/ListPage/tests/index.test.js @@ -54,10 +54,6 @@ describe('', () => { } = render(App); expect(firstChild).toMatchInlineSnapshot(` - .c37 { - font-family: Lato; - } - .c5 { font-weight: 600; font-size: 2rem; @@ -404,6 +400,10 @@ describe('', () => { border: none; } + .c37 { + font-family: Lato; + } +
{ const { container, getByText } = render(app); expect(container.firstChild).toMatchInlineSnapshot(` - .c24 { - font-weight: 500; - font-size: 1rem; - line-height: 1.25; - color: #666687; - } - - .c19 { - background: #ffffff; - padding: 64px; - } - - .c21 { - padding-bottom: 24px; - } - - .c23 { - padding-bottom: 16px; - } - - .c20 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - } - - .c22 svg { - height: 5.5rem; - } - - .c16 tr:last-of-type { - border-bottom: none; - } - - .c17 { - border-bottom: 1px solid #eaeaef; - } - - .c17 td, - .c17 th { - padding: 16px; - } - - .c17 td:first-of-type, - .c17 th:first-of-type { - padding: 0 4px; - } - - .c18 { - vertical-align: middle; - text-align: left; - color: #666687; - outline-offset: -4px; - } - - .c18 input { - vertical-align: sub; - } - .c12 { font-weight: 400; font-size: 0.875rem; @@ -316,6 +248,74 @@ describe('DynamicTable', () => { height: 0.25rem; } + .c24 { + font-weight: 500; + font-size: 1rem; + line-height: 1.25; + color: #666687; + } + + .c19 { + background: #ffffff; + padding: 64px; + } + + .c21 { + padding-bottom: 24px; + } + + .c23 { + padding-bottom: 16px; + } + + .c20 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + } + + .c22 svg { + height: 5.5rem; + } + + .c16 tr:last-of-type { + border-bottom: none; + } + + .c17 { + border-bottom: 1px solid #eaeaef; + } + + .c17 td, + .c17 th { + padding: 16px; + } + + .c17 td:first-of-type, + .c17 th:first-of-type { + padding: 0 4px; + } + + .c18 { + vertical-align: middle; + text-align: left; + color: #666687; + outline-offset: -4px; + } + + .c18 input { + vertical-align: sub; + } +
diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPicker/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPicker/index.js index 304f0ab664..dddceff68d 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPicker/index.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/FilterPicker/index.js @@ -57,7 +57,7 @@ const FilterPicker = ({ displayedFilters, isVisible, onToggle, source }) => { const appliedFilter = displayedFilters.find(filter => filter.name === modifiedData.name); return ( - +
diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/Filters/index.js b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/index.js index 190121f6be..0446723a82 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/Filters/index.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/Filters/index.js @@ -1,5 +1,6 @@ import React, { useRef, useState } from 'react'; import PropTypes from 'prop-types'; +import { useIntl } from 'react-intl'; import { Button, Box } from '@strapi/parts'; import { FilterIcon } from '@strapi/icons'; import FilterList from './FilterList'; @@ -7,6 +8,7 @@ import FilterPicker from './FilterPicker'; const Filters = ({ displayedFilters }) => { const [isVisible, setIsVisible] = useState(false); + const { formatMessage } = useIntl(); const buttonRef = useRef(); const handleToggle = () => { @@ -23,14 +25,16 @@ const Filters = ({ displayedFilters }) => { onClick={handleToggle} size="S" > - Filters + {formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })} - + {isVisible && ( + + )} diff --git a/packages/core/admin/admin/src/pages/Users/ListPage/tests/index.test.js b/packages/core/admin/admin/src/pages/Users/ListPage/tests/index.test.js index 22ff08826c..a5d349af86 100644 --- a/packages/core/admin/admin/src/pages/Users/ListPage/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/Users/ListPage/tests/index.test.js @@ -64,46 +64,6 @@ describe('ADMIN | Pages | USERS | ListPage', () => { const { container } = render(app); expect(container.firstChild).toMatchInlineSnapshot(` - .c13 { - padding-right: 56px; - padding-left: 56px; - } - - .c15 { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - - .c16 { - -webkit-animation: gzYjWD 1s infinite linear; - animation: gzYjWD 1s infinite linear; - } - - .c14 { - 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: space-around; - -webkit-justify-content: space-around; - -ms-flex-pack: space-around; - justify-content: space-around; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - .c5 { font-weight: 600; font-size: 2rem; @@ -125,11 +85,37 @@ describe('ADMIN | Pages | USERS | ListPage', () => { color: #666687; } + .c30 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; + } + + .c51 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #8e8ea9; + } + .c12 { font-size: 1rem; line-height: 1.5; } + .c31 { + font-weight: 600; + line-height: 1.14; + } + + .c32 { + font-weight: 600; + font-size: 0.6875rem; + line-height: 1.45; + text-transform: uppercase; + } + .c2 { background: #f6f6f9; padding-top: 56px; @@ -142,6 +128,45 @@ describe('ADMIN | Pages | USERS | ListPage', () => { padding-right: 8px; } + .c14 { + padding-bottom: 16px; + } + + .c17 { + padding: 4px; + } + + .c19 { + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + } + + .c20 { + background: #ffffff; + } + + .c22 { + padding-right: 24px; + padding-left: 24px; + } + + .c40 { + background: #ffffff; + padding: 64px; + } + + .c42 { + padding-top: 24px; + } + + .c47 { + padding-right: 16px; + padding-left: 16px; + } + + .c48 { + padding-left: 12px; + } + .c3 { display: -webkit-box; display: -webkit-flex; @@ -174,6 +199,24 @@ describe('ADMIN | Pages | USERS | ListPage', () => { align-items: center; } + .c39 { + 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: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + .c6 { display: -webkit-box; display: -webkit-flex; @@ -200,6 +243,85 @@ describe('ADMIN | Pages | USERS | ListPage', () => { pointer-events: none; } + .c28 { + margin: 0; + height: 18px; + min-width: 18px; + border-radius: 4px; + border: 1px solid #c0c0cf; + -webkit-appearance: none; + background-color: #ffffff; + } + + .c28:checked { + background-color: #4945ff; + border: 1px solid #4945ff; + } + + .c28:checked:after { + content: ''; + display: block; + position: relative; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center; + width: 10px; + height: 10px; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + } + + .c28:checked:disabled:after { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center; + } + + .c28:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; + } + + .c28:indeterminate { + background-color: #4945ff; + border: 1px solid #4945ff; + } + + .c28:indeterminate:after { + content: ''; + display: block; + position: relative; + color: white; + height: 2px; + width: 10px; + background-color: #ffffff; + left: 50%; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + } + + .c28:indeterminate:disabled { + background-color: #dcdce4; + border: 1px solid #c0c0cf; + } + + .c28:indeterminate:disabled:after { + background-color: #8e8ea9; + } + + .c35 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + .c7 { padding: 8px 16px; background: #4945ff; @@ -261,10 +383,418 @@ describe('ADMIN | Pages | USERS | ListPage', () => { background: #4945ff; } + .c18 { + padding: 8px 16px; + background: #4945ff; + border: none; + border: 1px solid #dcdce4; + background: #ffffff; + } + + .c18 .c1 { + 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; + } + + .c18 .c9 { + color: #ffffff; + } + + .c18[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; + } + + .c18[aria-disabled='true'] .c9 { + color: #666687; + } + + .c18[aria-disabled='true'] svg > g, + .c18[aria-disabled='true'] svg path { + fill: #666687; + } + + .c18[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; + } + + .c18[aria-disabled='true']:active .c9 { + color: #666687; + } + + .c18[aria-disabled='true']:active svg > g, + .c18[aria-disabled='true']:active svg path { + fill: #666687; + } + + .c18:hover { + background-color: #f6f6f9; + } + + .c18:active { + background-color: #eaeaef; + } + + .c18 .c9 { + color: #32324d; + } + + .c18 svg > g, + .c18 svg path { + fill: #32324d; + } + + .c43 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .c43 > * { + margin-top: 0; + margin-bottom: 0; + } + + .c43 > * + * { + margin-top: 0px; + } + + .c33 { + border: none; + } + + .c33 svg > g, + .c33 svg path { + fill: #8e8ea9; + } + + .c33:hover svg > g, + .c33:hover svg path { + fill: #666687; + } + + .c33:active svg > g, + .c33:active svg path { + fill: #a5a5ba; + } + + .c33[aria-disabled='true'] { + background-color: #eaeaef; + } + + .c33[aria-disabled='true'] svg path { + fill: #666687; + } + + .c41 { + -webkit-animation: gzYjWD 1s infinite linear; + animation: gzYjWD 1s infinite linear; + } + .c0 { outline: none; } + .c53 > * + * { + margin-left: 4px; + } + + .c58 { + line-height: revert; + } + + .c54 { + padding: 12px; + border-radius: 4px; + -webkit-text-decoration: none; + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + } + + .c56 { + padding: 12px; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + -webkit-text-decoration: none; + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + } + + .c57 { + color: #271fe0; + background: #ffffff; + } + + .c57:hover { + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + } + + .c55 { + font-size: 0.7rem; + pointer-events: none; + } + + .c55 svg path { + fill: #c0c0cf; + } + + .c55:focus svg path, + .c55:hover svg path { + fill: #c0c0cf; + } + + .c59 { + font-size: 0.7rem; + } + + .c59 svg path { + fill: #666687; + } + + .c59:focus svg path, + .c59:hover svg path { + fill: #4a4a6a; + } + + .c45 { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + width: 100%; + background: transparent; + border: none; + } + + .c45:focus { + outline: none; + } + + .c44 { + position: relative; + border: 1px solid #dcdce4; + padding-right: 12px; + border-radius: 4px; + background: #ffffff; + overflow: hidden; + } + + .c44:focus-within { + border: 1px solid #4945ff; + } + + .c49 { + background: transparent; + border: none; + position: relative; + z-index: 1; + } + + .c49 svg { + height: 0.6875rem; + width: 0.6875rem; + } + + .c49 svg path { + fill: #666687; + } + + .c50 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: none; + border: none; + } + + .c50 svg { + width: 0.375rem; + } + + .c46 { + min-height: 2.5rem; + } + + .c24 { + width: 100%; + white-space: nowrap; + } + + .c21 { + position: relative; + border-radius: 4px 4px 0 0; + } + + .c21:before { + background: linear-gradient(90deg,#000000 0%,rgba(0,0,0,0) 100%); + opacity: 0.2; + position: absolute; + height: 100%; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + width: 8px; + left: 0; + } + + .c21:after { + background: linear-gradient(270deg,#000000 0%,rgba(0,0,0,0) 100%); + opacity: 0.2; + position: absolute; + height: 100%; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + width: 8px; + right: 0; + top: 0; + } + + .c23 { + overflow-x: auto; + } + + .c25 { + border-bottom: 1px solid #eaeaef; + } + + .c26 { + border-bottom: 1px solid #eaeaef; + } + + .c26 td, + .c26 th { + padding: 16px; + } + + .c26 td:first-of-type, + .c26 th:first-of-type { + padding: 0 4px; + } + + .c27 { + vertical-align: middle; + text-align: left; + color: #666687; + outline-offset: -4px; + } + + .c27 input { + vertical-align: sub; + } + + .c29 svg { + height: 0.25rem; + } + + .c13 { + padding-right: 56px; + padding-left: 56px; + } + + .c36 tr:last-of-type { + border-bottom: none; + } + + .c37 { + border-bottom: 1px solid #eaeaef; + } + + .c37 td, + .c37 th { + padding: 16px; + } + + .c37 td:first-of-type, + .c37 th:first-of-type { + padding: 0 4px; + } + + .c38 { + vertical-align: middle; + text-align: left; + color: #666687; + outline-offset: -4px; + } + + .c38 input { + vertical-align: sub; + } + + .c34 { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + + .c15 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + } + + .c15 svg { + height: 12px; + width: 12px; + } + + .c15 svg > g, + .c15 svg path { + fill: #ffffff; + } + + .c15[aria-disabled='true'] { + pointer-events: none; + } + + .c16 svg > g, + .c16 svg path { + fill: #8e8ea9; + } + + .c16:hover svg > g, + .c16:hover svg path { + fill: #666687; + } + + .c16:active svg > g, + .c16:active svg path { + fill: #a5a5ba; + } + + .c16[aria-disabled='true'] { + background-color: #eaeaef; + } + + .c16[aria-disabled='true'] svg path { + fill: #666687; + } + + .c52 { + margin-left: 5px; + } +
{ class="c13" >
+
+
+
- Loading content. + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+
+ + + Firstname + + + + + + + +
+
+
+ + + + +
+
+
+ + + + +
+
+
+ + + Roles + + + +
+
+
+ + + + +
+
+
+ + + Active User + + + +
+
+
+
+ Actions +
+ +
+
+
+
+
+
+ +
+
+
+
- +
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+