Add linking to organizations support

apps/admin/src/components/predefined/buttons/index.ts

@@ -1,6 +1,7 @@
 export * from './archive-button';
 export * from './cancel-button';
 export * from './create-button';
+export * from './reset-filters-button';
 export * from './save-button';
 export * from './unarchive-button';
 export * from './update-button';

apps/admin/src/components/predefined/buttons/reset-filters-button.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+
+import { useI18n } from '~/i18n';
+
+type Props = Omit<JSX.IntrinsicElements['button'], 'children'>;
+
+export function ResetFiltersButton({ className, ...props }: Props) {
+  const { pack } = useI18n();
+
+  return (
+    <button
+      type="button"
+      className={clsx('uk-button uk-button-default', className)}
+      {...props}
+    >
+      {pack.buttons.resetFilters}
+    </button>
+  );
+}

apps/admin/src/components/predefined/tabs/archive-filter-tabs.tsx

@@ -6,7 +6,7 @@ import { useI18n } from '~/i18n';
 
 type Props = Omit<OmitControlStateAttrs<TabsProps>, 'tabs'>;
 
-export const ArchiveFilterTabs = controlled<boolean, Props>((
+export const ArchiveFilterTabs = controlled<boolean | null, Props>((
   {
     control: { value, setValue },
     className,
@@ -23,16 +23,20 @@ export const ArchiveFilterTabs = controlled<boolean, Props>((
       id: true,
       name: t.archived,
     },
+    {
+      id: -1,
+      name: t.all,
+    },
   ];
 
   return (
     <Tabs
       {...props}
       className={clsx(className, 'w-auto')}
-      value={value}
+      value={value ?? -1}
       onChange={(newValue) => {
         setValue({
-          value: newValue as boolean,
+          value: newValue === -1 ? null : Boolean(newValue),
         });
       }}
       tabs={tabs}

apps/admin/src/components/table/use-debounced-paginated-search.ts

@@ -94,9 +94,15 @@ export function useDebouncedPaginatedSearch<
   };
 
   const reset = () => {
+    const { initialState } = urlPagination;
+
     pagination.setValue({
       value: {
-        ...urlPagination.initialState,
+        offset: 0,
+        limit: initialState?.limit ?? 10,
+        ...'archived' in initialState && {
+          archived: false,
+        },
         __revision: Date.now(),
       },
     });

apps/admin/src/i18n/packs/i18n-lang-en.ts

@@ -81,6 +81,7 @@ export const I18N_PACK_EN = {
     update: 'Update',
     add: 'Add',
     confirm: 'Confirm',
+    resetFilters: 'Reset filters',
   },
   badges: {
     archive: {
@@ -94,6 +95,7 @@ export const I18N_PACK_EN = {
   },
   tabs: {
     archiveFilters: {
+      all: 'All',
       active: 'Active',
       archived: 'Archived',
     },

apps/admin/src/i18n/packs/i18n-lang-pl.ts

@@ -55,6 +55,7 @@ export const I18N_PACK_PL: I18nLangPack = {
     update: 'Aktualizuj',
     add: 'Dodaj',
     confirm: 'Potwierdź',
+    resetFilters: 'Resetuj filtry',
   },
   badges: {
     archive: {
@@ -68,6 +69,7 @@ export const I18N_PACK_PL: I18nLangPack = {
   },
   tabs: {
     archiveFilters: {
+      all: 'Wszystkie',
       active: 'Aktywne',
       archived: 'Zarchiwizowane',
     },

apps/admin/src/layouts/navigation/navigation.tsx

@@ -26,15 +26,15 @@ export function Navigation() {
                 {t.links.home}
               </NavigationItem>
 
-              <NavigationItem path={sitemap.organizations} icon="building">
-                {t.links.organizations}
+              <NavigationItem path={sitemap.users.index.raw} icon="user">
+                {t.links.users}
               </NavigationItem>
 
-              <NavigationItem path={sitemap.users} icon="user">
-                {t.links.users}
+              <NavigationItem path={sitemap.organizations.index.raw} icon="building">
+                {t.links.organizations}
               </NavigationItem>
 
-              <NavigationItem path={sitemap.s3} icon="cloud">
+              <NavigationItem path={sitemap.s3.index.raw} icon="cloud">
                 {t.links.s3}
               </NavigationItem>
             </ul>

apps/admin/src/modules/organizations/table/organizations-table-container.tsx

@@ -1,3 +1,5 @@
+import type { z } from 'zod';
+
 import { pipe } from 'fp-ts/lib/function';
 
 import { tapTaskOption } from '@llm/commons';
@@ -9,13 +11,16 @@ import {
   PaginatedTable,
   PaginationSearchToolbarItem,
   PaginationToolbar,
+  ResetFiltersButton,
   useDebouncedPaginatedSearch,
 } from '~/components';
 import { useI18n } from '~/i18n';
 
 import { useOrganizationCreateModal } from '../form/create';
 import { OrganizationsTableRow } from './organizations-table-row';
 
+export type SearchOrganizationsRouteUrlFiltersT = z.input<typeof SdKSearchOrganizationsInputV>;
+
 export function OrganizationsTableContainer() {
   const t = useI18n().pack.table.columns;
   const { sdks } = useSdkForLoggedIn();
@@ -57,6 +62,8 @@ export function OrganizationsTableContainer() {
             }),
           })}
         />
+
+        <ResetFiltersButton onClick={reset} />
       </PaginationToolbar>
 
       <PaginatedTable

apps/admin/src/modules/users/table/users-table-container.tsx

@@ -1,3 +1,5 @@
+import type { z } from 'zod';
+
 import { pipe } from 'fp-ts/lib/function';
 
 import { tapTaskOption } from '@llm/commons';
@@ -9,6 +11,7 @@ import {
   PaginatedTable,
   PaginationSearchToolbarItem,
   PaginationToolbar,
+  ResetFiltersButton,
   useDebouncedPaginatedSearch,
 } from '~/components';
 import { genRandomPassword } from '~/helpers';
@@ -26,6 +29,8 @@ const SearchUsersUrlFiltersV = SdKSearchUsersInputV
     organization: SdkIdNameUrlEntryV.optional().nullable(),
   });
 
+export type SearchUsersRouteUrlFiltersT = z.input<typeof SearchUsersUrlFiltersV>;
+
 export function UsersTableContainer() {
   const { pack } = useI18n();
   const t = pack.table.columns;
@@ -95,6 +100,8 @@ export function UsersTableContainer() {
           prefix={pack.modules.organizations.prefix.organization}
           {...pagination.bind.path('organization')}
         />
+
+        <ResetFiltersButton onClick={reset} />
       </PaginationToolbar>
 
       <PaginatedTable

apps/admin/src/modules/users/table/users-table-row.tsx

@@ -1,10 +1,12 @@
 import { pipe } from 'fp-ts/lib/function';
+import { Link } from 'wouter';
 
 import { formatDate, tapTaskEither, tapTaskOption } from '@llm/commons';
 import { type SdkSearchUserItemT, useSdkForLoggedIn } from '@llm/sdk';
 import { ArchivedBadge, BooleanBadge, EllipsisCrudDropdownButton } from '~/components';
 import { useI18n } from '~/i18n';
 import { UkIcon } from '~/icons';
+import { useSitemap } from '~/routes';
 
 import { useUserUpdateModal } from '../form';
 
@@ -14,6 +16,7 @@ type Props = {
 };
 
 export function UsersTableRow({ item, onUpdated }: Props) {
+  const sitemap = useSitemap();
   const { pack } = useI18n();
   const { sdks } = useSdkForLoggedIn();
   const { auth } = item;
@@ -24,7 +27,20 @@ export function UsersTableRow({ item, onUpdated }: Props) {
     <tr>
       <td>{item.id}</td>
       <td>{item.email}</td>
-      <td>{item.role === 'user' ? item.organization.name : '-'}</td>
+      <td>
+        {(
+          item.role === 'user'
+            ? (
+                <Link
+                  className="uk-link"
+                  href={sitemap.organizations.show(item.organization.id)}
+                >
+                  {item.organization.name}
+                </Link>
+              )
+            : '-'
+        )}
+      </td>
       <td>
         <BooleanBadge value={item.active} />
       </td>

apps/admin/src/router.tsx

@@ -28,9 +28,9 @@ export function Router() {
   return (
     <Switch>
       <Route path={sitemap.home} component={HomeRoute} />
-      <Route path={sitemap.organizations} component={OrganizationsRoute} />
-      <Route path={sitemap.s3} component={S3Route} />
-      <Route path={sitemap.users} component={UsersRoute} />
+      <Route path={sitemap.users.index.raw} component={UsersRoute} />
+      <Route path={sitemap.organizations.index.raw} component={OrganizationsRoute} />
+      <Route path={sitemap.s3.index.raw} component={S3Route} />
       <Route>
         <Redirect to={sitemap.home} />
       </Route>

apps/admin/src/routes/use-sitemap.ts

@@ -1,9 +1,82 @@
+import { identity, pipe } from 'fp-ts/lib/function';
+
+import type { SdkTableRowIdT } from '@llm/sdk';
+import type {
+  SearchOrganizationsRouteUrlFiltersT,
+  SearchUsersRouteUrlFiltersT,
+} from '~/modules';
+
+import {
+  type InferStrictPathParams,
+  parameterizeStrictPath,
+  type SearchParamsMap,
+  type StrictParametrizeParams,
+  withHash,
+  withSearchParams,
+} from '@llm/commons';
+
 export function useSitemap() {
-  return {
+  const sitemap = {
     home: '/',
     login: '/login',
-    organizations: '/organizations',
-    users: '/users',
-    s3: '/s3',
+    organizations: {
+      index: defineRouteGenerator<SearchOrganizationsRouteUrlFiltersT>()('/organizations'),
+      show: (id: SdkTableRowIdT) => sitemap.organizations.index.generate({
+        searchParams: {
+          archived: null,
+          ids: [id],
+        },
+      }),
+    },
+    users: {
+      index: defineRouteGenerator<SearchUsersRouteUrlFiltersT, 'edit'>()('/users'),
+    },
+    s3: {
+      index: defineRouteGenerator()('/s3'),
+    },
   };
+
+  return sitemap;
 };
+
+function defineRouteGenerator<
+  S extends SearchParamsMap = SearchParamsMap,
+  const H extends string = never,
+>(defaultSearchParams?: Partial<S>) {
+  return <const P extends string>(schema: P) => ({
+    raw: schema,
+    generate: ({ hash, pathParams, searchParams }: GenerateRouteGeneratorAttrs<P, H, S>) => pipe(
+      pathParams
+        ? parameterizeStrictPath(schema, pathParams)
+        : schema,
+
+      searchParams || defaultSearchParams
+        ? withSearchParams(
+          {
+            ...defaultSearchParams,
+            ...searchParams,
+          },
+        )
+        : identity,
+
+      hash
+        ? withHash(hash)
+        : identity,
+    ),
+  });
+}
+
+type GenerateRouteGeneratorAttrs<
+  P extends string,
+  H extends string = never,
+  S extends SearchParamsMap = SearchParamsMap,
+> =
+  & {
+    searchParams?: S;
+    hash?: H;
+  }
+  & (
+    InferStrictPathParams<P> extends never
+      ? { pathParams?: undefined; }
+      : { pathParams: StrictParametrizeParams<P>; }
+  );

packages/commons/src/dto/strict-boolean.dto.ts

@@ -7,3 +7,12 @@ export const StrictBooleanV = z
     z.literal('false'),
   ])
   .transform(value => value === true || value === 'true');
+
+export const StrictNullableBooleanV = z.union([
+  StrictBooleanV,
+  z.union([
+    z.literal('null'),
+    z.null(),
+  ])
+    .transform(() => null),
+]);

packages/commons/src/helpers/urls/drop-hash.ts

@@ -0,0 +1 @@
+export const dropHash = (url: string) => url.split('#')[0];

packages/commons/src/helpers/urls/encode-search-params.ts

@@ -4,8 +4,6 @@ import { toEntries } from 'fp-ts/lib/Record';
 
 import type { CanBeArray, Nullable } from '../../types';
 
-import { isNil } from '../is-nil';
-
 export type SearchParamValue = string | number | boolean | Date | null;
 
 export type SearchParamsMap = Record<
@@ -17,7 +15,9 @@ export function encodeSearchParams(query: SearchParamsMap) {
   return pipe(
     toEntries(query),
     A.chain<[string, any], [string, any]>(([key, value]) => {
-      if (isNil(value)) {
+      // `null` is a valid value for a query parameter, but `undefined` is not.
+      // Take a look at the `StrictNullableBooleanV` in typings.
+      if (value === undefined) {
         return [];
       }
 

packages/commons/src/helpers/urls/index.ts

@@ -3,9 +3,13 @@ export * from './concat-urls-parts';
 export * from './decode-search-params';
 export * from './default-url-protocol';
 export * from './drop-first-slash';
+export * from './drop-hash';
 export * from './drop-last-slash';
 export * from './drop-search-params';
 export * from './encode-search-params';
 export * from './has-url-protocol';
 export * from './is-absolute-url';
+export * from './parameterize-path';
+export * from './parameterize-strict-path';
+export * from './with-hash';
 export * from './with-search-params';

packages/commons/src/helpers/urls/parameterize-path.ts

@@ -0,0 +1,10 @@
+export type ParameterizedPathAttrs = Record<string, string | number | boolean>;
+
+export function parameterizePath(parameters: ParameterizedPathAttrs) {
+  return (path: string) =>
+    Object.entries(parameters).reduce(
+      (acc, [parameter, value]) =>
+        acc.replace(`:${parameter}`, value.toString()),
+      path,
+    );
+}