From 7d9492bd248949c3bdf337266c97cb412871e40b Mon Sep 17 00:00:00 2001
From: pnaik1 <pnaik@redhat.com>
Date: Wed, 30 Aug 2023 14:43:14 +0530
Subject: [PATCH] Update pipelineServer

---
 frontend/src/components/FieldList.tsx         |   2 +-
 .../concepts/pipelines/NoPipelineServer.tsx   |   6 +-
 .../content/ViewPipelineServerModal.tsx       |  49 +----
 .../ConfigurePipelinesServerModal.tsx         |  73 +++----
 .../ObjectStorageSection.tsx                  | 182 ++++++------------
 .../PipelineDropdown.tsx                      | 134 +++++++++++++
 .../__tests__/utils.spec.ts                   |  25 +--
 .../content/configurePipelinesServer/types.ts |  11 +-
 .../content/configurePipelinesServer/utils.ts |  60 +++---
 .../pipelines/context/PipelinesContext.tsx    |   2 +-
 .../pages/projects/dataConnections/const.ts   |  47 ++++-
 11 files changed, 327 insertions(+), 264 deletions(-)
 create mode 100644 frontend/src/concepts/pipelines/content/configurePipelinesServer/PipelineDropdown.tsx

diff --git a/frontend/src/components/FieldList.tsx b/frontend/src/components/FieldList.tsx
index ebf06c3716..e1a80a5524 100644
--- a/frontend/src/components/FieldList.tsx
+++ b/frontend/src/components/FieldList.tsx
@@ -24,7 +24,7 @@ type InputFieldProps = {
   value: string;
 };
 
