[Backport 2.13] Fix integration flyout successes (opensearch-project#…

…1649)

(cherry picked from commit 91448c0)

Signed-off-by: Simeon Widdis <sawiddis@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

public/components/datasources/components/manage/data_connection.tsx

@@ -86,6 +86,9 @@ export const DataConnection = (props: { dataSource: string }) => {
   const [dataSourceIntegrations, setDataSourceIntegrations] = useState(
     [] as IntegrationInstanceResult[]
   );
+  const [refreshIntegrationsFlag, setRefreshIntegrationsFlag] = useState(false);
+  const refreshInstances = () => setRefreshIntegrationsFlag((prev) => !prev);
+
   useEffect(() => {
     const searchDataSourcePattern = new RegExp(
       `flint_${_.escapeRegExp(datasourceDetails.name)}_default_.*_mview`
@@ -105,7 +108,7 @@ export const DataConnection = (props: { dataSource: string }) => {
       }
     };
     findIntegrations();
-  }, [http, datasourceDetails.name]);
+  }, [http, datasourceDetails.name, refreshIntegrationsFlag]);
 
   const [showIntegrationsFlyout, setShowIntegrationsFlyout] = useState(false);
   const onclickIntegrationsCard = () => {
@@ -237,6 +240,7 @@ export const DataConnection = (props: { dataSource: string }) => {
           integrations={dataSourceIntegrations}
           datasourceType={datasourceDetails.connector}
           datasourceName={datasourceDetails.name}
+          refreshInstances={refreshInstances}
         />
       ),
     },

public/components/datasources/components/manage/integrations/installed_integrations_table.tsx

@@ -127,23 +127,27 @@ export const InstallIntegrationFlyout = ({
   closeFlyout,
   datasourceType,
   datasourceName,
+  refreshInstances,
 }: {
   closeFlyout: () => void;
   datasourceType: DatasourceType;
   datasourceName: string;
+  refreshInstances: () => void;
 }) => {
   const [availableIntegrations, setAvailableIntegrations] = useState({
     hits: [],
   } as AvailableIntegrationsList);
 
+  const [isInstalling, setIsInstalling] = useState(false);
+
   useEffect(() => {
     if (!coreRefs.http) {
       return;
     }
     coreRefs.http.get(`${INTEGRATIONS_BASE}/repository`).then((exists) => {
       setAvailableIntegrations(exists.data);
     });
-  });
+  }, []);
 
   const s3FilteredIntegrations = {
     hits: availableIntegrations.hits.filter((config) =>
@@ -152,7 +156,6 @@ export const InstallIntegrationFlyout = ({
   };
 
   const [installingIntegration, setInstallingIntegration] = useState<string | null>(null);
-  const [isInstalling, setIsInstalling] = useState(false);
   const maybeCloseFlyout = () => {
     if (!isInstalling) {
       closeFlyout();
@@ -181,7 +184,13 @@ export const InstallIntegrationFlyout = ({
                 }
               : undefined
           }
-          setIsInstalling={setIsInstalling}
+          setIsInstalling={(installing: boolean, success?: boolean) => {
+            setIsInstalling(installing);
+            if (success) {
+              closeFlyout();
+              refreshInstances();
+            }
+          }}
         />
       )}
     </EuiFlyout>
@@ -192,10 +201,12 @@ export const InstalledIntegrationsTable = ({
   integrations,
   datasourceType,
   datasourceName,
+  refreshInstances,
 }: {
   integrations: IntegrationInstanceResult[];
   datasourceType: DatasourceType;
   datasourceName: string;
+  refreshInstances: () => void;
 }) => {
   const [query, setQuery] = useState('');
   const filteredIntegrations = integrations
@@ -245,6 +256,7 @@ export const InstalledIntegrationsTable = ({
           closeFlyout={() => setShowAvailableFlyout(false)}
           datasourceType={datasourceType}
           datasourceName={datasourceName}
+          refreshInstances={refreshInstances}
         />
       ) : null}
     </>

public/components/integrations/components/setup_integration.tsx

@@ -452,13 +452,13 @@ const addIntegration = async ({
   integration,
   setLoading,
   setCalloutLikeToast,
-  skipRedirect,
+  setIsInstalling,
 }: {
   config: IntegrationSetupInputs;
   integration: IntegrationConfig;
   setLoading: (loading: boolean) => void;
   setCalloutLikeToast: (title: string, color?: Color, text?: string) => void;
-  skipRedirect?: boolean;
+  setIsInstalling?: (isInstalling: boolean, success?: boolean) => void;
 }) => {
   setLoading(true);
   let sessionId: string | null = null;
@@ -473,8 +473,11 @@ const addIntegration = async ({
       config.displayName,
       config.connectionDataSource,
       undefined,
-      skipRedirect
+      setIsInstalling ? true : false
     );
+    if (setIsInstalling) {
+      setIsInstalling(false, res);
+    }
     if (!res) {
       setLoading(false);
     }
@@ -513,8 +516,11 @@ const addIntegration = async ({
       config.displayName,
       `flint_${config.connectionDataSource}_default_${config.connectionTableName}_mview`,
       config.enabledWorkflows,
-      skipRedirect
+      setIsInstalling ? true : false
     );
+    if (setIsInstalling) {
+      setIsInstalling(false, res);
+    }
     if (!res) {
       setLoading(false);
     }
@@ -546,16 +552,14 @@ export function SetupBottomBar({
   setSetupCallout,
   unsetIntegration,
   setIsInstalling,
-  skipRedirect,
 }: {
   config: IntegrationSetupInputs;
   integration: IntegrationConfig;
   loading: boolean;
   setLoading: (loading: boolean) => void;
   setSetupCallout: (setupCallout: SetupCallout) => void;
   unsetIntegration?: () => void;
-  setIsInstalling?: (isInstalling: boolean) => void;
-  skipRedirect?: boolean;
+  setIsInstalling?: (isInstalling: boolean, success?: boolean) => void;
 }) {
   // Drop-in replacement for setToast
   const setCalloutLikeToast = (title: string, color?: Color, text?: string) =>
@@ -607,15 +611,15 @@ export function SetupBottomBar({
                   setIsInstalling(newLoading);
                 },
                 setCalloutLikeToast,
-                skipRedirect,
+                setIsInstalling,
               });
             } else {
               await addIntegration({
                 integration,
                 config,
                 setLoading,
                 setCalloutLikeToast,
-                skipRedirect,
+                setIsInstalling,
               });
             }
           }}
@@ -654,7 +658,7 @@ export function SetupIntegrationForm({
     name: string;
     type: string;
   };
-  setIsInstalling?: (isInstalling: boolean) => void;
+  setIsInstalling?: (isInstalling: boolean, success?: boolean) => void;
 }) {
   const [integConfig, setConfig] = useState({
     displayName: `${integration} Integration`,
@@ -746,7 +750,6 @@ export function SetupIntegrationForm({
             setSetupCallout={setSetupCallout}
             unsetIntegration={unsetIntegration}
             setIsInstalling={setIsInstalling}
-            skipRedirect={true}
           />
         </EuiFlyoutFooter>
       </>