[ML] Pagination v4 (#11233)

2026-01-03 02:32:56 +00:00 · 2021-10-11 13:53:01 +02:00 · 2021-10-11 13:53:01 +02:00 · 975442b4d9
commit 975442b4d9
parent aa63770246
10 changed files with 59 additions and 487 deletions
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/index.test.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/index.test.js
@ -219,7 +219,7 @@ describe('<EditAssetDialog />', () => {
        background: #ffffff;
      }

-      .c43 .sc-hTZspN {
+      .c43 .sc-lhuRmv {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
@ -291,7 +291,7 @@ describe('<EditAssetDialog />', () => {
        background: #f0f0ff;
      }

-      .c46 .sc-hTZspN {
+      .c46 .sc-lhuRmv {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
@ -373,7 +373,7 @@ describe('<EditAssetDialog />', () => {
        background: #4945ff;
      }

-      .c47 .sc-hTZspN {
+      .c47 .sc-lhuRmv {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
--- a/packages/core/upload/admin/src/hooks/useAssets.js
+++ b/packages/core/upload/admin/src/hooks/useAssets.js
@ -18,7 +18,7 @@ export const useAssets = ({ skipWhen }) => {
    return data;
  };

-  const { data, error, isLoading } = useQuery(`assets`, getAssets, {
+  const { data, error, isLoading } = useQuery([`assets`, rawQuery], getAssets, {
    enabled: !skipWhen,
    staleTime: 0,
    cacheTime: 0,
--- a/packages/core/upload/admin/src/hooks/useEditAsset.js
+++ b/packages/core/upload/admin/src/hooks/useEditAsset.js
@ -45,10 +45,8 @@ export const useEditAsset = () => {
  const mutation = useMutation(
    ({ asset, file }) => editAssetRequest(asset, file, tokenRef.current, setProgress),
    {
-      onSuccess: assetUpdated => {
-        queryClient.setQueryData('assets', cachedAssets =>
-          cachedAssets.map(asset => (asset.id === assetUpdated.id ? { ...assetUpdated } : asset))
-        );
+      onSuccess: () => {
+        queryClient.refetchQueries(['assets'], { active: true });
      },
      onError: error => {
        toggleNotification({ type: 'warning', message: error.message });
--- a/packages/core/upload/admin/src/hooks/useRemoveAsset.js
+++ b/packages/core/upload/admin/src/hooks/useRemoveAsset.js
@ -17,11 +17,9 @@ export const useRemoveAsset = onSuccess => {
  const queryClient = useQueryClient();

  const mutation = useMutation(assetId => removeAssetRequest(assetId), {
-    onSuccess: ({ data }) => {
+    onSuccess: () => {
      // Coupled with the cache of useAssets
-      queryClient.setQueryData('assets', (cachedAssets = []) =>
-        cachedAssets.filter(asset => asset.id !== data.id)
-      );
+      queryClient.refetchQueries(['assets'], { active: true });

      toggleNotification({
        type: 'success',
--- a/packages/core/upload/admin/src/hooks/useUpload.js
+++ b/packages/core/upload/admin/src/hooks/useUpload.js
@ -32,9 +32,8 @@ export const useUpload = () => {
  const tokenRef = useRef(axios.CancelToken.source());

  const mutation = useMutation(asset => uploadAsset(asset, tokenRef.current, setProgress), {
-    onSuccess: assets => {
-      // Coupled with the cache of useAssets
-      queryClient.setQueryData('assets', cachedAssets => cachedAssets.concat(assets));
+    onSuccess: () => {
+      queryClient.refetchQueries(['assets'], { active: true });
    },
  });

--- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js
+++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js
@ -24,6 +24,7 @@ import { useAssets } from '../../hooks/useAssets';
 import { getTrad } from '../../utils';
 import pluginPermissions from '../../permissions';
 import { Filters } from './components/Filters';
+import { PaginationFooter } from '../../components/PaginationFooter';

 const BoxWithHeight = styled(Box)`
  height: ${32 / 16}rem;
@ -51,6 +52,8 @@ export const MediaLibrary = () => {
    return <Redirect to="/" />;
  }

+  const assets = data?.results;
+
  return (
    <Layout>
      <Main aria-busy={loading}>
@ -62,13 +65,13 @@ export const MediaLibrary = () => {
          subtitle={formatMessage(
            {
              id: getTrad(
-                data?.length > 0
+                assets?.length > 0
                  ? 'header.content.assets-multiple'
                  : 'header.content.assets.assets-single'
              ),
              defaultMessage: '0 assets',
            },
-            { number: data?.length || 0 }
+            { number: assets?.length || 0 }
          )}
          primaryAction={
            <Button startIcon={<AddIcon />} onClick={toggleUploadAssetDialog}>
@ -114,7 +117,7 @@ export const MediaLibrary = () => {
          {loading && <LoadingIndicatorPage />}
          {error && <AnErrorOccurred />}
          {!canRead && <NoPermissions />}
-          {canRead && data && data.length === 0 && (
+          {canRead && assets && assets.length === 0 && (
            <NoMedia
              action={
                <Button
@ -134,8 +137,11 @@ export const MediaLibrary = () => {
              })}
            />
          )}
-          {canRead && data && data.length > 0 && (
-            <ListView assets={data} onEditAsset={setAssetToEdit} />
+          {canRead && assets && assets.length > 0 && (
+            <>
+              <ListView assets={assets} onEditAsset={setAssetToEdit} />
+              {data?.pagination && <PaginationFooter pagination={data.pagination} />}
+            </>
          )}
        </ContentLayout>
      </Main>
--- a/packages/core/upload/admin/src/pages/App/components/ListView.js
+++ b/packages/core/upload/admin/src/pages/App/components/ListView.js
@ -7,58 +7,51 @@ import { ImageAssetCard } from '../../../components/AssetCard/ImageAssetCard';
 import { VideoAssetCard } from '../../../components/AssetCard/VideoAssetCard';
 import { DocAssetCard } from '../../../components/AssetCard/DocAssetCard';
 import { AssetType } from '../../../constants';
-import { PaginationFooter } from '../../../components/PaginationFooter';

 export const ListView = ({ assets, onEditAsset }) => {
  return (
-    <>
-      <KeyboardNavigable tagName="article">
-        <GridLayout>
-          {assets.map(asset => {
-            if (asset.mime.includes(AssetType.Video)) {
-              return (
-                <VideoAssetCard
-                  id={asset.id}
-                  key={asset.id}
-                  name={asset.name}
-                  extension={getFileExtension(asset.ext)}
-                  url={prefixFileUrlWithBackendUrl(asset.url)}
-                  mime={asset.mime}
-                />
-              );
-            }
-
-            if (asset.mime.includes(AssetType.Image)) {
-              return (
-                <ImageAssetCard
-                  id={asset.id}
-                  key={asset.id}
-                  name={asset.name}
-                  extension={getFileExtension(asset.ext)}
-                  height={asset.height}
-                  width={asset.width}
-                  thumbnail={prefixFileUrlWithBackendUrl(
-                    asset?.formats?.thumbnail?.url || asset.url
-                  )}
-                  onEdit={() => onEditAsset(asset)}
-                />
-              );
-            }
-
+    <KeyboardNavigable tagName="article">
+      <GridLayout>
+        {assets.map(asset => {
+          if (asset.mime.includes(AssetType.Video)) {
            return (
-              <DocAssetCard
+              <VideoAssetCard
                id={asset.id}
                key={asset.id}
                name={asset.name}
                extension={getFileExtension(asset.ext)}
+                url={prefixFileUrlWithBackendUrl(asset.url)}
+                mime={asset.mime}
              />
            );
-          })}
-        </GridLayout>
-      </KeyboardNavigable>
+          }

-      <PaginationFooter />
-    </>
+          if (asset.mime.includes(AssetType.Image)) {
+            return (
+              <ImageAssetCard
+                id={asset.id}
+                key={asset.id}
+                name={asset.name}
+                extension={getFileExtension(asset.ext)}
+                height={asset.height}
+                width={asset.width}
+                thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)}
+                onEdit={() => onEditAsset(asset)}
+              />
+            );
+          }
+
+          return (
+            <DocAssetCard
+              id={asset.id}
+              key={asset.id}
+              name={asset.name}
+              extension={getFileExtension(asset.ext)}
+            />
+          );
+        })}
+      </GridLayout>
+    </KeyboardNavigable>
  );
 };

--- a/packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js
+++ b/packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js
@ -131,28 +131,6 @@ describe('MediaLibrary / ListView', () => {

    expect(container).toMatchInlineSnapshot(`
      .c30 {
-        padding-top: 24px;
-      }
-
-      .c31 {
-        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: flex-end;
-        -webkit-box-align: flex-end;
-        -ms-flex-align: flex-end;
-        align-items: flex-end;
-      }
-
-      .c52 {
        border: 0;
        -webkit-clip: rect(0 0 0 0);
        clip: rect(0 0 0 0);
@ -170,10 +148,6 @@ describe('MediaLibrary / ListView', () => {
        grid-gap: 16px;
      }

-      .c44 {
-        padding-left: 8px;
-      }
-
      .c5 {
        display: -webkit-box;
        display: -webkit-flex;
@ -272,263 +246,6 @@ describe('MediaLibrary / ListView', () => {
        fill: #666687;
      }

-      .c46 {
-        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;
-      }
-
-      .c47 > * + * {
-        margin-left: 4px;
-      }
-
-      .c50 {
-        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;
-      }
-
-      .c48 {
-        padding: 12px;
-        border-radius: 4px;
-        -webkit-text-decoration: none;
-        text-decoration: none;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        position: relative;
-        outline: none;
-      }
-
-      .c48:after {
-        -webkit-transition-property: all;
-        transition-property: all;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -4px;
-        bottom: -4px;
-        left: -4px;
-        right: -4px;
-        border: 2px solid transparent;
-      }
-
-      .c48:focus-visible {
-        outline: none;
-      }
-
-      .c48:focus-visible:after {
-        border-radius: 8px;
-        content: '';
-        position: absolute;
-        top: -5px;
-        bottom: -5px;
-        left: -5px;
-        right: -5px;
-        border: 2px solid #4945ff;
-      }
-
-      .c49 {
-        font-size: 0.7rem;
-        pointer-events: none;
-      }
-
-      .c49 svg path {
-        fill: #c0c0cf;
-      }
-
-      .c49:focus svg path,
-      .c49:hover svg path {
-        fill: #c0c0cf;
-      }
-
-      .c51 {
-        font-size: 0.7rem;
-      }
-
-      .c51 svg path {
-        fill: #666687;
-      }
-
-      .c51:focus svg path,
-      .c51:hover svg path {
-        fill: #4a4a6a;
-      }
-
-      .c32 {
-        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;
-      }
-
-      .c36 {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 0;
-        width: 100%;
-        background: transparent;
-        border: none;
-      }
-
-      .c36:focus {
-        outline: none;
-      }
-
-      .c40 {
-        font-weight: 400;
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #32324d;
-      }
-
-      .c39 {
-        padding-right: 16px;
-        padding-left: 16px;
-      }
-
-      .c41 {
-        padding-left: 12px;
-      }
-
-      .c34 {
-        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;
-      }
-
-      .c37 {
-        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;
-      }
-
-      .c33 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c33 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c33 > * + * {
-        margin-top: 0px;
-      }
-
-      .c35 {
-        position: relative;
-        border: 1px solid #dcdce4;
-        padding-right: 12px;
-        border-radius: 4px;
-        background: #ffffff;
-        overflow: hidden;
-        min-height: 2rem;
-        outline: none;
-        box-shadow: 0;
-        -webkit-transition-property: border-color,box-shadow,fill;
-        transition-property: border-color,box-shadow,fill;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-      }
-
-      .c35:focus-within {
-        border: 1px solid #4945ff;
-        box-shadow: #4945ff 0px 0px 0px 2px;
-      }
-
-      .c42 {
-        background: transparent;
-        border: none;
-        position: relative;
-        z-index: 1;
-      }
-
-      .c42 svg {
-        height: 0.6875rem;
-        width: 0.6875rem;
-      }
-
-      .c42 svg path {
-        fill: #666687;
-      }
-
-      .c43 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        background: none;
-        border: none;
-      }
-
-      .c43 svg {
-        width: 0.375rem;
-      }
-
-      .c38 {
-        width: 100%;
-      }
-
-      .c45 {
-        font-weight: 400;
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #666687;
-      }
-
      .c1 {
        background: #ffffff;
        border-radius: 4px;
@ -974,148 +691,6 @@ describe('MediaLibrary / ListView', () => {
        </div>
        <div
          class="c30"
-        >
-          <div
-            class="c31"
-          >
-            <div
-              class="c32"
-            >
-              <div>
-                <div
-                  class="c33"
-                >
-                  <div
-                    class="c34 c35"
-                  >
-                    <button
-                      aria-disabled="false"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-labelledby="select-1-label select-1-content"
-                      class="c36"
-                      id="select-1"
-                      type="button"
-                    />
-                    <div
-                      class="c37 c38"
-                    >
-                      <div
-                        class="c34"
-                      >
-                        <div
-                          class="c39"
-                        >
-                          <span
-                            class="c40"
-                            id="select-1-content"
-                          >
-                            10
-                          </span>
-                        </div>
-                      </div>
-                      <div
-                        class="c34"
-                      >
-                        <button
-                          aria-hidden="true"
-                          class="c41 c42 c43"
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            fill="none"
-                            height="1em"
-                            viewBox="0 0 14 8"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
-                              fill="#32324D"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="c44"
-              >
-                <label
-                  class="c45"
-                  for="page-size"
-                />
-              </div>
-            </div>
-            <nav
-              aria-label="pagination"
-              class="sc-dOFSHK"
-            >
-              <ul
-                class="c46 c47"
-              >
-                <li>
-                  <a
-                    aria-current="page"
-                    aria-disabled="true"
-                    class="c48 c49 active"
-                    href="/"
-                    tabindex="-1"
-                  >
-                    <div
-                      class="c50"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 10 16"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9.88 14.12L3.773 8 9.88 1.88 8 0 0 8l8 8 1.88-1.88z"
-                        fill="#32324D"
-                      />
-                    </svg>
-                  </a>
-                </li>
-                <li>
-                  <a
-                    aria-current="page"
-                    aria-disabled="false"
-                    class="c48 c51 active"
-                    href="/?page=1"
-                  >
-                    <div
-                      class="c50"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 10 16"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M0 1.88L6.107 8 0 14.12 1.88 16l8-8-8-8L0 1.88z"
-                        fill="#32324D"
-                      />
-                    </svg>
-                  </a>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </div>
-        <div
-          class="c52"
        >
          <p
            aria-live="polite"
--- a/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
+++ b/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
@ -15,6 +15,7 @@ jest.mock('@strapi/helper-plugin', () => ({
  ...jest.requireActual('@strapi/helper-plugin'),
  useRBAC: jest.fn(),
  useNotification: jest.fn(() => jest.fn()),
+  useQueryParams: () => [{ rawQuery: 'some-url' }, jest.fn()],
 }));

 jest.mock('../../../utils', () => ({
--- a/packages/core/upload/admin/src/pages/App/tests/server.js
+++ b/packages/core/upload/admin/src/pages/App/tests/server.js
@ -3,7 +3,9 @@ import { rest } from 'msw';

 const server = setupServer(
  rest.get('*/upload/files*', (req, res, ctx) => {
-    return res(ctx.json([]));
+    return res(
+      ctx.json({ results: [], pagination: { page: '1', pageSize: '10', pageCount: '1' } })
+    );
  })
 );