Support filtering to own/all servers if user is an admin

Author: DaneEveritt

resources/scripts/api/getServers.ts

@@ -1,9 +1,16 @@
 import { rawDataToServerObject, Server } from '@/api/server/getServer';
 import http, { getPaginationSet, PaginatedResult } from '@/api/http';
 
-export default (query?: string): Promise<PaginatedResult<Server>> => {
+export default (query?: string, includeAdmin?: boolean): Promise<PaginatedResult<Server>> => {
     return new Promise((resolve, reject) => {
-        http.get(`/api/client`, { params: { include: [ 'allocation' ], query } })
+        http.get(`/api/client`, {
+            params: {
+                include: [ 'allocation' ],
+                // eslint-disable-next-line @typescript-eslint/camelcase
+                filter: includeAdmin ? 'all' : undefined,
+                query,
+            },
+        })
             .then(({ data }) => resolve({
                 items: (data.data || []).map((datum: any) => rawDataToServerObject(datum.attributes)),
                 pagination: getPaginationSet(data.meta.pagination),

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -4,30 +4,63 @@ import getServers from '@/api/getServers';
 import ServerRow from '@/components/dashboard/ServerRow';
 import Spinner from '@/components/elements/Spinner';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import useFlash from '@/plugins/useFlash';
+import { httpErrorToHuman } from '@/api/http';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { useStoreState } from 'easy-peasy';
+import { usePersistedState } from '@/plugins/usePersistedState';
+import Switch from '@/components/elements/Switch';
 
 export default () => {
-    const [ servers, setServers ] = useState<null | Server[]>(null);
+    const { addError, clearFlashes } = useFlash();
+    const [ servers, setServers ] = useState<Server[]>([]);
+    const [ loading, setLoading ] = useState(true);
+    const { rootAdmin } = useStoreState(state => state.user.data!);
+    const [ showAdmin, setShowAdmin ] = usePersistedState('show_all_servers', false);
 
-    const loadServers = () => getServers().then(data => setServers(data.items));
+    const loadServers = () => {
+        clearFlashes();
+        setLoading(true);
+
+        getServers(undefined, showAdmin)
+            .then(data => setServers(data.items))
+            .catch(error => {
+                console.error(error);
+                addError({ message: httpErrorToHuman(error) });
+            })
+            .then(() => setLoading(false));
+    };
 
     useEffect(() => {
         loadServers();
-    }, []);
-
-    if (servers === null) {
-        return <Spinner size={'large'} centered={true}/>;
-    }
+    }, [ showAdmin ]);
 
     return (
         <PageContentBlock>
-            {servers.length > 0 ?
-                servers.map(server => (
-                    <ServerRow key={server.uuid} server={server} className={'mt-2'}/>
-                ))
-                :
-                <p className={'text-center text-sm text-neutral-400'}>
-                    It looks like you have no servers.
+            <FlashMessageRender className={'mb-4'}/>
+            {rootAdmin &&
+            <div className={'mb-2 flex justify-end items-center'}>
+                <p className={'uppercase text-xs text-neutral-400 mr-2'}>
+                    {showAdmin ? 'Showing all servers' : 'Showing your servers'}
                 </p>
+                <Switch
+                    name={'show_all_servers'}
+                    defaultChecked={showAdmin}
+                    onChange={() => setShowAdmin(s => !s)}
+                />
+            </div>
+            }
+            {loading ?
+                <Spinner centered={true} size={'large'}/>
+                :
+                servers.length > 0 ?
+                    servers.map(server => (
+                        <ServerRow key={server.uuid} server={server} className={'mt-2'}/>
+                    ))
+                    :
+                    <p className={'text-center text-sm text-neutral-400'}>
+                        There are no servers associated with your account.
+                    </p>
             }
         </PageContentBlock>
     );

resources/scripts/components/elements/Switch.tsx

@@ -36,7 +36,7 @@ const ToggleContainer = styled.div`
 
 export interface SwitchProps {
     name: string;
-    label: string;
+    label?: string;
     description?: string;
     defaultChecked?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -48,7 +48,7 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
 
     return (
         <div className={'flex items-center'}>
-            <ToggleContainer className={'mr-4 flex-none'}>
+            <ToggleContainer className={'flex-none'}>
                 {children
                 || <input
                     id={uuid}
@@ -60,17 +60,21 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
                 }
                 <label htmlFor={uuid}/>
             </ToggleContainer>
-            <div className={'w-full'}>
+            {(label || description) &&
+            <div className={'ml-4 w-full'}>
+                {label &&
                 <label
                     className={classNames('input-dark-label cursor-pointer', { 'mb-0': !!description })}
                     htmlFor={uuid}
                 >{label}</label>
+                }
                 {description &&
                 <p className={'input-help'}>
                     {description}
                 </p>
                 }
             </div>
+            }
         </div>
     );
 };

resources/scripts/plugins/usePersistedState.ts

@@ -0,0 +1,23 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+export function usePersistedState<S = undefined> (key: string, defaultValue: S): [S | undefined, Dispatch<SetStateAction<S | undefined>>] {
+    const [state, setState] = useState(
+        () => {
+            try {
+                const item = localStorage.getItem(key);
+
+                return JSON.parse(item || (String(defaultValue)));
+            } catch (e) {
+                console.warn('Failed to retrieve persisted value from store.', e);
+
+                return defaultValue;
+            }
+        }
+    );
+
+    useEffect(() => {
+        localStorage.setItem(key, JSON.stringify(state))
+    }, [key, state]);
+
+    return [ state, setState ];
+}