feat: Config Policies UI, Workspaces Experiments [CM-521]

webui/react/src/components/ConfigPolicies.tsx

@@ -3,28 +3,74 @@ import Button from 'hew/Button';
 import CodeEditor from 'hew/CodeEditor';
 import Column from 'hew/Column';
 import Form, { hasErrors } from 'hew/Form';
+import Pivot, { PivotProps } from 'hew/Pivot';
 import Row from 'hew/Row';
 import Spinner from 'hew/Spinner';
 import { useToast } from 'hew/Toast';
 import useConfirm from 'hew/useConfirm';
 import { Loadable, NotLoaded } from 'hew/utils/loadable';
 import yaml from 'js-yaml';
+import { isEmpty } from 'lodash';
 import { useState } from 'react';
 
 import { useAsync } from 'hooks/useAsync';
 import usePermissions from 'hooks/usePermissions';
-import { getWorkspaceConfigPolicies, updateWorkspaceConfigPolicies } from 'services/api';
+import {
+  deleteWorkspaceConfigPolicies,
+  getWorkspaceConfigPolicies,
+  updateWorkspaceConfigPolicies,
+} from 'services/api';
 import handleError from 'utils/error';
 
 interface Props {
   workspaceId?: number;
 }
 
+type ConfigPoliciesType = 'experiments' | 'tasks';
+
+interface ConfigPoliciesValues {
+  label: string;
+  workloadType: 'NTSC' | 'EXPERIMENT';
+}
+
+const ConfigPoliciesValues: Record<ConfigPoliciesType, ConfigPoliciesValues> = {
+  experiments: {
+    label: 'Experiments',
+    workloadType: 'EXPERIMENT',
+  },
+  tasks: {
+    label: 'Tasks',
+    workloadType: 'NTSC',
+  },
+};
+
+interface TabProps {
+  workspaceId?: number;
+  type: ConfigPoliciesType;
+}
+
 type FormInputs = {
-  task: string;
+  configPolicies: string;
 };
 
 const ConfigPolicies: React.FC<Props> = ({ workspaceId }: Props) => {
+  const tabItems: PivotProps['items'] = [
+    {
+      children: <ConfigPoliciesTab type="experiments" workspaceId={workspaceId} />,
+      key: 'experiments',
+      label: ConfigPoliciesValues.experiments.label,
+    },
+    {
+      children: <ConfigPoliciesTab type="tasks" workspaceId={workspaceId} />,
+      key: 'tasks',
+      label: ConfigPoliciesValues.tasks.label,
+    },
+  ];
+
+  return <Pivot items={tabItems} type="secondary" />;
+};
+
+const ConfigPoliciesTab: React.FC<TabProps> = ({ workspaceId, type }: TabProps) => {
   const confirm = useConfirm();
   const { openToast } = useToast();
   const { canModifyWorkspaceConfigPolicies, loading: rbacLoading } = usePermissions();
@@ -34,18 +80,32 @@ const ConfigPolicies: React.FC<Props> = ({ workspaceId }: Props) => {
 
   const APPLY_MESSAGE = "You're about to apply these config policies to this workspace.";
   const VIEW_MESSAGE = 'An admin applied these config policies to this workspace.';
+  const CONFIRMATION_MESSAGE = 'Config policies updated';
 
   const updatePolicies = async () => {
     if (workspaceId) {
-      try {
-        await updateWorkspaceConfigPolicies({
-          configPolicies: form.getFieldValue('task'),
-          workloadType: 'NTSC',
-          workspaceId,
-        });
-        openToast({ title: 'Config policies updated' });
-      } catch (error) {
-        handleError(error);
+      const configPolicies = form.getFieldValue('configPolicies');
+      if (configPolicies.length) {
+        try {
+          await updateWorkspaceConfigPolicies({
+            configPolicies,
+            workloadType: ConfigPoliciesValues[type].workloadType,
+            workspaceId,
+          });
+          openToast({ title: CONFIRMATION_MESSAGE });
+        } catch (error) {
+          handleError(error);
+        }
+      } else {
+        try {
+          await deleteWorkspaceConfigPolicies({
+            workloadType: ConfigPoliciesValues[type].workloadType,
+            workspaceId,
+          });
+          openToast({ title: CONFIRMATION_MESSAGE });
+        } catch (error) {
+          handleError(error);
+        }
       }
     }
   };
@@ -69,21 +129,24 @@ const ConfigPolicies: React.FC<Props> = ({ workspaceId }: Props) => {
     });
   };
 
-  const loadableTaskConfigPolicies: Loadable<string | undefined> = useAsync(async () => {
+  const loadableConfigPolicies: Loadable<string | undefined> = useAsync(async () => {
     if (workspaceId) {
       const response = await getWorkspaceConfigPolicies({
-        workloadType: 'NTSC',
+        workloadType: ConfigPoliciesValues[type].workloadType,
         workspaceId,
       });
+      if (isEmpty(response.configPolicies)) return undefined;
       return response.configPolicies;
     }
     return NotLoaded;
-  }, [workspaceId]);
+  }, [workspaceId, type]);
 
-  const initialTaskYAML = yaml.dump(loadableTaskConfigPolicies.getOrElse(undefined));
+  const initialConfigPoliciesYAML = yaml.dump(loadableConfigPolicies.getOrElse(undefined));
 
   const handleChange = () => {
-    setDisabled(hasErrors(form) || form.getFieldValue('task') === initialTaskYAML);
+    setDisabled(
+      hasErrors(form) || form.getFieldValue('configPolicies') === initialConfigPoliciesYAML,
+    );
   };
 
   if (rbacLoading) return <Spinner spinning />;
@@ -111,7 +174,7 @@ const ConfigPolicies: React.FC<Props> = ({ workspaceId }: Props) => {
         <div style={{ width: '100%' }}>
           <Form form={form} onFieldsChange={handleChange}>
             <Form.Item
-              name="task"
+              name="configPolicies"
               rules={[
                 {
                   validator: (_, value) => {
@@ -129,8 +192,9 @@ const ConfigPolicies: React.FC<Props> = ({ workspaceId }: Props) => {
                 },
               ]}>
               <CodeEditor
-                file={initialTaskYAML}
-                files={[{ key: 'task', title: 'Task Config Policies' }]}
+                file={initialConfigPoliciesYAML}
+                files={[{ key: type, title: `${type}-config-policies.yaml` }]}
+                readonly={!canModifyWorkspaceConfigPolicies}
                 onError={(error) => {
                   handleError(error);
                 }}

webui/react/src/services/api.ts

@@ -1006,3 +1006,9 @@ export const updateWorkspaceConfigPolicies = generateDetApi<
   Api.V1PutWorkspaceConfigPoliciesResponse,
   Api.V1PutWorkspaceConfigPoliciesResponse
 >(Config.updateWorkspaceConfigPolicies);
+
+export const deleteWorkspaceConfigPolicies = generateDetApi<
+  Service.DeleteWorkspaceConfigPolicies,
+  Api.V1DeleteWorkspaceConfigPoliciesResponse,
+  Api.V1DeleteWorkspaceConfigPoliciesResponse
+>(Config.deleteWorkspaceConfigPolicies);

webui/react/src/services/apiConfig.ts

@@ -2192,6 +2192,17 @@ export const getWorkspaceConfigPolicies: DetApi<
     detApi.Alpha.getWorkspaceConfigPolicies(params.workspaceId, params.workloadType, options),
 };
 
+export const deleteWorkspaceConfigPolicies: DetApi<
+  Service.DeleteWorkspaceConfigPolicies,
+  Api.V1DeleteWorkspaceConfigPoliciesResponse,
+  Api.V1DeleteWorkspaceConfigPoliciesResponse
+> = {
+  name: 'deleteWorkspaceConfigPolicies',
+  postProcess: identity,
+  request: (params: Service.DeleteWorkspaceConfigPolicies, options) =>
+    detApi.Alpha.deleteWorkspaceConfigPolicies(params.workspaceId, params.workloadType, options),
+};
+
 export const updateWorkspaceConfigPolicies: DetApi<
   Service.UpdateWorkspaceConfigPolicies,
   Api.V1PutWorkspaceConfigPoliciesResponse,

webui/react/src/services/types.ts

@@ -574,3 +574,8 @@ export interface UpdateWorkspaceConfigPolicies {
   workloadType: 'NTSC' | 'EXPERIMENT';
   configPolicies: string;
 }
+
+export interface DeleteWorkspaceConfigPolicies {
+  workspaceId: number;
+  workloadType: 'NTSC' | 'EXPERIMENT';
+}