Add deleted-client filter in agent details

src/features/amUI/agentDetails/AgentDetails.tsx

@@ -1,11 +1,12 @@
-import React, { useId, useState } from 'react';
+import React, { useId, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   DsAlert,
   DsHeading,
   DsParagraph,
   DsSkeleton,
   formatDisplayName,
+  Switch,
 } from '@altinn/altinn-components';
 import { useParams } from 'react-router';
 import { skipToken } from '@reduxjs/toolkit/query';
@@ -53,6 +54,11 @@ export const AgentDetails = () => {
     error: agentResourcesError,
   } = useGetAgentResourcesQuery(id ? { to: id } : skipToken);
   const { data: clients, isLoading: isLoadingClients, error: clientsError } = useGetClientsQuery();
+  const [showDeleted, setShowDeleted] = useState(false);
+  const visibleClients = useMemo(
+    () => (showDeleted ? clients : clients?.filter((client) => !client.client.isDeleted)),
+    [clients, showDeleted],
+  );
 
   const [addAgentAccessPackages, { isLoading: isAddingAgentAccessPackages }] =
     useAddAgentAccessPackagesMutation();
@@ -65,7 +71,7 @@ export const AgentDetails = () => {
   const { clientsWithAgentAccess, clientsWithoutAgentAccess } = useAgentDetailsAccessClientLists({
     agentAccessPackages,
     agentResources,
-    clients,
+    clients: visibleClients,
   });
   const [searchString, setSearchString] = useState<string>('');
   const [expandedIds, setExpandedIds] = useState<string[]>([]);
@@ -162,6 +168,13 @@ export const AgentDetails = () => {
             <ClientAdminSearchField
               setSearchString={setSearchString}
               searchPlaceholder={t('my_clients_page.search_placeholder')}
+              filters={
+                <Switch
+                  onChange={(e) => setShowDeleted(e.target.checked)}
+                  checked={showDeleted}
+                  label={t('client_administration_page.show_deleted_clients')}
+                />
+              }
             />
             <section aria-labelledby={assignedSectionId}>
               <DsHeading

src/features/amUI/common/ClientAdminSearchField/ClientAdminSearchField.module.css

@@ -7,6 +7,26 @@
   margin-bottom: var(--ds-spacing-4);
 }
 
+.searchAndFilters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ds-spacing-3);
+  flex: 1;
+}
+
 .searchBar {
+  flex: 1;
   max-width: 23rem;
 }
+
+@media only screen and (max-width: 768px) {
+  .searchAndFilters {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .searchBar {
+    max-width: 100%;
+  }
+}

src/features/amUI/common/ClientAdminSearchField/ClientAdminSearchField.tsx

@@ -6,12 +6,14 @@ import classes from './ClientAdminSearchField.module.css';
 interface ClientAdminSearchFieldProps {
   searchPlaceholder: string;
   setSearchString: (newSearch: string) => void;
+  filters?: React.ReactNode;
   children?: React.ReactNode;
 }
 
 export const ClientAdminSearchField = ({
   searchPlaceholder,
   setSearchString,
+  filters,
   children,
 }: ClientAdminSearchFieldProps) => {
   const onSearch = useCallback(
@@ -23,19 +25,22 @@ export const ClientAdminSearchField = ({
 
   return (
     <div className={classes.search}>
-      <DsSearch className={classes.searchBar}>
-        <DsSearch.Input
-          aria-label={searchPlaceholder}
-          placeholder={searchPlaceholder}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => onSearch(event.target.value)}
-        />
-        <DsSearch.Clear
-          onClick={() => {
-            onSearch.cancel();
-            setSearchString('');
-          }}
-        />
-      </DsSearch>
+      <div className={classes.searchAndFilters}>
+        <DsSearch className={classes.searchBar}>
+          <DsSearch.Input
+            aria-label={searchPlaceholder}
+            placeholder={searchPlaceholder}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => onSearch(event.target.value)}
+          />
+          <DsSearch.Clear
+            onClick={() => {
+              onSearch.cancel();
+              setSearchString('');
+            }}
+          />
+        </DsSearch>
+        {filters}
+      </div>
       {children}
     </div>
   );