Show conn type name in options and details (opendatahub-io#3390)

DaoDaoNoCode · Oct 28, 2024 · 7e65faf · 7e65faf
1 parent 62d93ff
commit 7e65faf
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 22 deletions.
diff --git a/frontend/src/concepts/connectionTypes/ConnectionDetailsHelperText.tsx b/frontend/src/concepts/connectionTypes/ConnectionDetailsHelperText.tsx
@@ -7,13 +7,12 @@ import {
   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';
+import { getConnectionTypeDisplayName } from './utils';
 
 type Props = {
   connection: Connection;
@@ -23,6 +22,7 @@ type Props = {
 export const ConnectionDetailsHelperText: React.FC<Props> = ({ connection, connectionType }) => {
   const displayName = getDisplayNameFromK8sResource(connection);
   const description = getDescriptionFromK8sResource(connection);
+  const connectionTypeName = getConnectionTypeDisplayName(connection, connectionType);
 
   return (
     <HelperText>
@@ -48,17 +48,7 @@ export const ConnectionDetailsHelperText: React.FC<Props> = ({ connection, conne
               ) : undefined}
               <DescriptionListGroup>
                 <DescriptionListTerm>Type</DescriptionListTerm>
-                <DescriptionListDescription>
-                  {connectionType?.data?.category?.length ? (
-                    <LabelGroup>
-                      {connectionType.data.category.map((category) => (
-                        <CategoryLabel key={category} category={category} />
-                      ))}
-                    </LabelGroup>
-                  ) : (
-                    '-'
-                  )}
-                </DescriptionListDescription>
+                <DescriptionListDescription>{connectionTypeName}</DescriptionListDescription>
               </DescriptionListGroup>
             </DescriptionList>
           }

diff --git a/frontend/src/concepts/connectionTypes/utils.ts b/frontend/src/concepts/connectionTypes/utils.ts
@@ -248,12 +248,14 @@ export const parseConnectionSecretValues = (
 
 export const getConnectionTypeDisplayName = (
   connection: Connection,
-  connectionTypes: ConnectionTypeConfigMapObj[],
+  connectionTypes?: ConnectionTypeConfigMapObj[] | ConnectionTypeConfigMapObj,
 ): string => {
-  const matchingType = connectionTypes.find(
-    (type) =>
-      type.metadata.name === connection.metadata.annotations['opendatahub.io/connection-type'],
-  );
+  const matchingType = Array.isArray(connectionTypes)
+    ? connectionTypes.find(
+        (type) =>
+          type.metadata.name === connection.metadata.annotations['opendatahub.io/connection-type'],
+      )
+    : connectionTypes;
   return (
     matchingType?.metadata.annotations?.['openshift.io/display-name'] ||
     connection.metadata.annotations['opendatahub.io/connection-type']

diff --git a/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ConnectionSection.tsx b/frontend/src/pages/modelServing/screens/projects/InferenceServiceModal/ConnectionSection.tsx
@@ -1,7 +1,17 @@
 import React from 'react';
-import { Button, FormGroup, FormSection, Popover, Radio } from '@patternfly/react-core';
+import {
+  Button,
+  Flex,
+  FlexItem,
+  FormGroup,
+  FormSection,
+  Popover,
+  Radio,
+  Truncate,
+} from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import {
+  getDescriptionFromK8sResource,
   getDisplayNameFromK8sResource,
   getResourceNameFromK8sResource,
 } from '~/concepts/k8s/utils';
@@ -16,6 +26,7 @@ import { useK8sNameDescriptionFieldData } from '~/concepts/k8s/K8sNameDescriptio
 import { isK8sNameDescriptionDataValid } from '~/concepts/k8s/K8sNameDescriptionField/utils';
 import {
   assembleConnectionSecret,
+  getConnectionTypeDisplayName,
   getDefaultValues,
   isConnectionTypeDataField,
   S3ConnectionTypeKeys,
@@ -54,13 +65,26 @@ const ExistingConnectionField: React.FC<ExistingConnectionFieldProps> = ({
       projectConnections.map((connection) => ({
         content: getDisplayNameFromK8sResource(connection),
         value: getResourceNameFromK8sResource(connection),
-        description: connection.metadata.annotations['openshift.io/description'],
+        description: (
+          <Flex direction={{ default: 'column' }} rowGap={{ default: 'rowGapNone' }}>
+            {getDescriptionFromK8sResource(connection) && (
+              <FlexItem>
+                <Truncate content={getDescriptionFromK8sResource(connection)} />
+              </FlexItem>
+            )}
+            <FlexItem>
+              <Truncate
+                content={`Type: ${getConnectionTypeDisplayName(connection, connectionTypes)}`}
+              />
+            </FlexItem>
+          </Flex>
+        ),
         isSelected:
           !!selectedConnection &&
           getResourceNameFromK8sResource(connection) ===
             getResourceNameFromK8sResource(selectedConnection),
       })),
-    [projectConnections, selectedConnection],
+    [connectionTypes, projectConnections, selectedConnection],
   );
   const selectedConnectionType = React.useMemo(
     () =>

diff --git a/.../modelServing/screens/projects/InferenceServiceModal/__tests__/ConnectionSection.spec.tsx b/.../modelServing/screens/projects/InferenceServiceModal/__tests__/ConnectionSection.spec.tsx
@@ -77,7 +77,7 @@ describe('ConnectionsFormSection', () => {
     expect(result.getByRole('textbox', { name: 'folder-path' })).toHaveValue('');
 
     await act(async () => result.getByRole('button', { name: 'Typeahead menu toggle' }).click());
-    await act(async () => result.getByRole('option', { name: 's3-connection' }).click());
+    await act(async () => result.getByRole('option', { name: 's3-connection Type: s3' }).click());
     expect(mockSetData).toHaveBeenLastCalledWith('storage', {
       type: InferenceServiceStorageType.EXISTING_STORAGE,
       path: '',