Add connection type to model serving create modal (#3356)

* Add connection type to model serving create modal * Jest tests * Fixes * Show types with missing required fields, but set them required * Add connection type to model serving create modal
opendatahub-io · Oct 25, 2024 · 05e394b · 05e394b
1 parent c96cc39
commit 05e394b
Show file tree

Hide file tree

Showing 10 changed files with 719 additions and 74 deletions.
diff --git a/frontend/src/concepts/connectionTypes/ConnectionDetailsHelperText.tsx b/frontend/src/concepts/connectionTypes/ConnectionDetailsHelperText.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  HelperText,
+  HelperTextItem,
+  LabelGroup,
+  Popover,
+} from '@patternfly/react-core';
+import { getDescriptionFromK8sResource, getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
+import TruncatedText from '~/components/TruncatedText';
+import { Connection, ConnectionTypeConfigMapObj } from './types';
+import CategoryLabel from './CategoryLabel';
+
+type Props = {
+  connection: Connection;
+  connectionType?: ConnectionTypeConfigMapObj;
+};
+
+export const ConnectionDetailsHelperText: React.FC<Props> = ({ connection, connectionType }) => {
+  const displayName = getDisplayNameFromK8sResource(connection);
+  const description = getDescriptionFromK8sResource(connection);
+
+  return (
+    <HelperText>
+      {description && (
+        <HelperTextItem>
+          <TruncatedText maxLines={2} content={description} />
+        </HelperTextItem>
+      )}
+      <HelperTextItem>
+        <Popover
+          headerContent="Connection details"
+          bodyContent={
+            <DescriptionList>
+              <DescriptionListGroup>
+                <DescriptionListTerm>Connection name</DescriptionListTerm>
+                <DescriptionListDescription>{displayName}</DescriptionListDescription>
+              </DescriptionListGroup>
+              {description ? (
+                <DescriptionListGroup>
+                  <DescriptionListTerm>Connection description</DescriptionListTerm>
+                  <DescriptionListDescription>{description}</DescriptionListDescription>
+                </DescriptionListGroup>
+              ) : undefined}
+              <DescriptionListGroup>
+                <DescriptionListTerm>Type</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {connectionType?.data?.category?.length ? (
+                    <LabelGroup>
+                      {connectionType.data.category.map((category) => (
+                        <CategoryLabel key={category} category={category} />
+                      ))}
+                    </LabelGroup>
+                  ) : (
+                    '-'
+                  )}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            </DescriptionList>
+          }
+        >
+          <Button variant="link" isInline>
+            View connection details
+          </Button>
+        </Popover>
+      </HelperTextItem>
+    </HelperText>
+  );
+};
diff --git a/frontend/src/concepts/connectionTypes/utils.ts b/frontend/src/concepts/connectionTypes/utils.ts
@@ -1,4 +1,4 @@
-import { ProjectKind, SecretKind } from '~/k8sTypes';
+import { SecretKind } from '~/k8sTypes';
 import { translateDisplayNameForK8s } from '~/concepts/k8s/utils';
 import { K8sNameDescriptionFieldData } from '~/concepts/k8s/K8sNameDescriptionField/types';
 import {
@@ -110,10 +110,15 @@ export const fieldNameToEnvVar = (name: string): string => {
 export const ENV_VAR_NAME_REGEX = new RegExp('^[_a-zA-Z][_a-zA-Z0-9]*$');
 export const isValidEnvVar = (name: string): boolean => ENV_VAR_NAME_REGEX.test(name);
 
+export const S3ConnectionTypeKeys = [
+  'AWS_ACCESS_KEY_ID',
+  'AWS_SECRET_ACCESS_KEY',
+  'AWS_S3_ENDPOINT',
+  'AWS_S3_BUCKET',
+];
+
 export const isModelServingCompatible = (envVars: string[]): boolean =>
-  ['AWS_ACCESS_KEY_ID', 'AWS_SECRET_ACCESS_KEY', 'AWS_S3_ENDPOINT', 'AWS_S3_BUCKET'].every(
-    (envVar) => envVars.includes(envVar),
-  );
+  S3ConnectionTypeKeys.every((envVar) => envVars.includes(envVar));
 
 export enum CompatibleTypes {
   ModelServing = 'Model serving',
@@ -145,8 +150,30 @@ export const getDefaultValues = (
   return defaults;
 };
 
+export const withRequiredFields = (
+  connectionType?: ConnectionTypeConfigMapObj,
+  envVars?: string[],
+): ConnectionTypeConfigMapObj | undefined => {
+  if (!connectionType) {
+    return undefined;
+  }
+  const newFields = connectionType.data?.fields?.map((f) => ({
+    ...f,
+    ...(isConnectionTypeDataField(f) && envVars?.includes(f.envVar) && { required: true }),
+  }));
+  return {
+    ...connectionType,
+    data: connectionType.data
+      ? {
+          ...connectionType.data,
+          fields: newFields,
+        }
+      : undefined,
+  };
+};
+
 export const assembleConnectionSecret = (
-  project: ProjectKind,
+  projectName: string,
   connectionTypeName: string,
   nameDesc: K8sNameDescriptionFieldData,
   values: {
@@ -166,7 +193,7 @@ export const assembleConnectionSecret = (
     kind: 'Secret',
     metadata: {
       name: nameDesc.k8sName.value || translateDisplayNameForK8s(nameDesc.name),
-      namespace: project.metadata.name,
+      namespace: projectName,
       labels: {
         'opendatahub.io/dashboard': 'true',
         'opendatahub.io/managed': 'true',