feat: enhance the URL alias overview (locale filters & locale and contenttype in the table)

Author: boazpoolman

.changeset/lazy-sides-fetch.md

@@ -0,0 +1,5 @@
+---
+"strapi-plugin-webtools": minor
+---
+
+feat: enhance the URL alias overview (locale filters & locale and contenttype in the table)

packages/core/admin/screens/List/components/Filters/index.tsx

@@ -10,12 +10,14 @@ import {
 import { Filters as StrapiFilters, SearchInput } from '@strapi/strapi/admin';
 import FilterInput from './FilterInput';
 import { EnabledContentType, EnabledContentTypes } from '../../../../types/enabled-contenttypes';
+import { Locales } from '../../../../types/languages';
 
 type Props = {
   contentTypes: EnabledContentTypes,
+  locales: Locales,
 };
 
-const Filters = ({ contentTypes }: Props) => {
+const Filters = ({ contentTypes, locales }: Props) => {
   const { formatMessage } = useIntl();
 
   const filters = useMemo(() => {
@@ -27,12 +29,22 @@ const Filters = ({ contentTypes }: Props) => {
           input: FilterInput,
           label: 'Content-Type',
           name: 'contenttype',
-          options: contentTypes.map((contenttype: EnabledContentType) => ({
+          options: contentTypes.map((contenttype) => ({
             label: contenttype.name,
             value: contenttype.uid,
           })),
           type: 'string',
         },
+        {
+          input: FilterInput,
+          label: 'Locale',
+          name: 'locale',
+          options: locales.map((locale) => ({
+            label: locale.name,
+            value: locale.uid,
+          })),
+          type: 'string',
+        },
       );
     }
 

packages/core/admin/screens/List/components/Table/index.tsx

@@ -23,12 +23,14 @@ import type { Pagination } from '../..';
 import Filters from '../Filters';
 import { Config } from '../../../../../server/config';
 import { UrlAliasEntity } from '../../../../types/url-aliases';
+import { Locales } from '../../../../types/languages';
 
 type Props = {
   paths: UrlAliasEntity[],
   onDelete: () => any,
   pagination: Pagination,
   contentTypes: any[],
+  locales: Locales,
   config: Config,
 };
 
@@ -39,6 +41,7 @@ const TableComponent: FC<Props> = (props) => {
     onDelete,
     config,
     contentTypes,
+    locales,
   } = props;
 
   const { formatMessage } = useIntl();
@@ -60,7 +63,7 @@ const TableComponent: FC<Props> = (props) => {
 
   return (
     <div>
-      <Filters contentTypes={contentTypes} />
+      <Filters contentTypes={contentTypes} locales={locales} />
       {amountChecked > 0 && (
         <Flex marginBottom="6" gap="3">
           <Typography variant="omega" textColor="neutral600">
@@ -93,7 +96,17 @@ const TableComponent: FC<Props> = (props) => {
               </Th> */}
               <Th>
                 <Typography variant="sigma" textColor="neutral600">
-                  {formatMessage({ id: 'webtools.settings.page.patterns.table.head.label', defaultMessage: 'Path' })}
+                  {formatMessage({ id: 'webtools.settings.page.path.table.head.path', defaultMessage: 'Path' })}
+                </Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma" textColor="neutral600">
+                  {formatMessage({ id: 'webtools.settings.page.path.table.head.content-type', defaultMessage: 'Content-Type' })}
+                </Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma" textColor="neutral600">
+                  {formatMessage({ id: 'webtools.settings.page.path.table.head.locale', defaultMessage: 'Locale' })}
                 </Typography>
               </Th>
             </Tr>

packages/core/admin/screens/List/components/TableRow/index.tsx

@@ -71,6 +71,16 @@ const TableRow: FC<Props> = ({
           <Typography>{row.url_path}</Typography>
         </Box>
       </Td>
+      <Td>
+        <Box style={{ marginTop: 5, marginBottom: 5 }}>
+          <Typography>{row.contenttype}</Typography>
+        </Box>
+      </Td>
+      <Td>
+        <Box style={{ marginTop: 5, marginBottom: 5 }}>
+          <Typography>{row.locale}</Typography>
+        </Box>
+      </Td>
       <Td>
         <Flex justifyContent="end">
           {config.website_url && (

packages/core/admin/screens/List/index.tsx

@@ -24,6 +24,7 @@ import { GenericResponse } from '../../types/content-api';
 import { Config } from '../../../server/config';
 import { UrlAliasEntity } from '../../types/url-aliases';
 import useQueryParams from '../../hooks/useQueryParams';
+import { Locales } from '../../types/languages';
 
 export type Pagination = {
   page: number;
@@ -38,6 +39,7 @@ const List = () => {
 
   const items = useQuery(['url-alias', params], async () => get<GenericResponse<UrlAliasEntity[]>>(`/webtools/url-alias/findMany?${params}`));
   const contentTypes = useQuery('content-types', async () => get<EnabledContentTypes>('/webtools/info/getContentTypes'));
+  const locales = useQuery('languages', async () => get<Locales>('/webtools/info/getLanguages'));
   const config = useQuery('config', async () => get<Config>('/webtools/info/config'));
   const queryClient = useQueryClient();
 
@@ -58,21 +60,20 @@ const List = () => {
     await queryClient.invalidateQueries('url-alias');
   };
 
-  if (items.isLoading || config.isLoading || contentTypes.isLoading) {
+  if (items.isLoading || config.isLoading || contentTypes.isLoading || locales.isLoading) {
     return (
       <Loader />
     );
   }
 
-  if (items.isError || config.isError || contentTypes.isError) {
+  if (items.isError || config.isError || contentTypes.isError || locales.isError) {
     return (
       <div>error</div>
     );
   }
 
   return (
     <Page.Protect permissions={pluginPermissions['settings.patterns']}>
-      {false && <Loader />}
       <Layouts.Header
         title={formatMessage({ id: 'webtools.settings.page.list.title', defaultMessage: 'URLs' })}
         subtitle={formatMessage({ id: 'webtools.settings.page.list.description', defaultMessage: 'A list of all the known URL aliases.' })}
@@ -97,6 +98,7 @@ const List = () => {
           pagination={items.data.data.meta.pagination}
           onDelete={() => queryClient.invalidateQueries('url-alias')}
           config={config.data.data}
+          locales={locales.data.data}
           contentTypes={contentTypes.data.data}
         />
       </Layouts.Content>

packages/core/admin/types/languages.ts

@@ -1,6 +1,6 @@
-export interface EnabledContentType {
+export interface Locale {
   name: string,
   uid: string,
 }
 
-export type EnabledContentTypes = EnabledContentType[];
+export type Locales = Locale[];