@strapi/admin 4.5.0-alpha.0 → 4.5.0

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js

@@ -0,0 +1,106 @@
+import React, { useState, useRef } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/design-system/Box';
+import { Button } from '@strapi/design-system/Button';
+import { Tag } from '@strapi/design-system/Tag';
+import Cross from '@strapi/icons/Cross';
+import Filter from '@strapi/icons/Filter';
+import FiltersPopover from './FiltersPopover';
+
+const FilterTag = ({ name, handleRemove }) => {
+  return (
+    <Box padding={1}>
+      <Tag icon={<Cross />} onClick={handleRemove}>
+        {name}
+      </Tag>
+    </Box>
+  );
+};
+
+const ButtonToggle = styled(Button)`
+  height: ${({ theme }) => theme.sizes.input.S};
+`;
+
+const NpmPackagesFilters = ({
+  possibleCollections,
+  possibleCategories,
+  npmPackageType,
+  query,
+  handleSelectClear,
+  handleSelectChange,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const buttonRef = useRef();
+  const { formatMessage } = useIntl();
+
+  const handleToggle = () => setIsVisible((prev) => !prev);
+
+  const handleTagRemove = (tagToRemove, filterType) => {
+    const update = {
+      [filterType]: query[filterType].filter((previousTag) => previousTag !== tagToRemove),
+    };
+
+    handleSelectChange(update);
+  };
+
+  return (
+    <>
+      <Box paddingTop={1} paddingBottom={1}>
+        <ButtonToggle
+          variant="tertiary"
+          ref={buttonRef}
+          startIcon={<Filter />}
+          onClick={handleToggle}
+          size="S"
+        >
+          {formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}
+        </ButtonToggle>
+        {isVisible && (
+          <FiltersPopover
+            onToggle={handleToggle}
+            source={buttonRef}
+            query={query}
+            handleSelectClear={handleSelectClear}
+            handleSelectChange={handleSelectChange}
+            possibleCollections={possibleCollections}
+            possibleCategories={possibleCategories}
+            npmPackageType={npmPackageType}
+          />
+        )}
+      </Box>
+      {query.collections?.map((collection) => (
+        <FilterTag
+          name={collection}
+          key={collection}
+          handleRemove={() => handleTagRemove(collection, 'collections')}
+        />
+      ))}
+      {npmPackageType === 'plugin' &&
+        query.categories?.map((category) => (
+          <FilterTag
+            name={category}
+            key={category}
+            handleRemove={() => handleTagRemove(category, 'categories')}
+          />
+        ))}
+    </>
+  );
+};
+
+FilterTag.propTypes = {
+  name: PropTypes.string.isRequired,
+  handleRemove: PropTypes.func.isRequired,
+};
+
+NpmPackagesFilters.propTypes = {
+  npmPackageType: PropTypes.oneOf(['plugin', 'provider']).isRequired,
+  possibleCollections: PropTypes.object.isRequired,
+  possibleCategories: PropTypes.object.isRequired,
+  query: PropTypes.object.isRequired,
+  handleSelectChange: PropTypes.func.isRequired,
+  handleSelectClear: PropTypes.func.isRequired,
+};
+
+export default NpmPackagesFilters;

package/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js

@@ -9,6 +9,7 @@ const NpmPackagesGrid = ({
   useYarn,
   isInDevelopmentMode,
   npmPackageType,
+  strapiAppVersion,
 }) => {
   // Check if an individual package is in the dependencies
   const isAlreadyInstalled = useCallback(
@@ -26,6 +27,7 @@ const NpmPackagesGrid = ({
             useYarn={useYarn}
             isInDevelopmentMode={isInDevelopmentMode}
             npmPackageType={npmPackageType}
+            strapiAppVersion={strapiAppVersion}
           />
         </GridItem>
       ))}
@@ -35,6 +37,7 @@ const NpmPackagesGrid = ({
 
 NpmPackagesGrid.defaultProps = {
   installedPackageNames: [],
+  strapiAppVersion: null,
 };
 
 NpmPackagesGrid.propTypes = {
@@ -43,6 +46,7 @@ NpmPackagesGrid.propTypes = {
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool.isRequired,
   npmPackageType: PropTypes.string.isRequired,
+  strapiAppVersion: PropTypes.string,
 };
 
 export default NpmPackagesGrid;

package/admin/src/pages/MarketplacePage/components/SortSelect/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Select, Option } from '@strapi/design-system/Select';
+import { Box } from '@strapi/design-system/Box';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+
+const SelectWrapper = styled(Box)`
+  font-weight: ${({ theme }) => theme.fontWeights.semiBold};
+
+  span {
+    font-size: ${({ theme }) => theme.fontSizes[1]};
+  }
+`;
+
+const SortSelect = ({ sortQuery, handleSelectChange }) => {
+  const { formatMessage } = useIntl();
+
+  const sortTypes = {
+    'name:asc': {
+      selected: {
+        id: 'admin.pages.MarketPlacePage.sort.alphabetical.selected',
+        defaultMessage: 'Sort by alphabetical order',
+      },
+      option: {
+        id: 'admin.pages.MarketPlacePage.sort.alphabetical',
+        defaultMessage: 'Alphabetical order',
+      },
+    },
+    'submissionDate:desc': {
+      selected: {
+        id: 'admin.pages.MarketPlacePage.sort.newest.selected',
+        defaultMessage: 'Sort by newest',
+      },
+      option: {
+        id: 'admin.pages.MarketPlacePage.sort.newest',
+        defaultMessage: 'Newest',
+      },
+    },
+  };
+
+  return (
+    <SelectWrapper>
+      <Select
+        size="S"
+        id="sort-by-select"
+        value={sortQuery}
+        customizeContent={() => formatMessage(sortTypes[sortQuery].selected)}
+        onChange={(sortName) => {
+          handleSelectChange({ sort: sortName });
+        }}
+      >
+        {Object.entries(sortTypes).map(([sortName, messages]) => {
+          return (
+            <Option key={sortName} value={sortName}>
+              {formatMessage(messages.option)}
+            </Option>
+          );
+        })}
+      </Select>
+    </SelectWrapper>
+  );
+};
+
+SortSelect.propTypes = {
+  sortQuery: PropTypes.string.isRequired,
+  handleSelectChange: PropTypes.func.isRequired,
+};
+
+export default SortSelect;

package/admin/src/pages/MarketplacePage/index.js

@@ -10,6 +10,7 @@ import {
   LoadingIndicatorPage,
   useNotification,
   useAppInfos,
+  useQueryParams,
 } from '@strapi/helper-plugin';
 import { Layout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
@@ -29,6 +30,8 @@ import offlineCloud from '../../assets/images/icon_offline-cloud.svg';
 import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
 import MissingPluginBanner from './components/MissingPluginBanner';
 import NpmPackagesGrid from './components/NpmPackagesGrid';
+import SortSelect from './components/SortSelect';
+import NpmPackagesFilters from './components/NpmPackagesFilters';
 
 const matchSearch = (npmPackages, search) => {
   return matchSorter(npmPackages, search, {
@@ -39,6 +42,7 @@ const matchSearch = (npmPackages, search) => {
       },
       { threshold: matchSorter.rankings.WORD_STARTS_WITH, key: 'attributes.description' },
     ],
+    baseSort: (a, b) => (a.index < b.index ? -1 : 1),
   });
 };
 
@@ -49,10 +53,18 @@ const MarketPlacePage = () => {
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
   const [searchQuery, setSearchQuery] = useState('');
-  const [npmPackageType, setNpmPackageType] = useState('plugin');
-  const { autoReload: isInDevelopmentMode, dependencies, useYarn } = useAppInfos();
+  const [{ query }, setQuery] = useQueryParams();
+
+  const { autoReload: isInDevelopmentMode, dependencies, useYarn, strapiVersion } = useAppInfos();
   const isOnline = useNavigatorOnLine();
 
+  const npmPackageType = query?.npmPackageType || 'plugin';
+
+  const [tabQuery, setTabQuery] = useState({
+    plugin: npmPackageType === 'plugin' ? { ...query } : {},
+    provider: npmPackageType === 'provider' ? { ...query } : {},
+  });
+
   useFocusWhenNavigate();
 
   const marketplaceTitle = formatMessage({
@@ -72,11 +84,11 @@ const MarketPlacePage = () => {
     );
   };
 
-  const { status: marketplacePluginsStatus, data: marketplacePluginsResponse } =
-    useFetchMarketplacePlugins(notifyMarketplaceLoad);
-
   const { status: marketplaceProvidersStatus, data: marketplaceProvidersResponse } =
-    useFetchMarketplaceProviders(notifyMarketplaceLoad);
+    useFetchMarketplaceProviders(notifyMarketplaceLoad, tabQuery.provider);
+
+  const { status: marketplacePluginsStatus, data: marketplacePluginsResponse } =
+    useFetchMarketplacePlugins(notifyMarketplaceLoad, tabQuery.plugin);
 
   const isLoading = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('loading');
 
@@ -169,13 +181,44 @@ const MarketPlacePage = () => {
   );
 
   const handleTabChange = (selected) => {
-    const packageType = selected === 0 ? 'plugin' : 'provider';
-    setNpmPackageType(packageType);
+    const selectedTab = selected === 0 ? 'plugin' : 'provider';
+    const hasTabQuery = tabQuery[selectedTab] && Object.keys(tabQuery[selectedTab]).length;
+
+    if (hasTabQuery) {
+      setQuery({ ...tabQuery[selectedTab], npmPackageType: selectedTab });
+    } else {
+      setQuery({
+        npmPackageType: selectedTab,
+        // Clear filters
+        collections: [],
+        categories: [],
+        sort: 'name:asc',
+      });
+    }
+  };
+
+  const handleSelectChange = (update) => {
+    setQuery(update);
+    setTabQuery((prev) => ({
+      ...prev,
+      [npmPackageType]: { ...prev[npmPackageType], ...update },
+    }));
+  };
+
+  const handleSelectClear = (filterType) => {
+    setQuery({ [filterType]: [] }, 'remove');
+    setTabQuery((prev) => ({ ...prev, [npmPackageType]: {} }));
   };
 
   // Check if plugins and providers are installed already
   const installedPackageNames = Object.keys(dependencies);
 
+  const possibleCollections =
+    npmPackageType === 'plugin'
+      ? marketplacePluginsResponse.meta.collections
+      : marketplaceProvidersResponse.meta.collections;
+  const possibleCategories = marketplacePluginsResponse.meta.categories;
+
   return (
     <Layout>
       <Main>
@@ -215,6 +258,7 @@ const MarketPlacePage = () => {
             })}
             id="tabs"
             variant="simple"
+            initialSelectedTabIndex={['plugin', 'provider'].indexOf(npmPackageType)}
             onTabChange={handleTabChange}
           >
             <Box paddingBottom={4}>
@@ -235,6 +279,21 @@ const MarketPlacePage = () => {
                 </Tab>
               </Tabs>
             </Box>
+            <Flex paddingBottom={4} gap={2}>
+              <SortSelect
+                sortQuery={query?.sort || 'name:asc'}
+                handleSelectChange={handleSelectChange}
+              />
+              <NpmPackagesFilters
+                npmPackageType={npmPackageType}
+                possibleCollections={possibleCollections}
+                possibleCategories={possibleCategories}
+                query={query || {}}
+                handleSelectChange={handleSelectChange}
+                handleSelectClear={handleSelectClear}
+              />
+            </Flex>
+
             <TabPanels>
               {/* Plugins panel */}
               <TabPanel>
@@ -247,6 +306,7 @@ const MarketPlacePage = () => {
                     useYarn={useYarn}
                     isInDevelopmentMode={isInDevelopmentMode}
                     npmPackageType="plugin"
+                    strapiAppVersion={strapiVersion}
                   />
                 )}
               </TabPanel>

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/ActionBoundRoutes/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Typography } from '@strapi/design-system/Typography';
+import { Stack } from '@strapi/design-system/Stack';
+import { GridItem } from '@strapi/design-system/Grid';
+import BoundRoute from '../BoundRoute';
+import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
+
+const ActionBoundRoutes = () => {
+  const {
+    value: { selectedAction, routes },
+  } = useApiTokenPermissionsContext();
+  const { formatMessage } = useIntl();
+  const actionSection = selectedAction?.split('.')[0];
+
+  return (
+    <GridItem
+      col={5}
+      background="neutral150"
+      paddingTop={6}
+      paddingBottom={6}
+      paddingLeft={7}
+      paddingRight={7}
+      style={{ minHeight: '100%' }}
+    >
+      {selectedAction ? (
+        <Stack spacing={2}>
+          {routes[actionSection]?.map((route) => {
+            return route.config.auth?.scope?.includes(selectedAction) ||
+              route.handler === selectedAction ? (
+              <BoundRoute key={route.handler} route={route} />
+            ) : null;
+          })}
+        </Stack>
+      ) : (
+        <Stack spacing={2}>
+          <Typography variant="delta" as="h3">
+            {formatMessage({
+              id: 'Settings.apiTokens.createPage.permissions.header.title',
+              defaultMessage: 'Advanced settings',
+            })}
+          </Typography>
+          <Typography as="p" textColor="neutral600">
+            {formatMessage({
+              id: 'Settings.apiTokens.createPage.permissions.header.hint',
+              defaultMessage:
+                "Select the application's actions or the plugin's actions and click on the cog icon to display the bound route",
+            })}
+          </Typography>
+        </Stack>
+      )}
+    </GridItem>
+  );
+};
+
+export default ActionBoundRoutes;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/BoundRoute/getMethodColor.js

@@ -0,0 +1,41 @@
+const getMethodColor = (verb) => {
+  switch (verb) {
+    case 'POST': {
+      return {
+        text: 'success600',
+        border: 'success200',
+        background: 'success100',
+      };
+    }
+    case 'GET': {
+      return {
+        text: 'secondary600',
+        border: 'secondary200',
+        background: 'secondary100',
+      };
+    }
+    case 'PUT': {
+      return {
+        text: 'warning600',
+        border: 'warning200',
+        background: 'warning100',
+      };
+    }
+    case 'DELETE': {
+      return {
+        text: 'danger600',
+        border: 'danger200',
+        background: 'danger100',
+      };
+    }
+    default: {
+      return {
+        text: 'neutral600',
+        border: 'neutral200',
+        background: 'neutral100',
+      };
+    }
+  }
+};
+
+export default getMethodColor;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/BoundRoute/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Stack } from '@strapi/design-system/Stack';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import map from 'lodash/map';
+import tail from 'lodash/tail';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import getMethodColor from './getMethodColor';
+
+const MethodBox = styled(Box)`
+  margin: -1px;
+  border-radius: ${({ theme }) => theme.spaces[1]} 0 0 ${({ theme }) => theme.spaces[1]};
+`;
+
+function BoundRoute({ route }) {
+  const { formatMessage } = useIntl();
+
+  const { method, handler: title, path } = route;
+  const formattedRoute = path ? tail(path.split('/')) : [];
+  const [controller = '', action = ''] = title ? title.split('.') : [];
+  const colors = getMethodColor(route.method);
+
+  return (
+    <Stack spacing={2}>
+      <Typography variant="delta" as="h3">
+        {formatMessage({
+          id: 'Settings.apiTokens.createPage.BoundRoute.title',
+          defaultMessage: 'Bound route to',
+        })}
+        &nbsp;
+        <span>{controller}</span>
+        <Typography variant="delta" textColor="primary600">
+          .{action}
+        </Typography>
+      </Typography>
+      <Stack horizontal hasRadius background="neutral0" borderColor="neutral200" spacing={0}>
+        <MethodBox background={colors.background} borderColor={colors.border} padding={2}>
+          <Typography fontWeight="bold" textColor={colors.text}>
+            {method}
+          </Typography>
+        </MethodBox>
+        <Box paddingLeft={2} paddingRight={2}>
+          {map(formattedRoute, (value) => (
+            <Typography key={value} textColor={value.includes(':') ? 'neutral600' : 'neutral900'}>
+              /{value}
+            </Typography>
+          ))}
+        </Box>
+      </Stack>
+    </Stack>
+  );
+}
+
+BoundRoute.defaultProps = {
+  route: {
+    handler: 'Nocontroller.error',
+    method: 'GET',
+    path: '/there-is-no-path',
+  },
+};
+
+BoundRoute.propTypes = {
+  route: PropTypes.shape({
+    handler: PropTypes.string,
+    method: PropTypes.string,
+    path: PropTypes.string,
+  }),
+};
+
+export default BoundRoute;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/CollapsableContentType/CheckBoxWrapper.js

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+
+const activeCheckboxWrapperStyles = css`
+  background: ${(props) => props.theme.colors.primary100};
+  svg {
+    opacity: 1;
+  }
+`;
+
+const CheckboxWrapper = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  svg {
+    opacity: 0;
+    path {
+      fill: ${(props) => props.theme.colors.primary600};
+    }
+  }
+
+  /* Show active style both on hover and when the action is selected */
+  ${(props) => props.isActive && activeCheckboxWrapperStyles}
+  &:hover {
+    ${activeCheckboxWrapperStyles}
+  }
+`;
+
+export default CheckboxWrapper;