diff --git a/frontend/src/concepts/connectionTypes/ConnectionTypeForm.tsx b/frontend/src/concepts/connectionTypes/ConnectionTypeForm.tsx
index 5875fa22d5..939fa9ce70 100644
--- a/frontend/src/concepts/connectionTypes/ConnectionTypeForm.tsx
+++ b/frontend/src/concepts/connectionTypes/ConnectionTypeForm.tsx
@@ -1,11 +1,21 @@
import * as React from 'react';
-import { Form, FormGroup, FormSection, MenuToggleStatus, Title } from '@patternfly/react-core';
+import {
+ Flex,
+ FlexItem,
+ Form,
+ FormGroup,
+ FormSection,
+ MenuToggleStatus,
+ Title,
+ Truncate,
+} from '@patternfly/react-core';
import ConnectionTypeFormFields from '~/concepts/connectionTypes/fields/ConnectionTypeFormFields';
import {
ConnectionTypeConfigMapObj,
ConnectionTypeValueType,
} from '~/concepts/connectionTypes/types';
import {
+ getDescriptionFromK8sResource,
getDisplayNameFromK8sResource,
getResourceNameFromK8sResource,
} from '~/concepts/k8s/utils';
@@ -17,6 +27,48 @@ import {
} from '~/concepts/k8s/K8sNameDescriptionField/types';
import { ConnectionTypeDetailsHelperText } from './ConnectionTypeDetailsHelperText';
+const getConnectionTypeSelectOptions = (
+ isPreview: boolean,
+ selectedConnectionType?: ConnectionTypeConfigMapObj,
+ connectionTypes?: ConnectionTypeConfigMapObj[],
+): TypeaheadSelectOption[] => {
+ if (isPreview && selectedConnectionType?.metadata.annotations?.['openshift.io/display-name']) {
+ return [
+ {
+ value: '',
+ content: selectedConnectionType.metadata.annotations['openshift.io/display-name'],
+ isSelected: true,
+ },
+ ];
+ }
+ if (!isPreview && connectionTypes) {
+ return connectionTypes.map((t) => ({
+ value: getResourceNameFromK8sResource(t),
+ content: getDisplayNameFromK8sResource(t),
+ description: (
+
+ {getDescriptionFromK8sResource(t) && (
+
+
+
+ )}
+ {t.data?.category?.length && (
+
+
+
+ )}
+
+ ),
+ data: `${getDescriptionFromK8sResource(t)} ${t.data?.category?.join(' ')}`,
+ isSelected:
+ !!selectedConnectionType &&
+ getResourceNameFromK8sResource(t) ===
+ getResourceNameFromK8sResource(selectedConnectionType),
+ }));
+ }
+ return [];
+};
+
type Props = Pick<
React.ComponentProps,
'onChange' | 'onValidate'
@@ -45,25 +97,10 @@ const ConnectionTypeForm: React.FC = ({
onValidate,
disableTypeSelection,
}) => {
- const options: TypeaheadSelectOption[] = React.useMemo(() => {
- if (isPreview && connectionType?.metadata.annotations?.['openshift.io/display-name']) {
- return [
- {
- value: '',
- content: connectionType.metadata.annotations['openshift.io/display-name'],
- isSelected: true,
- },
- ];
- }
- if (!isPreview && connectionTypes) {
- return connectionTypes.map((t) => ({
- value: getResourceNameFromK8sResource(t),
- content: getDisplayNameFromK8sResource(t),
- isSelected: t.metadata.name === connectionType?.metadata.name,
- }));
- }
- return [];
- }, [isPreview, connectionType?.metadata, connectionTypes]);
+ const options: TypeaheadSelectOption[] = React.useMemo(
+ () => getConnectionTypeSelectOptions(isPreview, connectionType, connectionTypes),
+ [isPreview, connectionType, connectionTypes],
+ );
return (