yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-23 15:29:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Mark Kaylor 2022-10-21 10:40:26 +02:00
parent 637632b8a5
commit f37d24c6ff
5 changed files with 82 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js
View File

@ -12,6 +12,7 @@ const FiltersPopover = ({
onToggle, onToggle,
query, query,
setQuery, setQuery,
setTabQuery,
npmPackageType, npmPackageType,
possibleCategories, possibleCategories,
possibleCollections, possibleCollections,
@ -29,8 +30,15 @@ const FiltersPopover = ({
defaultMessage: 'Collections', defaultMessage: 'Collections',
})} })}
value={query?.collections || []} value={query?.collections || []}
onChange={(newCollections) => setQuery({ collections: newCollections })} onChange={(newCollections) => {
onClear={() => setQuery({ collections: [] }, 'remove')} const update = { collections: newCollections, npmPackageType };
setQuery(update);
setTabQuery((prev) => ({ ...prev, [npmPackageType]: update }));
}}
onClear={() => {
setQuery({ collections: [] }, 'remove');
setTabQuery((prev) => ({ ...prev, [npmPackageType]: {} }));
}}
possibleFilters={possibleCollections} possibleFilters={possibleCollections}
customizeContent={(values) => customizeContent={(values) =>
formatMessage( formatMessage(
@ -52,8 +60,15 @@ const FiltersPopover = ({
defaultMessage: 'Categories', defaultMessage: 'Categories',
})} })}
value={query?.categories || []} value={query?.categories || []}
onChange={(newCategories) => setQuery({ categories: newCategories })} onChange={(newCategories) => {
onClear={() => setQuery({ categories: [] }, 'remove')} const update = { categories: newCategories, npmPackageType };
setQuery(update);
setTabQuery((prev) => ({ ...prev, [npmPackageType]: update }));
}}
onClear={() => {
setQuery({ categories: [] }, 'remove');
setTabQuery((prev) => ({ ...prev, [npmPackageType]: {} }));
}}
possibleFilters={possibleCategories} possibleFilters={possibleCategories}
customizeContent={(values) => customizeContent={(values) =>
formatMessage( formatMessage(
@ -83,6 +98,7 @@ FiltersPopover.propTypes = {
npmPackageType: PropTypes.oneOf(['plugin', 'provider']).isRequired, npmPackageType: PropTypes.oneOf(['plugin', 'provider']).isRequired,
possibleCollections: PropTypes.object.isRequired, possibleCollections: PropTypes.object.isRequired,
possibleCategories: PropTypes.object.isRequired, possibleCategories: PropTypes.object.isRequired,
setTabQuery: PropTypes.func.isRequired,
}; };
export default FiltersPopover; export default FiltersPopover;

31
packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js
View File

@ -24,6 +24,7 @@ const NpmPackagesFilters = ({
npmPackageType, npmPackageType,
query, query,
setQuery, setQuery,
setTabQuery,
}) => { }) => {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const buttonRef = useRef(); const buttonRef = useRef();
@ -49,6 +50,7 @@ const NpmPackagesFilters = ({
source={buttonRef} source={buttonRef}
query={query} query={query}
setQuery={setQuery} setQuery={setQuery}
setTabQuery={setTabQuery}
possibleCollections={possibleCollections} possibleCollections={possibleCollections}
possibleCategories={possibleCategories} possibleCategories={possibleCategories}
npmPackageType={npmPackageType} npmPackageType={npmPackageType}
@ -59,13 +61,18 @@ const NpmPackagesFilters = ({
<FilterTag <FilterTag
name={collection} name={collection}
key={collection} key={collection}
handleRemove={() => handleRemove={() => {
setQuery({ const update = {
collections: query.collections.filter( collections: query.collections.filter(
(previousCollection) => previousCollection !== collection (previousCollection) => previousCollection !== collection
), ),
}) };
} setQuery(update);
setTabQuery((prev) => ({
...prev,
[npmPackageType]: { ...prev[npmPackageType], ...update },
}));
}}
/> />
))} ))}
{npmPackageType === 'plugin' && {npmPackageType === 'plugin' &&
@ -73,13 +80,18 @@ const NpmPackagesFilters = ({
<FilterTag <FilterTag
name={category} name={category}
key={category} key={category}
handleRemove={() => handleRemove={() => {
setQuery({ const update = {
categories: query.categories.filter( collections: query.categories.filter(
(previousCategory) => previousCategory !== category (previousCategory) => previousCategory !== category
), ),
}) };
} setQuery(update);
setTabQuery((prev) => ({
...prev,
[npmPackageType]: { ...prev[npmPackageType], ...update },
}));
}}
/> />
))} ))}
</> </>
@ -97,6 +109,7 @@ NpmPackagesFilters.propTypes = {
possibleCategories: PropTypes.object.isRequired, possibleCategories: PropTypes.object.isRequired,
query: PropTypes.object.isRequired, query: PropTypes.object.isRequired,
setQuery: PropTypes.func.isRequired, setQuery: PropTypes.func.isRequired,
setTabQuery: PropTypes.func.isRequired,
}; };
export default NpmPackagesFilters; export default NpmPackagesFilters;

8
packages/core/admin/admin/src/pages/MarketplacePage/components/SortSelect/index.js
View File

