CORE-527 Support lookup ws by name (#5337)

Author: dvoet

src/libs/ajax/workspaces/Workspaces.ts

@@ -96,6 +96,11 @@ export const Workspaces = (signal?: AbortSignal) => ({
     return res.json();
   },
 
+  adminGetId: async (namespace: string, name: string): Promise<string> => {
+    const res = await fetchRawls(`admin/workspaces/${namespace}/${name}/id`, _.merge(authOpts(), { signal }));
+    return res.json();
+  },
+
   workspaceV2: (namespace: string, name: string) => {
     const root = `workspaces/v2/${namespace}/${name}`;
 

src/support/LookupSummaryAndPolicies.tsx

@@ -3,6 +3,7 @@ import _ from 'lodash/fp';
 import React, { useState } from 'react';
 import { TextInput } from 'src/components/input';
 import colors from 'src/libs/colors';
+import { reportError } from 'src/libs/error';
 import * as Nav from 'src/libs/nav';
 import { ResourcePolicies } from 'src/support/ResourcePolicies';
 import { ResourceTypeSummaryProps, supportResources } from 'src/support/SupportResourceType';
@@ -11,23 +12,46 @@ import { SupportSummary } from 'src/support/SupportSummary';
 export const LookupSummaryAndPolicies = (props: ResourceTypeSummaryProps) => {
   const { query } = Nav.useRoute();
   const [resourceId, setResourceId] = useState<string>(props.fqResourceId.resourceId);
+  const [lookupValue, setLookupValue] = useState<string>('');
 
-  function submit() {
-    Nav.updateSearch({ ...query, resourceId: resourceId || undefined });
+  function submit(overrideResourceId?: string) {
+    Nav.updateSearch({ ...query, resourceId: overrideResourceId || resourceId || undefined });
   }
 
   // event hook to clear the resourceId when resourceType changes
   React.useEffect(() => {
     setResourceId('');
+    setLookupValue('');
   }, [props.fqResourceId.resourceTypeName]);
 
   // the resourceType may be configured to skip policy retrieval/display
   const displayPolicies = !_.find((res) => res.resourceType === props.fqResourceId.resourceTypeName, supportResources)
     ?.skipPolicies;
 
+  // Get the current resource type configuration
+  const currentResourceType = _.find(
+    (res) => res.resourceType === props.fqResourceId.resourceTypeName,
+    supportResources
+  );
+
+  // Handle lookup when the resource type has a lookupResourceId function
+  const handleLookup = async () => {
+    if (currentResourceType?.lookupResourceIdFn && lookupValue) {
+      try {
+        const result = await currentResourceType.lookupResourceIdFn(lookupValue);
+        setResourceId(result.resourceId);
+        // specify the resourceId to avoid waiting for state to update
+        submit(result.resourceId);
+      } catch (error: any) {
+        const errorMessage = error.status === 404 ? `${lookupValue} not found` : `Error looking up id: ${error}`;
+        await reportError(errorMessage);
+      }
+    }
+  };
+
   return (
     <>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1rem' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '1rem' }}>
         <div
           style={{
             color: colors.dark(),
@@ -36,24 +60,53 @@ export const LookupSummaryAndPolicies = (props: ResourceTypeSummaryProps) => {
             display: 'flex',
             alignItems: 'center',
             marginLeft: '1rem',
+            marginBottom: '0.5rem',
           }}
         >
           {props.displayName}
         </div>
-        <TextInput
-          style={{ marginRight: '1rem', marginLeft: '1rem' }}
-          placeholder={`Enter ${props.displayName} ID`}
-          onChange={(newResourceId) => {
-            setResourceId(newResourceId);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              submit();
-            }
-          }}
-          value={resourceId}
-        />
-        <ButtonPrimary onClick={() => submit()}>Load</ButtonPrimary>
+
+        {currentResourceType?.lookupResourceIdFn && (
+          <div style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5rem' }}>
+            <TextInput
+              style={{ marginRight: '0.5rem', marginLeft: '1rem', flex: 1 }}
+              placeholder={`Enter ${currentResourceType.lookupResourceIdBoxPlaceholder}`}
+              onChange={setLookupValue}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleLookup();
+                }
+              }}
+              value={lookupValue}
+            />
+            <ButtonPrimary onClick={handleLookup}>
+              Load By {currentResourceType.lookupResourceIdBoxPlaceholder}
+            </ButtonPrimary>
+          </div>
+        )}
+
+        {currentResourceType?.lookupResourceIdFn && (
+          <div style={{ marginRight: '0.5rem', marginLeft: '1rem', flex: 1, marginBottom: '0.5rem' }}>
+            <div style={{ fontWeight: 500 }}>or</div>
+          </div>
+        )}
+
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <TextInput
+            style={{ marginRight: '0.5rem', marginLeft: '1rem', flex: 1 }}
+            placeholder={`Enter ${props.displayName} ID`}
+            onChange={(newResourceId) => {
+              setResourceId(newResourceId);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                submit();
+              }
+            }}
+            value={resourceId}
+          />
+          <ButtonPrimary onClick={() => submit()}>Load By ID</ButtonPrimary>
+        </div>
       </div>
       {!!props.loadSupportSummaryFn && <SupportSummary {...props} />}
       {displayPolicies && <ResourcePolicies {...props} />}

src/support/SupportResourceType.ts

@@ -18,6 +18,8 @@ export interface SupportResourceType {
   resourceType: string;
   loadSupportSummaryFn: ((id: FullyQualifiedResourceId) => Promise<SupportSummary>) | undefined;
   skipPolicies?: boolean;
+  lookupResourceIdFn?: (value: string) => Promise<FullyQualifiedResourceId>;
+  lookupResourceIdBoxPlaceholder?: string;
 }
 
 // Define the supported resources, add your own here
@@ -31,6 +33,16 @@ export const supportResources: SupportResourceType[] = [
     displayName: 'Workspace',
     resourceType: 'workspace',
     loadSupportSummaryFn: (id: FullyQualifiedResourceId) => Workspaces().adminGetById(id.resourceId),
+    lookupResourceIdFn: async (namespaceSlashName: string) => {
+      const nameParts = namespaceSlashName.split('/');
+      if (nameParts.length !== 2) {
+        return Promise.reject('enter namespace and name separated by a /');
+      }
+      const id = await Workspaces().adminGetId(nameParts[0], nameParts[1]);
+      const fqResourceId: FullyQualifiedResourceId = { resourceId: id, resourceTypeName: 'workspace' };
+      return fqResourceId;
+    },
+    lookupResourceIdBoxPlaceholder: 'Namespace/Name',
   },
   {
     displayName: 'Billing Project',