hide search input for non-admins

Author: katieperry4

packages/maas/frontend/src/app/pages/api-keys/AllApiKeysPage.tsx

@@ -27,8 +27,6 @@ const AllApiKeysPage: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const [revokeApiKey, setRevokeApiKey] = React.useState<APIKey | undefined>(undefined);
 
-  // TODO: use this for hiding the username search for non-admins and for allowing admins to see all keys
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isMaasAdmin] = useIsMaasAdmin();
 
   const [filterData, setFilterData] = React.useState<ApiKeyFilterDataType>(initialApiKeyFilterData);
@@ -157,6 +155,7 @@ const AllApiKeysPage: React.FC = () => {
             isFetching={isFetching}
             toolbarContent={
               <ApiKeysToolbar
+                isMaasAdmin={isMaasAdmin}
                 setIsModalOpen={setIsModalOpen}
                 filterData={filterData}
                 localUsername={localUsername}

packages/maas/frontend/src/app/pages/api-keys/allKeys/ApiKeysToolbar.tsx

@@ -29,6 +29,7 @@ type ApiKeysToolbarProps = {
   activeApiKeys: APIKey[];
   refresh: () => void;
   onClearFilters: () => void;
+  isMaasAdmin: boolean;
 };
 
 const ApiKeysToolbar: React.FC<ApiKeysToolbarProps> = ({
@@ -42,6 +43,7 @@ const ApiKeysToolbar: React.FC<ApiKeysToolbarProps> = ({
   activeApiKeys,
   refresh,
   onClearFilters,
+  isMaasAdmin,
 }) => {
   const [isStatusSelectOpen, setIsStatusSelectOpen] = React.useState(false);
 
@@ -109,34 +111,36 @@ const ApiKeysToolbar: React.FC<ApiKeysToolbarProps> = ({
                 </SelectList>
               </Select>
             </ToolbarFilter>
-            <ToolbarFilter
-              labels={filterData.username ? [filterData.username] : []}
-              deleteLabel={() => {
-                setLocalUsername('');
-                onUsernameChange('');
-              }}
-              categoryName="Username"
-            >
-              <Tooltip
-                content="Please enter the full username"
-                data-testid="username-filter-tooltip"
+            {isMaasAdmin && (
+              <ToolbarFilter
+                labels={filterData.username ? [filterData.username] : []}
+                deleteLabel={() => {
+                  setLocalUsername('');
+                  onUsernameChange('');
+                }}
+                categoryName="Username"
               >
-                <SearchInput
-                  aria-label="Filter by username"
-                  placeholder="Filter by username"
-                  data-testid="username-filter-input"
-                  value={localUsername}
-                  onChange={(_event, value) => {
-                    setLocalUsername(value);
-                  }}
-                  onSearch={(_event, value) => onUsernameChange(value)}
-                  onClear={() => {
-                    setLocalUsername('');
-                    onUsernameChange('');
-                  }}
-                />
-              </Tooltip>
-            </ToolbarFilter>
+                <Tooltip
+                  content="Please enter the full username"
+                  data-testid="username-filter-tooltip"
+                >
+                  <SearchInput
+                    aria-label="Filter by username"
+                    placeholder="Filter by username"
+                    data-testid="username-filter-input"
+                    value={localUsername}
+                    onChange={(_event, value) => {
+                      setLocalUsername(value);
+                    }}
+                    onSearch={(_event, value) => onUsernameChange(value)}
+                    onClear={() => {
+                      setLocalUsername('');
+                      onUsernameChange('');
+                    }}
+                  />
+                </Tooltip>
+              </ToolbarFilter>
+            )}
           </ToolbarGroup>
         </ToolbarToggleGroup>
         <ToolbarGroup>