-const FieldListField = ({ options, onChange, value }: InputFieldProps) => {
+export const FieldListField = ({ options, onChange, value }: InputFieldProps) => {
   const ComponentField = options.isPassword ? PasswordInput : TextInput;
 
   return (
diff --git a/frontend/src/concepts/pipelines/NoPipelineServer.tsx b/frontend/src/concepts/pipelines/NoPipelineServer.tsx
index 453d8bc019..8e07fe379b 100644
--- a/frontend/src/concepts/pipelines/NoPipelineServer.tsx
+++ b/frontend/src/concepts/pipelines/NoPipelineServer.tsx
@@ -18,9 +18,11 @@ const NoPipelineServer: React.FC<NoPipelineServerProps> = ({ variant }) => (
   <EmptyState>
     <EmptyStateIcon icon={WrenchIcon} />
     <Title headingLevel="h2" size="lg">
-      No pipeline server
+      Enable pipelines
     </Title>
-    <EmptyStateBody>To import a pipeline, first create a pipeline server.</EmptyStateBody>
+    <EmptyStateBody>
+      To create and manage pipelines, first enable them by configuring a pipeline server
+    </EmptyStateBody>
     <Flex direction={{ default: 'column' }}>
       <FlexItem spacer={{ default: 'spacerLg' }} />
       <FlexItem>
diff --git a/frontend/src/concepts/pipelines/content/ViewPipelineServerModal.tsx b/frontend/src/concepts/pipelines/content/ViewPipelineServerModal.tsx
index 75e5ff48d2..fb59f2149d 100644
--- a/frontend/src/concepts/pipelines/content/ViewPipelineServerModal.tsx
+++ b/frontend/src/concepts/pipelines/content/ViewPipelineServerModal.tsx
@@ -10,19 +10,10 @@ import {
 } from '@patternfly/react-core';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import PasswordHiddenText from '~/components/PasswordHiddenText';
-import useDataConnections from '~/pages/projects/screens/detail/data-connections/useDataConnections';
-import { DataConnection } from '~/pages/projects/types';
-import { useContextResourceData } from '~/utilities/useContextResourceData';
-import {
-  convertAWSSecretData,
-  getDataConnectionDisplayName,
-} from '~/pages/projects/screens/detail/data-connections/utils';
 import { dataEntryToRecord } from '~/utilities/dataEntryToRecord';
-import { AWS_KEYS } from '~/pages/projects/dataConnections/const';
 import useNamespaceSecret from '~/concepts/projects/apiHooks/useNamespaceSecret';
 import { EXTERNAL_DATABASE_SECRET } from '~/concepts/pipelines/content/configurePipelinesServer/const';
 import { DSPipelineKind } from '~/k8sTypes';
-
 type ViewPipelineServerModalProps = {
   isOpen: boolean;
   onClose: () => void;
@@ -35,22 +26,14 @@ const ViewPipelineServerModal: React.FC<ViewPipelineServerModalProps> = ({
   pipelineNamespaceCR,
 }) => {
   const { namespace } = usePipelinesAPI();
-  const { data: dataConnections } = useContextResourceData<DataConnection>(
-    useDataConnections(namespace),
+  const [pipelineResult] = useNamespaceSecret(
+    namespace,
+    pipelineNamespaceCR?.spec.objectStorage.externalStorage?.s3CredentialsSecret.secretName ?? '',
   );
+  const pipelineSecret = dataEntryToRecord(pipelineResult?.values?.data ?? []);
   const [result] = useNamespaceSecret(namespace, EXTERNAL_DATABASE_SECRET.NAME);
   const databaseSecret = dataEntryToRecord(result?.values?.data ?? []);
 
-  const objectStorageDataConnection = dataConnections.find(
-    (dc) =>
-      dc.data.metadata.name ===
-      pipelineNamespaceCR?.spec.objectStorage?.externalStorage?.s3CredentialsSecret?.secretName,
-  );
-
-  const objectStorageRecord: Partial<Record<AWS_KEYS, string>> = objectStorageDataConnection
-    ? dataEntryToRecord(convertAWSSecretData(objectStorageDataConnection))
-    : {};
-
   return (
     <Modal
       title="View pipeline server"
@@ -65,30 +48,22 @@ const ViewPipelineServerModal: React.FC<ViewPipelineServerModalProps> = ({
     >
       {pipelineNamespaceCR && (
         <DescriptionList termWidth="20ch" isHorizontal>
-          {!!objectStorageDataConnection &&
-            !!pipelineNamespaceCR?.spec.objectStorage?.externalStorage &&
-            !!objectStorageRecord && (
+          {!!pipelineNamespaceCR.spec.objectStorage &&
+            !!pipelineNamespaceCR.spec.objectStorage.externalStorage &&
+            !!pipelineNamespaceCR.spec.objectStorage.externalStorage.s3CredentialsSecret
+              .secretName && (
               <>
                 <Title headingLevel="h2">Object storage connection</Title>
-                <DescriptionListGroup>
-                  {/* TODO: is this the pipeline name or the secret name? */}
-                  <DescriptionListTerm>Name</DescriptionListTerm>
-                  <DescriptionListDescription>
-                    {getDataConnectionDisplayName(objectStorageDataConnection)}
-                  </DescriptionListDescription>
-                </DescriptionListGroup>
                 <DescriptionListGroup>
                   <DescriptionListTerm>Access key</DescriptionListTerm>
                   <DescriptionListDescription>
-                    {objectStorageRecord?.AWS_ACCESS_KEY_ID}
+                    {pipelineSecret?.AWS_ACCESS_KEY_ID || ''}
                   </DescriptionListDescription>
                 </DescriptionListGroup>
                 <DescriptionListGroup>
                   <DescriptionListTerm>Secret key</DescriptionListTerm>
                   <DescriptionListDescription>
-                    <PasswordHiddenText
-                      password={objectStorageRecord?.AWS_SECRET_ACCESS_KEY ?? ''}
-                    />
+                    <PasswordHiddenText password={pipelineSecret?.AWS_SECRET_ACCESS_KEY ?? ''} />
                   </DescriptionListDescription>
                 </DescriptionListGroup>
                 <DescriptionListGroup>
@@ -106,10 +81,6 @@ const ViewPipelineServerModal: React.FC<ViewPipelineServerModalProps> = ({
                     {pipelineNamespaceCR.spec.objectStorage.externalStorage?.bucket}
                   </DescriptionListDescription>
                 </DescriptionListGroup>
-                <DescriptionListGroup>
-                  <DescriptionListTerm>Folder path</DescriptionListTerm>
-                  <DescriptionListDescription>/pipelines</DescriptionListDescription>
-                </DescriptionListGroup>
               </>
             )}
           {!!pipelineNamespaceCR?.spec.database &&
diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx
index 67341d1bbe..bef602c7a7 100644
--- a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx
+++ b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { Alert, Button, Form, Modal, Stack, StackItem } from '@patternfly/react-core';
-import { EMPTY_AWS_SECRET_DATA } from '~/pages/projects/dataConnections/const';
 import './ConfigurePipelinesServerModal.scss';
-import { convertAWSSecretData } from '~/pages/projects/screens/detail/data-connections/utils';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
-import { isAWSValid } from '~/pages/projects/screens/spawner/spawnerUtils';
 import { createPipelinesCR, deleteSecret } from '~/api';
 import useDataConnections from '~/pages/projects/screens/detail/data-connections/useDataConnections';
+import { EMPTY_AWS_PIPELINE_DATA } from '~/pages/projects/dataConnections/const';
 import { PipelinesDatabaseSection } from './PipelinesDatabaseSection';
 import { ObjectStorageSection } from './ObjectStorageSection';
 import {
@@ -15,7 +13,8 @@ import {
   EMPTY_DATABASE_CONNECTION,
   EXTERNAL_DATABASE_SECRET,
 } from './const';
-import { configureDSPipelineResourceSpec } from './utils';
+
+import { configureDSPipelineResourceSpec, objectStorageIsValid } from './utils';
 import { PipelineServerConfigType } from './types';
 
 type ConfigurePipelinesServerModalProps = {
@@ -25,7 +24,7 @@ type ConfigurePipelinesServerModalProps = {
 
 const FORM_DEFAULTS: PipelineServerConfigType = {
   database: { useDefault: true, value: EMPTY_DATABASE_CONNECTION },
-  objectStorage: { useExisting: true, existingName: '', existingValue: EMPTY_AWS_SECRET_DATA },
+  objectStorage: { newValue: EMPTY_AWS_PIPELINE_DATA },
 };
 
 export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerModalProps> = ({
@@ -33,7 +32,7 @@ export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerMod
   open,
 }) => {
   const { project, namespace } = usePipelinesAPI();
-  const [dataConnections, , , refresh] = useDataConnections(namespace);
+  const [dataConnections, loaded, , refresh] = useDataConnections(namespace);
   const [fetching, setFetching] = React.useState(false);
   const [error, setError] = React.useState<Error | null>(null);
   const [config, setConfig] = React.useState<PipelineServerConfigType>(FORM_DEFAULTS);
@@ -44,23 +43,18 @@ export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerMod
     }
   }, [open, refresh]);
 
-  const canSubmit = () => {
-    const databaseIsValid = config.database.useDefault
-      ? true
-      : config.database.value.every(({ key, value }) =>
-          DATABASE_CONNECTION_FIELDS.filter((field) => field.isRequired)
-            .map((field) => field.key)
-            .includes(key as DATABASE_CONNECTION_KEYS)
-            ? !!value
-            : true,
-        );
-
-    const objectStorageIsValid = config.objectStorage.useExisting
-      ? !!config.objectStorage.existingName
-      : isAWSValid(config.objectStorage.newValue);
+  const databaseIsValid = config.database.useDefault
+    ? true
+    : config.database.value.every(({ key, value }) =>
+        DATABASE_CONNECTION_FIELDS.filter((field) => field.isRequired)
+          .map((field) => field.key)
+          .includes(key as DATABASE_CONNECTION_KEYS)
+          ? !!value
+          : true,
+      );
 
-    return databaseIsValid && objectStorageIsValid;
-  };
+  const objectIsValid = objectStorageIsValid(config.objectStorage.newValue);
+  const canSubmit = databaseIsValid && objectIsValid;
 
   const onBeforeClose = () => {
     onClose();
@@ -70,25 +64,9 @@ export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerMod
   };
 
   const submit = () => {
-    let objectStorage: PipelineServerConfigType['objectStorage'];
-    if (config.objectStorage.useExisting) {
-      const existingName = config.objectStorage.existingName;
-      const existingValue = dataConnections?.find((dc) => dc.data.metadata.name === existingName);
-      if (existingValue) {
-        objectStorage = {
-          existingValue: convertAWSSecretData(existingValue),
-          existingName,
-          useExisting: true,
-        };
-      } else {
-        throw new Error('Selected data connection does not exist');
-      }
-    } else {
-      objectStorage = {
-        newValue: config.objectStorage.newValue,
-        useExisting: false,
-      };
-    }
+    const objectStorage: PipelineServerConfigType['objectStorage'] = {
+      newValue: config.objectStorage.newValue,
+    };
     setFetching(true);
     setError(null);
 
@@ -121,17 +99,18 @@ export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerMod
     <Modal
       title="Configure pipeline server"
       variant="medium"
+      description="Configuring a pipeline server enables you to create and manage pipelines."
       isOpen={open}
       onClose={onBeforeClose}
       actions={[
         <Button
           key="configure"
           variant="primary"
-          isDisabled={!canSubmit() || fetching}
+          isDisabled={!canSubmit || fetching}
           isLoading={fetching}
           onClick={submit}
         >
-          Configure
+          Configure pipeline server
         </Button>,
         <Button key="cancel" variant="link" onClick={onBeforeClose}>
           Cancel
@@ -139,6 +118,13 @@ export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerMod
       ]}
     >
       <Stack hasGutter>
+        <StackItem>
+          <Alert
+            variant="info"
+            isInline
+            title="Pipeline server configuration cannot be edited after creation. To use a different configuration after creation, delete the pipeline server and create a new one."
+          />
+        </StackItem>
         <StackItem>
           <Form
             onSubmit={(e) => {
@@ -149,6 +135,7 @@ export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerMod
             <ObjectStorageSection
               setConfig={setConfig}
               config={config}
+              loaded={loaded}
               dataConnections={dataConnections}
             />
             <PipelinesDatabaseSection setConfig={setConfig} config={config} />
diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx
index 4e9d331b19..9ed7c59b60 100644
--- a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx
+++ b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx
@@ -1,33 +1,29 @@
 import {
   FormSection,
   Title,
-  Radio,
   FormGroup,
-  Select,
-  SelectOption,
   Text,
   TextInput,
-  Stack,
-  StackItem,
+  InputGroup,
+  Tooltip,
 } from '@patternfly/react-core';
 import React from 'react';
-import AWSField from '~/pages/projects/dataConnections/AWSField';
-import { getDataConnectionDisplayName } from '~/pages/projects/screens/detail/data-connections/utils';
 import { DataConnection } from '~/pages/projects/types';
-import { EMPTY_AWS_SECRET_DATA } from '~/pages/projects/dataConnections/const';
+import { PIPELINE_AWS_FIELDS } from '~/pages/projects/dataConnections/const';
+import { FieldListField } from '~/components/FieldList';
 import { PipelineServerConfigType } from './types';
 import './ConfigurePipelinesServerModal.scss';
+import { PipelineDropdown } from './PipelineDropdown';
 
-const DISABLED_FOLDER_PATH = (
-  <FormGroup
-    label="Folder path"
-    helperText="/metadata and /artifacts folders are automatically created in the default root folder"
-  >
-    <TextInput isDisabled aria-label="disabled folder path field" value="/" />
-  </FormGroup>
-);
-
+export type FieldOptions = {
+  key: string;
+  label: string;
+  placeholder?: string;
+  isRequired?: boolean;
+  isPassword?: boolean;
+};
 type ObjectStorageSectionProps = {
+  loaded: boolean;
   setConfig: (config: PipelineServerConfigType) => void;
   config: PipelineServerConfigType;
   dataConnections: DataConnection[];
@@ -36,121 +32,69 @@ type ObjectStorageSectionProps = {
 export const ObjectStorageSection = ({
   setConfig,
   config,
+  loaded,
   dataConnections,
 }: ObjectStorageSectionProps) => {
-  const [existingDataConnectionOpen, setExistingDataConnectionOpen] = React.useState(false);
+  const onChange = (key: FieldOptions['key'], value: string) => {
+    setConfig({
+      ...config,
+      objectStorage: {
+        newValue: config.objectStorage.newValue.map((d) => (d.key === key ? { key, value } : d)),
+      },
+    });
+  };
+
   return (
     <FormSection
       title={
         <>
           <Title headingLevel="h2">Object storage connection</Title>
           <Text component="p" className="form-subtitle-text">
-            The selected S3-compatible data connection is where your pipeline artifacts are stored.
+            To store pipeline artifacts. Must be S3 compatible
           </Text>
         </>
       }
     >
-      <Radio
-        className="checkbox-radio-fix-body-width"
-        name="data-connection-type-radio"
-        id="existing-data-connection-type-radio"
-        label="Existing data connection"
-        isChecked={config.objectStorage.useExisting}
-        onChange={() =>
-          setConfig({
-            ...config,
-            objectStorage: {
-              existingName: '',
-              existingValue: EMPTY_AWS_SECRET_DATA,
-              useExisting: true,
-            },
-          })
-        }
-        body={
-          config.objectStorage.useExisting && (
-            <Stack hasGutter>
-              <StackItem>
-                <FormGroup label="Name" isRequired>
-                  <Select
-                    removeFindDomNode
-                    id="pipelines-data-connection"
-                    isOpen={existingDataConnectionOpen}
-                    placeholderText={
-                      dataConnections.length === 0
-                        ? 'No data connections available to select'
-                        : 'Select...'
-                    }
-                    isDisabled={dataConnections.length === 0}
-                    onToggle={(open) => setExistingDataConnectionOpen(open)}
-                    onSelect={(_, option) => {
-                      if (typeof option === 'string') {
-                        setConfig({
-                          ...config,
-                          objectStorage: {
-                            useExisting: true,
-                            existingName: option,
-                            existingValue: EMPTY_AWS_SECRET_DATA,
-                          },
-                        });
-                        setExistingDataConnectionOpen(false);
-                      }
-                    }}
-                    selections={config.objectStorage.existingName}
-                    menuAppendTo="parent"
-                  >
-                    {dataConnections.map((connection) => (
-                      <SelectOption
-                        key={connection.data.metadata.name}
-                        value={connection.data.metadata.name}
-                      >
-                        {getDataConnectionDisplayName(connection)}
-                      </SelectOption>
-                    ))}
-                  </Select>
-                </FormGroup>
-              </StackItem>
-              <StackItem>{DISABLED_FOLDER_PATH}</StackItem>
-            </Stack>
-          )
-        }
-      />
-      <Radio
-        className="checkbox-radio-fix-body-width"
-        name="data-connection-radio"
-        id="new-data-connection-radio"
-        label="Create new data connection"
-        isChecked={!config.objectStorage.useExisting}
-        onChange={() =>
-          setConfig({
-            ...config,
-            objectStorage: {
-              newValue: EMPTY_AWS_SECRET_DATA,
-              useExisting: false,
-            },
-          })
-        }
-        body={
-          !config.objectStorage.useExisting && (
-            <Stack hasGutter>
-              <StackItem>
-                <AWSField
-                  values={config.objectStorage.newValue}
-                  onUpdate={(newEnvData) =>
-                    setConfig({
-                      ...config,
-                      objectStorage: {
-                        newValue: newEnvData,
-                        useExisting: false,
-                      },
-                    })
+      {PIPELINE_AWS_FIELDS.map((field) =>
+        field.key === 'AWS_ACCESS_KEY_ID' ? (
+          <FormGroup key={field.key} isRequired={field.isRequired} label={field.label}>
+            <InputGroup>
+              <TextInput
+                aria-label={`Field list ${field.key}`}
+                isRequired={field.isRequired}
+                value={
+                  config.objectStorage.newValue.find((data) => data.key === field.key)?.value || ''
+                }
+                placeholder={field.placeholder}
+                onChange={(value) => onChange(field.key, value)}
+              />
+              {loaded && !!dataConnections.length && (
+                <Tooltip
+                  removeFindDomNode
+                  content={
+                    'Populate the form with credentials from your selected data connection</div'
                   }
-                />
-              </StackItem>
-              <StackItem>{DISABLED_FOLDER_PATH}</StackItem>
-            </Stack>
-          )
-        }
-      />
+                >
+                  <PipelineDropdown
+                    config={config}
+                    setConfig={setConfig}
+                    dataConnections={dataConnections}
+                  />
+                </Tooltip>
+              )}
+            </InputGroup>
+          </FormGroup>
+        ) : (
+          <FieldListField
+            key={field.key}
+            value={
+              config.objectStorage.newValue.find((data) => data.key === field.key)?.value || ''
+            }
+            options={field}
+            onChange={onChange}
+          />
+        ),
+      )}
     </FormSection>
   );
 };
diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/PipelineDropdown.tsx b/frontend/src/concepts/pipelines/content/configurePipelinesServer/PipelineDropdown.tsx
new file mode 100644
index 0000000000..7e7eb23604
--- /dev/null
+++ b/frontend/src/concepts/pipelines/content/configurePipelinesServer/PipelineDropdown.tsx
@@ -0,0 +1,134 @@
+import {
+  Dropdown,
+  DropdownPosition,
+  Menu,
+  Text,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuItemAction,
+  MenuList,
+  TextContent,
+  MenuToggle,
+} from '@patternfly/react-core';
+import React from 'react';
+import { EyeIcon, EyeSlashIcon, KeyIcon } from '@patternfly/react-icons';
+import styles from '@patternfly/react-styles/css/components/Menu/menu';
+import { css } from '@patternfly/react-styles';
+import { DataConnection, AWSDataEntry } from '~/pages/projects/types';
+import {
+  convertAWSSecretData,
+  getDataConnectionDisplayName,
+} from '~/pages/projects/screens/detail/data-connections/utils';
+import { PIPELINE_AWS_KEY } from '~/pages/projects/dataConnections/const';
+import { PipelineServerConfigType } from './types';
+import { getLabelName } from './utils';
+type pipelineDropdownProps = {
+  setConfig: (config: PipelineServerConfigType) => void;
+  config: PipelineServerConfigType;
+  dataConnections: DataConnection[];
+};
+export const PipelineDropdown = ({ config, setConfig, dataConnections }: pipelineDropdownProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [showPassword, setShowPassword] = React.useState<boolean[]>([]);
+
+  const existingDataConnection = (connection: DataConnection): AWSDataEntry | null =>
+    convertAWSSecretData(connection).filter((dataItem) =>
+      PIPELINE_AWS_KEY.some((filterItem) => filterItem === dataItem.key),
+    );
+
+  const onToggle = () => {
+    setShowPassword([]);
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    option?: string | number | null,
+  ) => {
+    setIsOpen(false);
+    if (typeof option === 'string') {
+      const value = dataConnections.find((d) => d.data.metadata.name === option);
+      if (!value) {
+        return;
+      }
+      const optionValue = existingDataConnection(value);
+      const updatedObjectStorageValue = config.objectStorage.newValue.map((item) => {
+        const matchingOption = optionValue?.find((optItem) => optItem.key === item.key);
+
+        return {
+          ...item,
+          value: matchingOption ? matchingOption.value : item.value,
+        };
+      });
+
+      setConfig({
+        ...config,
+        objectStorage: {
+          newValue: updatedObjectStorageValue,
+        },
+      });
+    }
+  };
+  return (
+    <Dropdown
+      menuAppendTo="parent"
+      position={DropdownPosition.right}
+      toggle={<MenuToggle onClick={onToggle} icon={<KeyIcon />}></MenuToggle>}
+      isOpen={isOpen}
+    >
+      <Menu onSelect={onSelect} isScrollable isPlain>
+        <MenuContent>
+          <MenuGroup
+            label={
+              <h1 className={css(styles.menuGroupTitle)}>
+                <KeyIcon /> Populate the form with credentials from your selected data connection
+              </h1>
+            }
+          >
+            <MenuList>
+              {dataConnections.map((dataItem, index) => (
+                <MenuItem
+                  key={dataItem.data.metadata.name}
+                  actions={
+                    <MenuItemAction
+                      icon={showPassword[index] ? <EyeSlashIcon /> : <EyeIcon />}
+                      actionId={index}
+                      // eslint-disable-next-line no-console
+                      onClick={(ev) => {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        setShowPassword((s) => [
+                          ...s.slice(0, index),
+                          !s[index],
+                          ...s.slice(index + 1),
+                        ]);
+                      }}
+                      aria-label={dataItem.data.metadata.name}
+                    />
+                  }
+                  description={
+                    showPassword[index] ? (
+                      <TextContent className={css(styles.menuItemDescription)}>
+                        {existingDataConnection(dataItem)?.map((field) => (
+                          <Text key={field.key}>
+                            <b>{getLabelName(field.key)}</b> : {field.value}
+                          </Text>
+                        ))}
+                      </TextContent>
+                    ) : (
+                      '•••••••••••••••••'
+                    )
+                  }
+                  itemId={dataItem.data.metadata.name}
+                >
+                  {getDataConnectionDisplayName(dataItem)}
+                </MenuItem>
+              ))}
+            </MenuList>
+          </MenuGroup>
+        </MenuContent>
+      </Menu>
+    </Dropdown>
+  );
+};
diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/__tests__/utils.spec.ts b/frontend/src/concepts/pipelines/content/configurePipelinesServer/__tests__/utils.spec.ts
index 20fe6b4266..3b2d7f99c7 100644
--- a/frontend/src/concepts/pipelines/content/configurePipelinesServer/__tests__/utils.spec.ts
+++ b/frontend/src/concepts/pipelines/content/configurePipelinesServer/__tests__/utils.spec.ts
@@ -1,6 +1,7 @@
-import { AWS_KEYS } from '~/pages/projects/dataConnections/const';
+//import { AWS_KEYS } from '~/pages/projects/dataConnections/const';
 import { PipelineServerConfigType } from '~/concepts/pipelines/content/configurePipelinesServer/types';
 import { createDSPipelineResourceSpec } from '~/concepts/pipelines/content/configurePipelinesServer/utils';
+import { AWS_KEYS } from '~/pages/projects/dataConnections/const';
 
 describe('configure pipeline server utils', () => {
   describe('createDSPipelineResourceSpec', () => {
@@ -11,9 +12,7 @@ describe('configure pipeline server utils', () => {
           value: [],
         },
         objectStorage: {
-          useExisting: true,
-          existingName: '',
-          existingValue: [],
+          newValue: [],
         },
       } as PipelineServerConfigType);
 
@@ -22,7 +21,7 @@ describe('configure pipeline server utils', () => {
     const createSecretsResponse = (
       databaseSecret?: SecretsResponse[0],
       objectStorageSecret?: SecretsResponse[1],
-    ): SecretsResponse => [databaseSecret, objectStorageSecret ?? { secretName: '', awsData: [] }];
+    ): SecretsResponse => [databaseSecret, objectStorageSecret ?? { secretName: '' }];
 
     it('should create resource spec', () => {
       const spec = createDSPipelineResourceSpec(
@@ -47,28 +46,30 @@ describe('configure pipeline server utils', () => {
     });
 
     it('should parse S3 endpoint with scheme', () => {
+      const config = createPipelineServerConfig();
       const secretsResponse = createSecretsResponse();
-      secretsResponse[1].awsData = [
+      config.objectStorage.newValue = [
         { key: AWS_KEYS.S3_ENDPOINT, value: 'http://s3.amazonaws.com' },
       ];
-      const spec = createDSPipelineResourceSpec(createPipelineServerConfig(), secretsResponse);
+      const spec = createDSPipelineResourceSpec(config, secretsResponse);
       expect(spec.objectStorage.externalStorage?.scheme).toBe('http');
       expect(spec.objectStorage.externalStorage?.host).toBe('s3.amazonaws.com');
     });
 
     it('should parse S3 endpoint without scheme', () => {
       const secretsResponse = createSecretsResponse();
-
-      secretsResponse[1].awsData = [{ key: AWS_KEYS.S3_ENDPOINT, value: 's3.amazonaws.com' }];
-      const spec = createDSPipelineResourceSpec(createPipelineServerConfig(), secretsResponse);
+      const config = createPipelineServerConfig();
+      config.objectStorage.newValue = [{ key: AWS_KEYS.S3_ENDPOINT, value: 's3.amazonaws.com' }];
+      const spec = createDSPipelineResourceSpec(config, secretsResponse);
       expect(spec.objectStorage.externalStorage?.scheme).toBe('https');
       expect(spec.objectStorage.externalStorage?.host).toBe('s3.amazonaws.com');
     });
 
     it('should include bucket', () => {
       const secretsResponse = createSecretsResponse();
-      secretsResponse[1].awsData = [{ key: AWS_KEYS.AWS_S3_BUCKET, value: 'my-bucket' }];
-      const spec = createDSPipelineResourceSpec(createPipelineServerConfig(), secretsResponse);
+      const config = createPipelineServerConfig();
+      config.objectStorage.newValue = [{ key: AWS_KEYS.AWS_S3_BUCKET, value: 'my-bucket' }];
+      const spec = createDSPipelineResourceSpec(config, secretsResponse);
       expect(spec.objectStorage.externalStorage?.bucket).toBe('my-bucket');
     });
 
diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/types.ts b/frontend/src/concepts/pipelines/content/configurePipelinesServer/types.ts
index 99a324dfe2..f7ff349e91 100644
--- a/frontend/src/concepts/pipelines/content/configurePipelinesServer/types.ts
+++ b/frontend/src/concepts/pipelines/content/configurePipelinesServer/types.ts
@@ -1,14 +1,7 @@
-import { AWSDataEntry, EnvVariableDataEntry } from '~/pages/projects/types';
-
-export type ObjectStorageExisting = {
-  existingName: string;
-  existingValue: AWSDataEntry;
-  useExisting: true;
-};
+import { EnvVariableDataEntry } from '~/pages/projects/types';
 
 export type ObjectStorageNew = {
   newValue: EnvVariableDataEntry[];
-  useExisting: false;
 };
 
 export type PipelineServerConfigType = {
@@ -16,5 +9,5 @@ export type PipelineServerConfigType = {
     useDefault: boolean;
     value: EnvVariableDataEntry[];
   };
-  objectStorage: ObjectStorageExisting | ObjectStorageNew;
+  objectStorage: ObjectStorageNew;
 };
diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/utils.ts b/frontend/src/concepts/pipelines/content/configurePipelinesServer/utils.ts
index d4cb2f6553..42efc42590 100644
--- a/frontend/src/concepts/pipelines/content/configurePipelinesServer/utils.ts
+++ b/frontend/src/concepts/pipelines/content/configurePipelinesServer/utils.ts
@@ -1,14 +1,10 @@
 import { createSecret, assembleSecret } from '~/api';
 import { DSPipelineKind } from '~/k8sTypes';
-import { AWS_KEYS } from '~/pages/projects/dataConnections/const';
-import {
-  isSecretAWSSecretKind,
-  convertAWSSecretData,
-} from '~/pages/projects/screens/detail/data-connections/utils';
-import { AWSDataEntry, DataConnectionType } from '~/pages/projects/types';
+import { AWS_KEYS, PIPELINE_AWS_FIELDS } from '~/pages/projects/dataConnections/const';
 import { dataEntryToRecord } from '~/utilities/dataEntryToRecord';
+import { EnvVariableDataEntry } from '~/pages/projects/types';
 import { DATABASE_CONNECTION_KEYS, EXTERNAL_DATABASE_SECRET } from './const';
-import { ObjectStorageExisting, PipelineServerConfigType } from './types';
+import { PipelineServerConfigType } from './types';
 
 type SecretsResponse = [
   (
@@ -20,13 +16,9 @@ type SecretsResponse = [
   ),
   {
     secretName: string;
-    awsData: AWSDataEntry;
   },
 ];
 
-export const isUseExisting = (config: unknown): config is ObjectStorageExisting =>
-  (config as ObjectStorageExisting).existingName !== undefined;
-
 const createDatabaseSecret = (
   databaseConfig: PipelineServerConfigType['database'],
   projectName: string,
@@ -68,35 +60,16 @@ const createObjectStorageSecret = (
   dryRun: boolean,
 ): Promise<{
   secretName: string;
-  awsData: AWSDataEntry;
 }> => {
-  if (objectStorageConfig.useExisting) {
-    return Promise.resolve({
-      secretName: objectStorageConfig.existingName,
-      awsData: objectStorageConfig.existingValue,
-    });
-  }
   const assembledSecret = assembleSecret(
     projectName,
-    objectStorageConfig.newValue.reduce<Record<string, string>>(
-      (acc, { key, value }) => ({ ...acc, [key]: value }),
-      {},
-    ),
-    'aws',
+    objectStorageConfig.newValue.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {}),
+    'generic',
   );
 
-  return createSecret(assembledSecret, { dryRun: dryRun }).then((secret) => {
-    if (isSecretAWSSecretKind(secret)) {
-      return {
-        secretName: assembledSecret.metadata.name,
-        awsData: convertAWSSecretData({
-          type: DataConnectionType.AWS,
-          data: secret,
-        }),
-      };
-    }
-    throw new Error('Error creating data connection');
-  });
+  return createSecret(assembledSecret, { dryRun: dryRun }).then((secret) => ({
+    secretName: secret.metadata.name,
+  }));
 };
 
 const createSecrets = (config: PipelineServerConfigType, projectName: string) =>
@@ -121,9 +94,8 @@ export const createDSPipelineResourceSpec = (
   [databaseSecret, objectStorageSecret]: SecretsResponse,
 ): DSPipelineKind['spec'] => {
   {
-    const awsRecord = dataEntryToRecord(objectStorageSecret.awsData);
     const databaseRecord = dataEntryToRecord(config.database.value);
-
+    const awsRecord = dataEntryToRecord(config.objectStorage.newValue);
     const [, externalStorageScheme, externalStorageHost] =
       awsRecord.AWS_S3_ENDPOINT?.match(/^(?:(\w+):\/\/)?(.*)/) ?? [];
 
@@ -165,3 +137,17 @@ export const configureDSPipelineResourceSpec = (
   createSecrets(config, projectName).then((secretsResponse) =>
     createDSPipelineResourceSpec(config, secretsResponse),
   );
+
+export const objectStorageIsValid = (objectStorage: EnvVariableDataEntry[]): boolean =>
+  objectStorage.every(({ key, value }) =>
+    PIPELINE_AWS_FIELDS.filter((field) => field.isRequired)
+      .map((field) => field.key)
+      .includes(key)
+      ? !!value
+      : true,
+  );
+
+export const getLabelName = (index: string) => {
+  const field = PIPELINE_AWS_FIELDS.find((field) => field.key === index);
+  return field ? field.label : '';
+};
diff --git a/frontend/src/concepts/pipelines/context/PipelinesContext.tsx b/frontend/src/concepts/pipelines/context/PipelinesContext.tsx
index 415cb6e85b..9bbe370e7c 100644
--- a/frontend/src/concepts/pipelines/context/PipelinesContext.tsx
+++ b/frontend/src/concepts/pipelines/context/PipelinesContext.tsx
@@ -166,7 +166,7 @@ export const CreatePipelineServerButton: React.FC<CreatePipelineServerButtonProp
       <Stack hasGutter>
         <StackItem>
           <Button variant={variant} onClick={() => setConfigureModalVisible(true)}>
-            Create a pipeline server
+            Configure pipeline server
           </Button>
         </StackItem>
       </Stack>
diff --git a/frontend/src/pages/projects/dataConnections/const.ts b/frontend/src/pages/projects/dataConnections/const.ts
index 50987adb93..5d12115fae 100644
--- a/frontend/src/pages/projects/dataConnections/const.ts
+++ b/frontend/src/pages/projects/dataConnections/const.ts
@@ -9,7 +9,11 @@ export enum AWS_KEYS {
   DEFAULT_REGION = 'AWS_DEFAULT_REGION',
   AWS_S3_BUCKET = 'AWS_S3_BUCKET',
 }
-
+export const PIPELINE_AWS_KEY = [
+  AWS_KEYS.ACCESS_KEY_ID,
+  AWS_KEYS.SECRET_ACCESS_KEY,
+  AWS_KEYS.S3_ENDPOINT,
+];
 export const AWS_FIELDS: FieldOptions[] = [
   {
     key: AWS_KEYS.NAME,
@@ -41,6 +45,29 @@ export const AWS_FIELDS: FieldOptions[] = [
     label: 'Bucket',
   },
 ];
+export const PIPELINE_AWS_FIELDS: FieldOptions[] = [
+  {
+    key: AWS_KEYS.ACCESS_KEY_ID,
+    label: 'Access key',
+    isRequired: true,
+  },
+  {
+    key: AWS_KEYS.SECRET_ACCESS_KEY,
+    label: 'Secret key',
+    isPassword: true,
+    isRequired: true,
+  },
+  {
+    key: AWS_KEYS.S3_ENDPOINT,
+    label: 'Endpoint',
+    isRequired: true,
+  },
+  {
+    key: AWS_KEYS.AWS_S3_BUCKET,
+    label: 'Bucket',
+    isRequired: true,
+  },
+];
 
 export const EMPTY_AWS_SECRET_DATA: AWSDataEntry = [
   {
@@ -68,3 +95,21 @@ export const EMPTY_AWS_SECRET_DATA: AWSDataEntry = [
     value: '',
   },
 ];
+export const EMPTY_AWS_PIPELINE_DATA: AWSDataEntry = [
+  {
+    key: AWS_KEYS.ACCESS_KEY_ID,
+    value: '',
+  },
+  {
+    key: AWS_KEYS.SECRET_ACCESS_KEY,
+    value: '',
+  },
+  {
+    key: AWS_KEYS.AWS_S3_BUCKET,
+    value: '',
+  },
+  {
+    key: AWS_KEYS.S3_ENDPOINT,
+    value: '',
+  },
+];