Add connection modal

frontend/src/concepts/connectionTypes/ConnectionTypeDetailsHelperText.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  HelperText,
+  HelperTextItem,
+  LabelGroup,
+  Popover,
+} from '@patternfly/react-core';
+import { getDescriptionFromK8sResource } from '~/concepts/k8s/utils';
+import { ConnectionTypeConfigMapObj } from './types';
+import UnspecifiedValue from './fields/UnspecifiedValue';
+import CategoryLabel from './CategoryLabel';
+
+type Props = {
+  connectionType?: ConnectionTypeConfigMapObj;
+};
+
+export const ConnectionTypeDetailsHelperText: React.FC<Props> = ({ connectionType }) => {
+  const displayName =
+    connectionType && connectionType.metadata.annotations?.['openshift.io/display-name'];
+  const description = connectionType && getDescriptionFromK8sResource(connectionType);
+
+  return (
+    <HelperText>
+      <HelperTextItem>
+        <Popover
+          headerContent="Connection type details"
+          bodyContent={
+            <DescriptionList>
+              <DescriptionListGroup>
+                <DescriptionListTerm>Connection type name</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {displayName || <UnspecifiedValue />}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              {description ? (
+                <DescriptionListGroup>
+                  <DescriptionListTerm>Connection type description</DescriptionListTerm>
+                  <DescriptionListDescription>
+                    {description || <UnspecifiedValue />}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              ) : undefined}
+              <DescriptionListGroup>
+                <DescriptionListTerm>Category</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {connectionType?.data?.category?.length ? (
+                    <LabelGroup>
+                      {connectionType.data.category.map((category) => (
+                        <CategoryLabel key={category} category={category} />
+                      ))}
+                    </LabelGroup>
+                  ) : (
+                    <UnspecifiedValue />
+                  )}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            </DescriptionList>
+          }
+        >
+          <Button variant="link" isInline>
+            View connection type details
+          </Button>
+        </Popover>
+      </HelperTextItem>
+    </HelperText>
+  );
+};

frontend/src/concepts/connectionTypes/ConnectionTypePreview.tsx

@@ -1,111 +1,128 @@
 import * as React from 'react';
-import {
-  Button,
-  DescriptionList,
-  DescriptionListDescription,
-  DescriptionListGroup,
-  DescriptionListTerm,
-  Form,
-  FormGroup,
-  FormSection,
-  HelperText,
-  HelperTextItem,
-  LabelGroup,
-  MenuToggleStatus,
-  Popover,
-  Title,
-} from '@patternfly/react-core';
+import { Form, FormGroup, FormSection, MenuToggleStatus, Title } from '@patternfly/react-core';
 import ConnectionTypeFormFields from '~/concepts/connectionTypes/fields/ConnectionTypeFormFields';
