Add Workspace switcher to Referrals page

graphql.schema.json

@@ -4482,6 +4482,18 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "projectGroupId",
+            "description": "Filter to Clients that are eligible for projects in the specified Project Group",
+            "type": {
+              "kind": "SCALAR",
+              "name": "ID",
+              "ofType": null
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "projectType",
             "description": "Filter to Clients that are eligible for the specified Project Types",
@@ -6102,6 +6114,18 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "projectGroupId",
+            "description": null,
+            "type": {
+              "kind": "SCALAR",
+              "name": "ID",
+              "ofType": null
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "projectType",
             "description": null,
@@ -7526,6 +7550,18 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "projectGroupId",
+            "description": "Filter to referrals where the target project belongs to the specified project group",
+            "type": {
+              "kind": "SCALAR",
+              "name": "ID",
+              "ofType": null
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "projectType",
             "description": null,
@@ -12442,6 +12478,18 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "projectGroupId",
+            "description": "Filter to referrals where the target project belongs to the specified project group",
+            "type": {
+              "kind": "SCALAR",
+              "name": "ID",
+              "ofType": null
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "projectType",
             "description": null,
@@ -12788,6 +12836,18 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "projectGroupId",
+            "description": null,
+            "type": {
+              "kind": "SCALAR",
+              "name": "ID",
+              "ofType": null
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "projectType",
             "description": null,
@@ -46980,6 +47040,47 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "workspaces",
+            "description": null,
+            "args": [
+              {
+                "name": "appliesTo",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "ENUM",
+                    "name": "WorkspaceAppliesTo",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "LIST",
+                "name": null,
+                "ofType": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "OBJECT",
+                    "name": "Workspace",
+                    "ofType": null
+                  }
+                }
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -58228,6 +58329,100 @@
         ],
         "possibleTypes": null
       },
+      {
+        "kind": "OBJECT",
+        "name": "Workspace",
+        "description": null,
+        "isOneOf": null,
+        "fields": [
+          {
+            "name": "id",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "ID",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "name",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "projectGroupId",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "ID",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "slug",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "inputFields": null,
+        "interfaces": [],
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "ENUM",
+        "name": "WorkspaceAppliesTo",
+        "description": null,
+        "isOneOf": null,
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": [
+          {
+            "name": "CE_REFERRALS",
+            "description": "CE referrals workspace switcher",
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "YouthEducationStatus",

src/api/operations/workspace.fragments.graphql

@@ -0,0 +1,6 @@
+fragment WorkspaceFields on Workspace {
+  id
+  slug
+  name
+  projectGroupId
+}

src/api/operations/workspace.queries.graphql

@@ -0,0 +1,5 @@
+query GetWorkspaces($appliesTo: WorkspaceAppliesTo!) {
+  workspaces(appliesTo: $appliesTo) {
+    ...WorkspaceFields
+  }
+}

src/components/elements/input/WorkspaceSelect.tsx

@@ -0,0 +1,84 @@
+import { InputAdornment } from '@mui/material';
+import { Box } from '@mui/system';
+import React, { useMemo } from 'react';
+
+import GenericSelect from '@/components/elements/input/GenericSelect';
+import { PickListOption, WorkspaceFieldsFragment } from '@/types/gqlTypes';
+
+const ALL_WORKSPACES_OPTION: PickListOption = {
+  code: 'all',
+  label: 'All Projects',
+};
+
+// Circular input adornment to use as `startAdornment` in the Select input component.
+// This is to bring visual attention to the workspace selector on the page, and does not have any functional purpose.
+// Move to a shared component/variant (e.g. CircularAdornedInput) if needed elsewhere.
+const CircularInputAdornment: React.FC = () => (
+  <InputAdornment position='start' aria-hidden='true' sx={{ ml: 1, mr: 0 }}>
+    <Box
+      component='span'
+      sx={{
+        width: 12,
+        height: 12,
+        borderRadius: '50%',
+        bgcolor: 'primary.main',
+      }}
+    />
+  </InputAdornment>
+);
+
+interface Props {
+  selectedWorkspace?: WorkspaceFieldsFragment;
+  workspaces: WorkspaceFieldsFragment[];
+  onChange: (workspaceSlug: string | null) => void;
+}
+
+const WorkspaceSelect: React.FC<Props> = ({
+  selectedWorkspace,
+  workspaces,
+  onChange,
+}) => {
+  const workspaceOptions = useMemo(
+    () => [
+      ALL_WORKSPACES_OPTION,
+      ...workspaces.map((w) => ({
+        code: w.slug,
+        label: w.name,
+      })),
+    ],
+    [workspaces]
+  );
+  const selectedWorkspaceOption =
+    workspaceOptions.find((w) => w.code === selectedWorkspace?.slug) ||
+    ALL_WORKSPACES_OPTION;
+
+  return (
+    <GenericSelect<PickListOption, false, false>
+      size='small'
+      label='Workspace'
+      ariaLabel='Workspace'
+      options={workspaceOptions}
+      value={selectedWorkspaceOption}
+      getOptionLabel={(option) => option.label || option.code}
+      isOptionEqualToValue={(option, value) => option.code === value.code}
+      blurOnSelect
+      disableClearable
+      onChange={(_event, value) =>
+        onChange(
+          value?.code === ALL_WORKSPACES_OPTION.code
+            ? null
+            : value?.code || null
+        )
+      }
+      sx={{
+        minWidth: 240,
+        '& .MuiInputBase-input': { fontWeight: 600, color: 'primary.dark' },
+      }}
+      textInputProps={{
+        InputProps: { startAdornment: <CircularInputAdornment /> },
+      }}
+    />
+  );
+};
+
+export default WorkspaceSelect;

src/hooks/useWorkspaceSelector.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+
+import WorkspaceSelect from '@/components/elements/input/WorkspaceSelect';
+import useSearchParamsState from '@/hooks/useSearchParamState';
+import { useGetWorkspacesQuery, WorkspaceAppliesTo } from '@/types/gqlTypes';
+
+const useWorkspaceSelector = (appliesTo: WorkspaceAppliesTo) => {
+  // Fetch all workspaces configured for this usage (WorkspaceAppliesTo)
+  const { data, loading, error } = useGetWorkspacesQuery({
+    variables: { appliesTo },
+  });
+
+  // Slug of currently selected workspace, stored in URL Search Params
+  const [{ workspace }, setWorkspaceParams] = useSearchParamsState({
+    paramsDefinition: {
+      workspace: { type: 'string', default: null },
+    },
+  });
+
+  const workspaces = useMemo(() => data?.workspaces || [], [data]);
+
+  const selectedWorkspace = useMemo(
+    () => workspaces.find((w) => w.slug === workspace),
+    [workspace, workspaces]
+  );
+
+  const selector =
+    workspaces.length > 0 ? (
+      <WorkspaceSelect
+        selectedWorkspace={selectedWorkspace}
+        workspaces={workspaces}
+        onChange={(workspaceSlug) => {
+          setWorkspaceParams({ workspace: workspaceSlug });
+        }}
+      />
+    ) : null;
+
+  return {
+    // All workspaces configured for the current usage (WorkspaceAppliesTo)
+    workspaces,
+    // The workspace select component (if workspaces exist)
+    selector,
+    // The project group id of the selected workspace
+    selectedProjectGroupId: selectedWorkspace?.projectGroupId,
+    loading,
+    error,
+  };
+};
+
+export default useWorkspaceSelector;