@ -23,7 +23,7 @@ const SortToggleButton = styled(Button)`
} }
`; `;
const SortSelect = ({ sortQuery, setQuery }) => { const SortSelect = ({ sortQuery, setQuery, setTabQuery, npmPackageType }) => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const buttonRef = useRef(); const buttonRef = useRef();
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
@ -51,6 +51,10 @@ const SortSelect = ({ sortQuery, setQuery }) => {
const handleSortClick = (sortName) => { const handleSortClick = (sortName) => {
setQuery({ sort: sortName }); setQuery({ sort: sortName });
setTabQuery((prev) => ({
...prev,
[npmPackageType]: { ...prev[npmPackageType], sort: sortName, npmPackageType },
}));
handleToggle(); handleToggle();
}; };
@ -126,7 +130,9 @@ SortSelect.defaultProps = {
SortSelect.propTypes = { SortSelect.propTypes = {
setQuery: PropTypes.func.isRequired, setQuery: PropTypes.func.isRequired,
setTabQuery: PropTypes.func.isRequired,
sortQuery: PropTypes.string, sortQuery: PropTypes.string,
npmPackageType: PropTypes.string.isRequired,
}; };
export default SortSelect; export default SortSelect;

54
packages/core/admin/admin/src/pages/MarketplacePage/index.js
View File

@ -53,9 +53,11 @@ const MarketPlacePage = () => {
const trackUsageRef = useRef(trackUsage); const trackUsageRef = useRef(trackUsage);
const toggleNotification = useNotification(); const toggleNotification = useNotification();
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [{ query }, setQuery] = useQueryParams();
const [tabQuery, setTabQuery] = useState({ plugin: { ...query }, provider: { ...query } });
const { autoReload: isInDevelopmentMode, dependencies, useYarn } = useAppInfos(); const { autoReload: isInDevelopmentMode, dependencies, useYarn } = useAppInfos();
const isOnline = useNavigatorOnLine(); const isOnline = useNavigatorOnLine();
const [{ query }, setQuery] = useQueryParams();
const npmPackageType = query?.npmPackageType || 'plugin'; const npmPackageType = query?.npmPackageType || 'plugin';
useFocusWhenNavigate(); useFocusWhenNavigate();
@ -77,19 +79,11 @@ const MarketPlacePage = () => {
); );
}; };
const providerParams = {
collections: query?.collections || [],
sort: query?.sort || 'name:asc',
};
const { status: marketplaceProvidersStatus, data: marketplaceProvidersResponse } = const { status: marketplaceProvidersStatus, data: marketplaceProvidersResponse } =
useFetchMarketplaceProviders(notifyMarketplaceLoad, providerParams); useFetchMarketplaceProviders(notifyMarketplaceLoad, tabQuery.provider);
const pluginParams = {
...providerParams,
categories: query?.categories || [],
};
const { status: marketplacePluginsStatus, data: marketplacePluginsResponse } = const { status: marketplacePluginsStatus, data: marketplacePluginsResponse } =
useFetchMarketplacePlugins(notifyMarketplaceLoad, pluginParams); useFetchMarketplacePlugins(notifyMarketplaceLoad, tabQuery.plugin);
const isLoading = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('loading'); const isLoading = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('loading');
@ -182,18 +176,25 @@ const MarketPlacePage = () => {
); );
const handleTabChange = (selected) => { const handleTabChange = (selected) => {
const packageType = selected === 0 ? 'plugin' : 'provider'; const selectedTab = selected === 0 ? 'plugin' : 'provider';
setQuery({
// Save new tab in the query params if (tabQuery[selectedTab] && Object.keys(tabQuery[selectedTab]).length) {
npmPackageType: packageType, setQuery({ ...tabQuery[selectedTab] });
// Clear filters } else {
collections: [], setQuery(
categories: [], {
// Reset sort npmPackageType: null,
sort: 'name:asc', // Clear filters
}); collections: [],
categories: [],
sort: null,
},
'remove'
);
}
}; };
console.log(tabQuery);
// Check if plugins and providers are installed already // Check if plugins and providers are installed already
const installedPackageNames = Object.keys(dependencies); const installedPackageNames = Object.keys(dependencies);
@ -201,6 +202,7 @@ const MarketPlacePage = () => {
npmPackageType === 'plugin' npmPackageType === 'plugin'
? marketplacePluginsResponse.meta.collections ? marketplacePluginsResponse.meta.collections
: marketplaceProvidersResponse.meta.collections; : marketplaceProvidersResponse.meta.collections;
const possibleCategories = marketplacePluginsResponse.meta.categories;
return ( return (
<Layout> <Layout>
@ -263,13 +265,19 @@ const MarketPlacePage = () => {
</Tabs> </Tabs>
</Box> </Box>
<Flex paddingBottom={4} gap={2}> <Flex paddingBottom={4} gap={2}>
<SortSelect sortQuery={query?.sort} setQuery={setQuery} /> <SortSelect
sortQuery={query?.sort}
setQuery={setQuery}
setTabQuery={setTabQuery}
npmPackageType={npmPackageType}
/>
<NpmPackagesFilters <NpmPackagesFilters
npmPackageType={npmPackageType} npmPackageType={npmPackageType}
possibleCollections={possibleCollections} possibleCollections={possibleCollections}
possibleCategories={marketplacePluginsResponse.meta.categories} possibleCategories={possibleCategories}
query={query || {}} query={query || {}}
setQuery={setQuery} setQuery={setQuery}
setTabQuery={setTabQuery}
/> />
</Flex> </Flex>

4
packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap
View File

@ -2979,14 +2979,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
aria-disabled="false" aria-disabled="false"
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
aria-label="Sort by: Alphabetical order" aria-label="Sort by"
class="c38 c39 c40" class="c38 c39 c40"
type="button" type="button"
> >
<span <span
class="c41 c42" class="c41 c42"
> >
Sort by: Alphabetical order Sort by
</span> </span>
<div <div
aria-hidden="true" aria-hidden="true"