Model Details: add editable properties section, set up API patches fo…

…r description, labels and properties

Signed-off-by: Mike Turley <[email protected]>

frontend/src/__mocks__/mockRegisteredModelsList.ts

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { RegisteredModelList } from '~/concepts/modelRegistry/types';
+import { ModelRegistryMetadataType, RegisteredModelList } from '~/concepts/modelRegistry/types';
 import { mockRegisteredModel } from './mockRegisteredModel';
 
 export const mockRegisteredModelList = ({
@@ -14,27 +14,27 @@ export const mockRegisteredModelList = ({
         'A machine learning model trained to detect fraudulent transactions in financial data',
       customProperties: {
         Financial: {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: 'non-empty',
         },
         'Financial data': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Fraud detection': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Test label': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Machine learning': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Next data to be overflow': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
       },
@@ -43,23 +43,23 @@ export const mockRegisteredModelList = ({
       name: 'Credit Scoring',
       customProperties: {
         'Credit Score Predictor': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Creditworthiness scoring system': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Default Risk Analyzer': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Portfolio Management': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Risk Assessment': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
       },
@@ -70,44 +70,44 @@ export const mockRegisteredModelList = ({
         'A machine learning model trained to detect fraudulent transactions in financial data',
       customProperties: {
         'Testing label': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         Financial: {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: 'non-empty',
         },
         'Financial data': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Fraud detection': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Long label data to be truncated abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc':
           {
-            metadataType: 'MetadataStringValue',
+            metadataType: ModelRegistryMetadataType.STRING,
             string_value: '',
           },
         'Machine learning': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Next data to be overflow': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Label x': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Label y': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
         'Label z': {
-          metadataType: 'MetadataStringValue',
+          metadataType: ModelRegistryMetadataType.STRING,
           string_value: '',
         },
       },

frontend/src/components/DashboardDescriptionListGroup.tsx

@@ -69,7 +69,7 @@ const DashboardDescriptionListGroup: React.FC<DashboardDescriptionListGroupProps
                     </ActionListItem>
                     <ActionListItem>
                       <Button
-                        data-testid={`discard-edit-button-${title} `}
+                        data-testid={`discard-edit-button-${title}`}
                         aria-label={`Discard edits to ${title} `}
                         variant="plain"
                         onClick={onDiscardEditsClick}

frontend/src/components/EditableLabelsDescriptionListGroup.tsx

@@ -20,14 +20,16 @@ type EditableTextDescriptionListGroupProps = Partial<
   Pick<DashboardDescriptionListGroupProps, 'title' | 'contentWhenEmpty'>
 > & {
   labels: string[];
-  saveEditedLabels: (labels: string[]) => Promise<void>;
+  saveEditedLabels: (labels: string[]) => Promise<unknown>;
+  allExistingKeys?: string[];
 };
 
 const EditableLabelsDescriptionListGroup: React.FC<EditableTextDescriptionListGroupProps> = ({
   title = 'Labels',
   contentWhenEmpty = 'No labels',
   labels,
   saveEditedLabels,
+  allExistingKeys = labels,
 }) => {
   const [isEditing, setIsEditing] = React.useState(false);
   const [unsavedLabels, setUnsavedLabels] = React.useState(labels);
@@ -57,7 +59,12 @@ const EditableLabelsDescriptionListGroup: React.FC<EditableTextDescriptionListGr
   const [isAddLabelModalOpen, setIsAddLabelModalOpen] = React.useState(false);
   const [addLabelInputValue, setAddLabelInputValue] = React.useState('');
   const addLabelInputRef = React.useRef<HTMLInputElement>(null);
-  const addLabelInputTooLong = addLabelInputValue.length > 63;
+  const addLabelValidationError =
+    addLabelInputValue.length > 63
+      ? "Label text can't exceed 63 characters"
+      : allExistingKeys.includes(addLabelInputValue)
+      ? 'Label must not match an existing label or property key'
+      : null;
 
   const toggleAddLabelModal = () => {
     setAddLabelInputValue('');
@@ -68,7 +75,8 @@ const EditableLabelsDescriptionListGroup: React.FC<EditableTextDescriptionListGr
       addLabelInputRef.current.focus();
     }
   }, [isAddLabelModalOpen]);
-  const addLabelModalSubmitDisabled = !addLabelInputValue || addLabelInputTooLong;
+
+  const addLabelModalSubmitDisabled = !addLabelInputValue || !!addLabelValidationError;
   const submitAddLabelModal = (event?: React.FormEvent) => {
     event?.preventDefault();
     if (!addLabelModalSubmitDisabled) {
@@ -172,13 +180,13 @@ const EditableLabelsDescriptionListGroup: React.FC<EditableTextDescriptionListGr
               }
               ref={addLabelInputRef}
               isRequired
-              validated={addLabelInputTooLong ? 'error' : 'default'}
+              validated={addLabelValidationError ? 'error' : 'default'}
             />
-            {addLabelInputTooLong && (
+            {addLabelValidationError && (
               <FormHelperText>
                 <HelperText>
                   <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
-                    Label text can&apos;t exceed 63 characters
+                    {addLabelValidationError}
                   </HelperTextItem>
                 </HelperText>
               </FormHelperText>

frontend/src/components/EditableTextDescriptionListGroup.tsx

@@ -9,7 +9,7 @@ type EditableTextDescriptionListGroupProps = Pick<
   'title' | 'contentWhenEmpty'
 > & {
   value: string;
-  saveEditedValue: (value: string) => Promise<void>;
+  saveEditedValue: (value: string) => Promise<unknown>;
 };
 
 const EditableTextDescriptionListGroup: React.FC<EditableTextDescriptionListGroupProps> = ({

frontend/src/concepts/modelRegistry/types.ts

@@ -35,14 +35,65 @@ export enum ModelArtifactState {
   REFERENCE = 'REFERENCE',
 }
 
+export enum ModelRegistryMetadataType {
+  INT = 'MetadataIntValue',
+  DOUBLE = 'MetadataDoubleValue',
+  STRING = 'MetadataStringValue',
+  STRUCT = 'MetadataStructValue',
+  PROTO = 'MetadataProtoValue',
+  BOOL = 'MetadataBoolValue',
+}
+
+export type ModelRegistryCustomPropertyInt = {
+  metadataType: ModelRegistryMetadataType.INT;
+  int_value: string; // int64-formatted string
+};
+
+export type ModelRegistryCustomPropertyDouble = {
+  metadataType: ModelRegistryMetadataType.DOUBLE;
+  double_value: number;
+};
+
+export type ModelRegistryCustomPropertyString = {
+  metadataType: ModelRegistryMetadataType.STRING;
+  string_value: string;
+};
+
+export type ModelRegistryCustomPropertyStruct = {
+  metadataType: ModelRegistryMetadataType.STRUCT;
+  struct_value: string; // Base64 encoded bytes for struct value
+};
+
+export type ModelRegistryCustomPropertyProto = {
+  metadataType: ModelRegistryMetadataType.PROTO;
+  type: string; // url describing proto value
+  proto_value: string; // Base64 encoded bytes for proto value
+};
+
+export type ModelRegistryCustomPropertyBool = {
+  metadataType: ModelRegistryMetadataType.BOOL;
+  bool_value: boolean;
+};
+
+export type ModelRegistryCustomProperty =
+  | ModelRegistryCustomPropertyInt
+  | ModelRegistryCustomPropertyDouble
+  | ModelRegistryCustomPropertyString
+  | ModelRegistryCustomPropertyStruct
+  | ModelRegistryCustomPropertyProto
+  | ModelRegistryCustomPropertyBool;
+
+export type ModelRegistryCustomProperties = Record<string, ModelRegistryCustomProperty>;
+export type ModelRegistryStringCustomProperties = Record<string, ModelRegistryCustomPropertyString>;
+
 export type ModelRegistryBase = {
   id: string;
   name: string;
   externalID?: string;
   description?: string;
   createTimeSinceEpoch?: string;
   lastUpdateTimeSinceEpoch: string;
-  customProperties: Record<string, Record<string, string>>;
+  customProperties: ModelRegistryCustomProperties;
 };
 
 export type ModelArtifact = ModelRegistryBase & {