yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 08:19:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(upload): feedback

Browse Source 
feat(helper-plugin): persist upload localstroage
This commit is contained in:
Jamie Howard 2022-11-22 13:58:28 +00:00
parent 530cb8b701
commit 69b4b637f1
7 changed files with 75 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/helper-plugin/lib/src/utils/auth/index.js
View File

@ -1,5 +1,6 @@
// TODO @soupette we need to refactor this file
import { isNil } from 'lodash';
import isEmpty from 'lodash/isEmpty';
const TOKEN_KEY = 'jwtToken';
@ -8,6 +9,8 @@ const CURRENT_STEP = 'GUIDED_TOUR_CURRENT_STEP';
const COMPLETED_STEPS = 'GUIDED_TOUR_COMPLETED_STEPS';
const SKIPPED = 'GUIDED_TOUR_SKIPPED';
const THEME_KEY = 'STRAPI_THEME'; // Also used in packages/core/admin/admin/src/components/ThemeToggleProvider/index.js
const UPLOAD_MODAL_VIEW = 'STRAPI_UPLOAD_MODAL_VIEW';
const UPLOAD_VIEW = 'STRAPI_UPLOAD_LIBRARY_VIEW';
const parse = JSON.parse;
const stringify = JSON.stringify;
@ -35,6 +38,8 @@ const auth = {
const guidedTourState = auth.get(COMPLETED_STEPS);
const guidedTourSkipped = parse(localStorage.getItem(SKIPPED));
const applicationTheme = localStorage.getItem(THEME_KEY);
const uploadMediaLibraryView = localStorage.getItem(UPLOAD_VIEW);
const uploadMediaLibraryModalView = localStorage.getItem(UPLOAD_MODAL_VIEW);
localStorage.clear();
@ -46,6 +51,9 @@ const auth = {
localStorage.setItem(COMPLETED_STEPS, stringify(guidedTourState));
localStorage.setItem(SKIPPED, stringify(guidedTourSkipped));
localStorage.setItem(THEME_KEY, applicationTheme);
!isNil(uploadMediaLibraryView) && localStorage.setItem(UPLOAD_VIEW, uploadMediaLibraryView);
!isNil(uploadMediaLibraryModalView) &&
localStorage.setItem(UPLOAD_MODAL_VIEW, uploadMediaLibraryModalView);
}
if (sessionStorage) {

17
packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { toUpper } from 'lodash';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
@ -19,7 +18,12 @@ import PlusIcon from '@strapi/icons/Plus';
import Grid from '@strapi/icons/Grid';
import List from '@strapi/icons/List';
import { FolderDefinition, AssetDefinition, viewOptions } from '../../../constants';
import {
FolderDefinition,
AssetDefinition,
viewOptions,
localStorageKeys,
} from '../../../constants';
import getTrad from '../../../utils/getTrad';
import { getBreadcrumbDataCM } from '../../../utils';
import getAllowedFiles from '../../../utils/getAllowedFiles';
@ -34,7 +38,6 @@ import { Filters } from './Filters';
import PaginationFooter from './PaginationFooter';
import PageSize from './PageSize';
import SearchAsset from './SearchAsset';
import pluginId from '../../../pluginId';
const StartBlockActions = styled(Flex)`
& > * + * {
@ -54,7 +57,7 @@ const TypographyMaxWidth = styled(Typography)`
const ActionContainer = styled(Box)`
svg {
path {
fill: ${({ theme }) => theme.colors.neutral900};
fill: ${({ theme }) => theme.colors.neutral500};
}
}
`;
@ -82,10 +85,7 @@ export const BrowseStep = ({
selectedAssets,
}) => {
const { formatMessage } = useIntl();
const [view, setView] = usePersistentState(
`STRAPI_${toUpper(pluginId)}_MODAL_VIEW`,
viewOptions.GRID
);
const [view, setView] = usePersistentState(localStorageKeys.modalView, viewOptions.GRID);
const isGridView = view === viewOptions.GRID;
const { data: currentFolder, isLoading: isCurrentFolderLoading } = useFolder(
@ -156,7 +156,6 @@ export const BrowseStep = ({
<EndBlockActions pullRight>
<ActionContainer paddingTop={1} paddingBottom={1}>
<IconButton
data-testid={`switch-to-${isGridView ? 'list' : 'grid'}-view`}
icon={isGridView ? <List /> : <Grid />}
label={
isGridView

3
packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
View File

@ -803,7 +803,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
}
.c16 svg path {
fill: #212134;
fill: #8e8ea9;
}
@media (max-width:68.75rem) {
@ -915,7 +915,6 @@ exports[`BrowseStep renders and match snapshot 1`] = `
aria-disabled="false"
aria-labelledby="tooltip-2"
class="c4 c17"
data-testid="switch-to-list-view"
tabindex="0"
type="button"
>

34
packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
View File

@ -214,18 +214,34 @@ describe('BrowseStep', () => {
expect(screen.getByText('Assets (1)')).toBeInTheDocument();
});
it('displays the appropriate switch to change the view', () => {
describe('displays the appropriate switch to change the view', () => {
const setView = jest.fn();
usePersistentState.mockReturnValueOnce([viewOptions.GRID, setView]);
setup();
it('Start with Grid View', () => {
usePersistentState.mockReturnValueOnce([viewOptions.GRID, setView]);
const { queryByRole } = setup();
const listSwitch = screen.queryByTestId('switch-to-list-view');
const gridSwitch = screen.queryByTestId('switch-to-grid-view');
const listSwitch = queryByRole('button', { name: 'List View' });
const gridSwitch = queryByRole('button', { name: 'Grid View' });
expect(listSwitch).toBeInTheDocument();
expect(gridSwitch).not.toBeInTheDocument();
expect(listSwitch).toBeInTheDocument();
expect(gridSwitch).not.toBeInTheDocument();
fireEvent.click(listSwitch);
expect(setView).toHaveBeenCalledWith(viewOptions.LIST);
fireEvent.click(listSwitch);
expect(setView).toHaveBeenCalledWith(viewOptions.LIST);
});
it('Start with List View', () => {
usePersistentState.mockReturnValueOnce([viewOptions.LIST, setView]);
const { queryByRole } = setup();
const listSwitch = queryByRole('button', { name: 'List View' });
const gridSwitch = queryByRole('button', { name: 'Grid View' });
expect(gridSwitch).toBeInTheDocument();
expect(listSwitch).not.toBeInTheDocument();
fireEvent.click(gridSwitch);
expect(setView).toHaveBeenCalledWith(viewOptions.GRID);
});
});
});

5
packages/core/upload/admin/src/constants.js
View File

@ -168,3 +168,8 @@ export const sortOptions = [
{ key: 'sort.updated_at_desc', value: 'updatedAt:DESC' },
{ key: 'sort.updated_at_asc', value: 'updatedAt:ASC' },
];
export const localStorageKeys = {
modalView: `STRAPI_UPLOAD_MODAL_VIEW`,
view: `STRAPI_UPLOAD_LIBRARY_VIEW`,
};

12
packages/core/upload/admin/src/pages/App/MediaLibrary.js
View File

@ -2,7 +2,6 @@ import React, { useState, useRef } from 'react'; // useState
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { useHistory, useLocation } from 'react-router-dom';
import { toUpper } from 'lodash';
import {
LoadingIndicatorPage,
@ -51,8 +50,7 @@ import {
import { Filters } from './components/Filters';
import { Header } from './components/Header';
import { EmptyOrNoPermissions } from './components/EmptyOrNoPermissions';
import { viewOptions } from '../../constants';
import pluginId from '../../pluginId';
import { localStorageKeys, viewOptions } from '../../constants';
const BoxWithHeight = styled(Box)`
height: ${32 / 16}rem;
@ -67,7 +65,7 @@ const TypographyMaxWidth = styled(Typography)`
const ActionContainer = styled(Box)`
svg {
path {
fill: ${({ theme }) => theme.colors.neutral900};
fill: ${({ theme }) => theme.colors.neutral500};
}
}
`;
@ -87,10 +85,7 @@ export const MediaLibrary = () => {
const { trackUsage } = useTracking();
const [{ query }, setQuery] = useQueryParams();
const isFiltering = Boolean(query._q || query.filters);
const [view, setView] = usePersistentState(
`STRAPI_${toUpper(pluginId)}_LIBRARY_VIEW`,
viewOptions.GRID
);
const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);
const isGridView = view === viewOptions.GRID;
const {
@ -229,7 +224,6 @@ export const MediaLibrary = () => {
<>
<ActionContainer paddingTop={1} paddingBottom={1}>
<IconButton
data-testid={`switch-to-${isGridView ? 'list' : 'grid'}-view`}
icon={isGridView ? <List /> : <Grid />}
label={
isGridView

34
packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
View File

@ -501,19 +501,35 @@ describe('Media library homepage', () => {
expect(screen.queryByText('header.actions.add-assets')).not.toBeInTheDocument();
});
it('displays the appropriate switch to change the view', () => {
describe('displays the appropriate switch to change the view', () => {
const setView = jest.fn();
usePersistentState.mockReturnValueOnce([viewOptions.GRID, setView]);
renderML();
it('Start with Grid View', () => {
usePersistentState.mockReturnValueOnce([viewOptions.GRID, setView]);
const { queryByRole } = renderML();
const listSwitch = screen.queryByTestId('switch-to-list-view');
const gridSwitch = screen.queryByTestId('switch-to-grid-view');
const listSwitch = queryByRole('button', { name: 'List View' });
const gridSwitch = queryByRole('button', { name: 'Grid View' });
expect(listSwitch).toBeInTheDocument();
expect(gridSwitch).not.toBeInTheDocument();
expect(listSwitch).toBeInTheDocument();
expect(gridSwitch).not.toBeInTheDocument();
fireEvent.click(listSwitch);
expect(setView).toHaveBeenCalledWith(viewOptions.LIST);
fireEvent.click(listSwitch);
expect(setView).toHaveBeenCalledWith(viewOptions.LIST);
});
it('Start with List View', () => {
usePersistentState.mockReturnValueOnce([viewOptions.LIST, setView]);
const { queryByRole } = renderML();
const listSwitch = queryByRole('button', { name: 'List View' });
const gridSwitch = queryByRole('button', { name: 'Grid View' });
expect(gridSwitch).toBeInTheDocument();
expect(listSwitch).not.toBeInTheDocument();
fireEvent.click(gridSwitch);
expect(setView).toHaveBeenCalledWith(viewOptions.GRID);
});
});
});
});