diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/connections.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/connections.cy.ts
index 1ae3425001..c30e11b09e 100644
--- a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/connections.cy.ts
+++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/connections.cy.ts
@@ -119,4 +119,36 @@ describe('Connections', () => {
cy.wait('@createConnection');
});
+
+ it('Edit a connection', () => {
+ initIntercepts();
+ cy.interceptOdh('GET /api/connection-types', [
+ mockConnectionTypeConfigMap({
+ name: 'postgres',
+ fields: [
+ {
+ name: 'field A',
+ type: ConnectionTypeFieldType.ShortText,
+ envVar: 'field_env',
+ properties: {},
+ },
+ ],
+ }),
+ ]);
+ cy.interceptK8s(
+ 'PUT',
+ SecretModel,
+ mockSecretK8sResource({
+ name: 'test2',
+ }),
+ ).as('editConnection');
+
+ projectDetails.visitSection('test-project', 'connections');
+
+ connectionsPage.getConnectionRow('test2').findKebabAction('Edit').click();
+ cy.findByTestId(['field_env']).fill('new data');
+ cy.findByTestId('modal-submit-button').click();
+
+ cy.wait('@editConnection');
+ });
});
diff --git a/frontend/src/concepts/connectionTypes/ConnectionTypeForm.tsx b/frontend/src/concepts/connectionTypes/ConnectionTypeForm.tsx
index 775d8a62e1..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'
@@ -30,6 +82,7 @@ type Props = Pick<
connectionValues?: {
[key: string]: ConnectionTypeValueType;
};
+ disableTypeSelection?: boolean;
};
const ConnectionTypeForm: React.FC = ({
@@ -42,26 +95,12 @@ const ConnectionTypeForm: React.FC = ({
connectionValues,
onChange,
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 (