pipelines modal use up top date data connections (#1322)

* use context value and pass it to the form section * fixed hook
opendatahub-io · Jun 2, 2023 · 3129a4d · 3129a4d
1 parent d6f0f68
commit 3129a4d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/...src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx b/...src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { Alert, Button, Form, Modal, Stack, StackItem } from '@patternfly/react-core';
-import { DataConnection } from '~/pages/projects/types';
 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 useDataConnections from '~/pages/projects/screens/detail/data-connections/useDataConnections';
-import { useContextResourceData } from '~/utilities/useContextResourceData';
 import { isAWSValid } from '~/pages/projects/screens/spawner/spawnerUtils';
 import { createPipelinesCR, deleteSecret } from '~/api';
+import useDataConnections from '~/pages/projects/screens/detail/data-connections/useDataConnections';
 import { PipelinesDatabaseSection } from './PipelinesDatabaseSection';
 import { ObjectStorageSection } from './ObjectStorageSection';
 import {
@@ -35,11 +33,17 @@ export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerMod
   open,
 }) => {
   const { project, namespace } = usePipelinesAPI();
-  const dataConnections = useContextResourceData<DataConnection>(useDataConnections(namespace));
+  const [dataConnections, , , 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);
 
+  React.useEffect(() => {
+    if (open) {
+      refresh();
+    }
+  }, [open, refresh]);
+
   const canSubmit = () => {
     const databaseIsValid = config.database.useDefault
       ? true
@@ -69,9 +73,7 @@ export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerMod
     let objectStorage: PipelineServerConfigType['objectStorage'];
     if (config.objectStorage.useExisting) {
       const existingName = config.objectStorage.existingName;
-      const existingValue = dataConnections.data?.find(
-        (dc) => dc.data.metadata.name === existingName,
-      );
+      const existingValue = dataConnections?.find((dc) => dc.data.metadata.name === existingName);
       if (existingValue) {
         objectStorage = {
           existingValue: convertAWSSecretData(existingValue),
@@ -144,7 +146,11 @@ export const ConfigurePipelinesServerModal: React.FC<ConfigurePipelinesServerMod
               submit();
             }}
           >
-            <ObjectStorageSection setConfig={setConfig} config={config} />
+            <ObjectStorageSection
+              setConfig={setConfig}
+              config={config}
+              dataConnections={dataConnections}
+            />
             <PipelinesDatabaseSection setConfig={setConfig} config={config} />
           </Form>
         </StackItem>

diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx
@@ -12,11 +12,8 @@ import {
 } from '@patternfly/react-core';
 import React from 'react';
 import AWSField from '~/pages/projects/dataConnections/AWSField';
-import useDataConnections from '~/pages/projects/screens/detail/data-connections/useDataConnections';
 import { getDataConnectionDisplayName } from '~/pages/projects/screens/detail/data-connections/utils';
 import { DataConnection } from '~/pages/projects/types';
-import { useContextResourceData } from '~/utilities/useContextResourceData';
-import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { EMPTY_AWS_SECRET_DATA } from '~/pages/projects/dataConnections/const';
 import { PipelineServerConfigType } from './types';
 import './ConfigurePipelinesServerModal.scss';
@@ -33,11 +30,14 @@ const DISABLED_FOLDER_PATH = (
 type ObjectStorageSectionProps = {
   setConfig: (config: PipelineServerConfigType) => void;
   config: PipelineServerConfigType;
+  dataConnections: DataConnection[];
 };
 
-export const ObjectStorageSection = ({ setConfig, config }: ObjectStorageSectionProps) => {
-  const { namespace } = usePipelinesAPI();
-  const dataConnections = useContextResourceData<DataConnection>(useDataConnections(namespace));
+export const ObjectStorageSection = ({
+  setConfig,
+  config,
+  dataConnections,
+}: ObjectStorageSectionProps) => {
   const [existingDataConnectionOpen, setExistingDataConnectionOpen] = React.useState(false);
   return (
     <FormSection
@@ -76,11 +76,11 @@ export const ObjectStorageSection = ({ setConfig, config }: ObjectStorageSection
                     id="pipelines-data-connection"
                     isOpen={existingDataConnectionOpen}
                     placeholderText={
-                      dataConnections.data.length === 0
+                      dataConnections.length === 0
                         ? 'No data connections available to select'
                         : 'Select...'
                     }
-                    isDisabled={dataConnections.data.length === 0}
+                    isDisabled={dataConnections.length === 0}
                     onToggle={(open) => setExistingDataConnectionOpen(open)}
                     onSelect={(_, option) => {
                       if (typeof option === 'string') {
@@ -98,7 +98,7 @@ export const ObjectStorageSection = ({ setConfig, config }: ObjectStorageSection
                     selections={config.objectStorage.existingName}
                     menuAppendTo="parent"
                   >
-                    {dataConnections.data.map((connection) => (
+                    {dataConnections.map((connection) => (
                       <SelectOption
                         key={connection.data.metadata.name}
                         value={connection.data.metadata.name}