-import { ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types';
-import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
-import { getDescriptionFromK8sResource } from '~/concepts/k8s/utils';
-import UnspecifiedValue from '~/concepts/connectionTypes/fields/UnspecifiedValue';
-import SimpleSelect from '~/components/SimpleSelect';
-import CategoryLabel from '~/concepts/connectionTypes/CategoryLabel';
-import TruncatedText from '~/components/TruncatedText';
+import {
+  ConnectionTypeConfigMapObj,
+  ConnectionTypeValueType,
+} from '~/concepts/connectionTypes/types';
+import {
+  getDisplayNameFromK8sResource,
+  getResourceNameFromK8sResource,
+} from '~/concepts/k8s/utils';
+import TypeaheadSelect, { TypeaheadSelectOption } from '~/components/TypeaheadSelect';
+import K8sNameDescriptionField from '~/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField';
+import {
+  K8sNameDescriptionFieldData,
+  K8sNameDescriptionFieldUpdateFunction,
+} from '~/concepts/k8s/K8sNameDescriptionField/types';
+import { ConnectionTypeDetailsHelperText } from './ConnectionTypeDetailsHelperText';
 
 type Props = {
   obj?: ConnectionTypeConfigMapObj;
+  setObj?: (obj?: ConnectionTypeConfigMapObj) => void;
+  connectionTypes?: ConnectionTypeConfigMapObj[];
+  isPreview?: boolean;
+  connectionNameDesc?: K8sNameDescriptionFieldData;
+  setConnectionNameDesc?: K8sNameDescriptionFieldUpdateFunction;
+  connectionValues?: {
+    [key: string]: ConnectionTypeValueType;
+  };
+  setConnectionValues?: (values: { [key: string]: ConnectionTypeValueType }) => void;
 };
 
-// TODO consider refactoring this form for reuse when creating connection type instances
-const ConnectionTypePreview: React.FC<Props> = ({ obj }) => {
+const ConnectionTypePreview: React.FC<Props> = ({
+  obj,
+  setObj,
+  connectionTypes,
+  isPreview,
+  connectionNameDesc,
+  setConnectionNameDesc,
+  connectionValues,
+  setConnectionValues,
+}) => {
   const connectionTypeName = obj && obj.metadata.annotations?.['openshift.io/display-name'];
-  const connectionTypeDescription = (obj && getDescriptionFromK8sResource(obj)) ?? undefined;
+
+  const options: TypeaheadSelectOption[] = React.useMemo(() => {
+    if (isPreview && connectionTypeName) {
+      return [
+        {
+          value: connectionTypeName,
+          content: connectionTypeName,
+          isSelected: true,
+        },
+      ];
+    }
+    if (!isPreview && connectionTypes) {
+      return connectionTypes.map((t) => ({
+        value: getResourceNameFromK8sResource(t),
+        content: getDisplayNameFromK8sResource(t),
+        isSelected: t.metadata.name === obj?.metadata.name,
+      }));
+    }
+    return [];
+  }, [isPreview, obj?.metadata.name, connectionTypes, connectionTypeName]);
+
   return (
     <Form>
-      <Title headingLevel="h1">Add connection</Title>
+      {isPreview && <Title headingLevel="h1">Add connection</Title>}
       <FormGroup label="Connection type" fieldId="connection-type" isRequired>
-        <SimpleSelect
+        <TypeaheadSelect
           id="connection-type"
-          isFullWidth
-          toggleLabel={connectionTypeName || 'Unspecified'}
-          isDisabled={!!connectionTypeName}
-          toggleProps={connectionTypeName ? undefined : { status: MenuToggleStatus.danger }}
-          onChange={() => undefined}
+          selectOptions={options}
+          onSelect={(_, selection) =>
+            setObj?.(connectionTypes?.find((c) => c.metadata.name === selection))
+          }
+          isDisabled={isPreview}
+          placeholder={
+            isPreview && !connectionTypeName
+              ? 'Unspecified'
+              : 'Select a type, or search by keyword or category'
+          }
+          toggleProps={
+            isPreview && !connectionTypeName ? { status: MenuToggleStatus.danger } : undefined
+          }
         />
-        <HelperText>
-          {connectionTypeDescription ? (
-            <HelperTextItem>
-              <TruncatedText maxLines={2} content={connectionTypeDescription} />
-            </HelperTextItem>
-          ) : undefined}
-          <HelperTextItem>
-            <Popover
-              headerContent="Connection type details"
-              bodyContent={
-                <DescriptionList>
-                  <DescriptionListGroup>
-                    <DescriptionListTerm>Connection type name</DescriptionListTerm>
-                    <DescriptionListDescription>
-                      {connectionTypeName || <UnspecifiedValue />}
-                    </DescriptionListDescription>
-                  </DescriptionListGroup>
-                  {connectionTypeDescription ? (
-                    <DescriptionListGroup>
-                      <DescriptionListTerm>Connection type description</DescriptionListTerm>
-                      <DescriptionListDescription>
-                        {connectionTypeDescription || <UnspecifiedValue />}
-                      </DescriptionListDescription>
-                    </DescriptionListGroup>
-                  ) : undefined}
-                  <DescriptionListGroup>
-                    <DescriptionListTerm>Category</DescriptionListTerm>
-                    <DescriptionListDescription>
-                      {obj?.data?.category?.length ? (
-                        <LabelGroup>
-                          {obj.data.category.map((category) => (
-                            <CategoryLabel key={category} category={category} />
-                          ))}
-                        </LabelGroup>
-                      ) : (
-                        <UnspecifiedValue />
-                      )}
-                    </DescriptionListDescription>
-                  </DescriptionListGroup>
-                </DescriptionList>
-              }
-            >
-              <Button variant="link" isInline>
-                View connection type details
-              </Button>
-            </Popover>
-          </HelperTextItem>
-        </HelperText>
+        {(isPreview || obj?.metadata.name) && (
+          <ConnectionTypeDetailsHelperText connectionType={obj} />
+        )}
       </FormGroup>
-      <FormSection title="Connection details" style={{ marginTop: 0 }}>
-        <NameDescriptionField
-          nameFieldId="connection-details-name"
-          descriptionFieldId="connection-details-description"
-          nameFieldLabel="Connection name"
-          descriptionFieldLabel="Connection description"
-          data={{
-            name: '',
-            description: '',
-          }}
-        />
-        <ConnectionTypeFormFields fields={obj?.data?.fields} isPreview />
-      </FormSection>
+      {(isPreview || obj?.metadata.name) && (
+        <FormSection title="Connection details" style={{ marginTop: 0 }}>
+          <K8sNameDescriptionField
+            dataTestId="connection-name-desc"
+            nameLabel="Connection name"
+            descriptionLabel="Connection description"
+            data={
+              connectionNameDesc ?? {
+                name: '',
+                description: '',
+                k8sName: {
+                  value: '',
+                  state: {
+                    immutable: true,
+                    invalidCharacters: false,
+                    invalidLength: false,
+                    maxLength: 0,
+                    touched: false,
+                  },
+                },
+              }
+            }
+            onDataChange={setConnectionNameDesc}
+          />
+          <ConnectionTypeFormFields
+            fields={obj?.data?.fields}
+            isPreview={isPreview}
+            connectionValues={connectionValues}
+            onChange={(field, value) => {
+              setConnectionValues?.({
+                ...connectionValues,
+                [field.envVar]: value,
+              });
+            }}
+          />
+        </FormSection>
+      )}
     </Form>
   );
 };

frontend/src/concepts/connectionTypes/ConnectionTypePreviewDrawer.tsx

@@ -53,7 +53,7 @@ const ConnectionTypePreviewDrawer: React.FC<Props> = ({ children, isExpanded, on
       >
         <Card isFlat isRounded>
           <CardBody>
-            <ConnectionTypePreview obj={obj} />
+            <ConnectionTypePreview isPreview obj={obj} />
           </CardBody>
         </Card>
       </DrawerContentBody>

frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx

@@ -6,18 +6,30 @@ import {
   ConnectionTypeDataField,
   ConnectionTypeField,
   ConnectionTypeFieldType,
+  ConnectionTypeValueType,
   SectionField,
 } from '~/concepts/connectionTypes/types';
 
 type Props = {
   fields?: ConnectionTypeField[];
   isPreview?: boolean;
-  onChange?: (field: ConnectionTypeDataField, value: unknown) => void;
+  onChange?: (field: ConnectionTypeDataField, value: ConnectionTypeValueType) => void;
+  connectionValues?: {
+    [key: string]: ConnectionTypeValueType;
+  };
 };
 
-type FieldGroup = { section: SectionField | undefined; fields: ConnectionTypeDataField[] };
+type FieldGroup = {
+  section: SectionField | undefined;
+  fields: ConnectionTypeDataField[];
+};
 
-const ConnectionTypeFormFields: React.FC<Props> = ({ fields, isPreview, onChange }) => {
+const ConnectionTypeFormFields: React.FC<Props> = ({
+  fields,
+  isPreview,
+  onChange,
+  connectionValues,
+}) => {
   const fieldGroups = React.useMemo(
     () =>
       fields?.reduce<FieldGroup[]>((acc, field) => {
@@ -42,6 +54,7 @@ const ConnectionTypeFormFields: React.FC<Props> = ({ fields, isPreview, onChange
             field={field}
             mode={isPreview ? 'preview' : 'instance'}
             onChange={onChange ? (v) => onChange(field, v) : undefined}
+            value={connectionValues?.[field.envVar]}
           />
         )}
       </DataFormFieldGroup>

frontend/src/concepts/connectionTypes/types.ts

@@ -136,6 +136,8 @@ export type ConnectionTypeConfigMapObj = Omit<ConnectionTypeConfigMap, 'data'> &
   };
 };
 
+export type ConnectionTypeValueType = ConnectionTypeDataField['properties']['defaultValue'];
+
 export type Connection = SecretKind & {
   metadata: {
     labels: DashboardLabels & {
@@ -145,7 +147,7 @@ export type Connection = SecretKind & {
       'opendatahub.io/connection-type': string;
     };
   };
-  data: {
+  data?: {
     [key: string]: string;
   };
 };