From 788d1e018a377caad773dda94679fb480a5d0c6c Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Thu, 23 May 2024 08:55:20 -0400
Subject: [PATCH] [RHOAIENG-4385] DSPA - Add back the Folder Info

---
 .../ObjectStorageSection.tsx                  | 76 ++++++++++++++++---
 1 file changed, 67 insertions(+), 9 deletions(-)

diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx
index 2b33457413..41654173df 100644
--- a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx
+++ b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx
@@ -7,10 +7,16 @@ import {
   InputGroup,
   Tooltip,
   InputGroupItem,
+  Alert,
+  Popover,
+  List,
+  ListItem,
+  Stack,
+  StackItem,
 } from '@patternfly/react-core';
 import React from 'react';
 import { DataConnection } from '~/pages/projects/types';
-import { PIPELINE_AWS_FIELDS } from '~/pages/projects/dataConnections/const';
+import { AwsKeys, PIPELINE_AWS_FIELDS } from '~/pages/projects/dataConnections/const';
 import { FieldListField } from '~/components/FieldList';
 import { PipelineServerConfigType } from './types';
 import './ConfigurePipelinesServerModal.scss';
@@ -85,14 +91,66 @@ export const ObjectStorageSection = ({
             </InputGroup>
           </FormGroup>
         ) : (
-          <FieldListField
-            key={field.key}
-            value={
-              config.objectStorage.newValue.find((data) => data.key === field.key)?.value || ''
-            }
-            options={field}
-            onChange={onChange}
-          />
+          <>
+            <FieldListField
+              key={field.key}
+              value={
+                config.objectStorage.newValue.find((data) => data.key === field.key)?.value || ''
+              }
+              options={field}
+              onChange={onChange}
+            />
+
+            {field.key === AwsKeys.AWS_S3_BUCKET && (
+              <Popover
+                aria-label="bucket tooltip"
+                headerContent="Where is my data stored within the bucket?"
+                position="right"
+                hasAutoWidth
+                bodyContent={
+                  <Stack hasGutter className="pf-v5-u-mt-md">
+                    <StackItem>
+                      <div className="pf-v5-u-mb-sm">
+                        <b>If the pipeline is uploaded in the UI:</b>
+                      </div>
+                      <List>
+                        <ListItem>
+                          Pipeline metadata will be created in a <b>/pipelines/bucket</b> directory.
+                        </ListItem>
+                        <ListItem>
+                          Pipeline artifacts will be created in a{' '}
+                          <b>&#91;pipeline name&#93;/bucket</b> directory.
+                        </ListItem>
+                        <ListItem>
+                          Pipeline uploaded file will be created in a <b>/bucket</b> directory.
+                        </ListItem>
+                      </List>
+                    </StackItem>
+
+                    <StackItem>
+                      <div className="pf-v5-u-mb-sm">
+                        <b>If the pipeline is created in Elyra:</b>
+                      </div>
+                      <List>
+                        <ListItem>
+                          Pipeline and artifacts will be stored in a{' '}
+                          <b>&#91;pipeline name&#93;/bucket</b> directory.
+                        </ListItem>
+                      </List>
+                    </StackItem>
+                  </Stack>
+                }
+              >
+                <Alert
+                  variant="info"
+                  isInline
+                  isPlain
+                  title="Where is my data stored within the bucket?"
+                  style={{ width: 'fit-content' }}
+                />
+              </Popover>
+            )}
+          </>
         ),
       )}
     </FormSection>