From fe654ca7c44c399e856e3b687f3f81c7bb31b8d8 Mon Sep 17 00:00:00 2001
From: Kenil Shah <32725411+Kenil27@users.noreply.github.com>
Date: Mon, 21 Oct 2024 10:16:03 +0530
Subject: [PATCH] ui: use global state for applications data (#18250)

* add check for MetaPilot - Limits

* code refactor

* move applications call from store to component

* fix:set value of applications from provider inside store

* update store inside provider

* fix failing tests
---
 .../ApplicationsProvider/ApplicationsProvider.tsx             | 4 ++++
 .../src/main/resources/ui/src/hooks/useApplicationStore.ts    | 4 ++++
 .../src/main/resources/ui/src/interface/store.interface.ts    | 2 ++
 .../ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx      | 4 +++-
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx
index 16ca60af4cca..9a1656bedb19 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx
@@ -22,6 +22,7 @@ import React, {
 } from 'react';
 import { usePermissionProvider } from '../../../../context/PermissionProvider/PermissionProvider';
 import { App } from '../../../../generated/entity/applications/app';
+import { useApplicationStore } from '../../../../hooks/useApplicationStore';
 import { getApplicationList } from '../../../../rest/applicationAPI';
 import { ApplicationsContextType } from './ApplicationsProvider.interface';
 
@@ -31,6 +32,7 @@ export const ApplicationsProvider = ({ children }: { children: ReactNode }) => {
   const [applications, setApplications] = useState<App[]>([]);
   const [loading, setLoading] = useState(false);
   const { permissions } = usePermissionProvider();
+  const { setApplicationsName } = useApplicationStore();
 
   const fetchApplicationList = useCallback(async () => {
     try {
@@ -40,6 +42,8 @@ export const ApplicationsProvider = ({ children }: { children: ReactNode }) => {
       });
 
       setApplications(data);
+      const applicationsNameList = data.map((app) => app.name);
+      setApplicationsName(applicationsNameList);
     } catch (err) {
       // do not handle error
     } finally {
diff --git a/openmetadata-ui/src/main/resources/ui/src/hooks/useApplicationStore.ts b/openmetadata-ui/src/main/resources/ui/src/hooks/useApplicationStore.ts
index dc77e9395ccd..1038a097c5b9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/hooks/useApplicationStore.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/hooks/useApplicationStore.ts
@@ -51,6 +51,7 @@ export const useApplicationStore = create<ApplicationStore>()(
       refreshTokenKey: '',
       searchCriteria: '',
       inlineAlertDetails: undefined,
+      applications: [],
 
       setInlineAlertDetails: (inlineAlertDetails) => {
         set({ inlineAlertDetails });
@@ -164,6 +165,9 @@ export const useApplicationStore = create<ApplicationStore>()(
       updateSearchCriteria: (criteria) => {
         set({ searchCriteria: criteria });
       },
+      setApplicationsName: (applications: string[]) => {
+        set({ applications: applications });
+      },
     }),
     {
       name: OM_SESSION_KEY, // name of item in the storage (must be unique)
diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/store.interface.ts b/openmetadata-ui/src/main/resources/ui/src/interface/store.interface.ts
index 2389df6bfdf7..854a49d6c8cf 100644
--- a/openmetadata-ui/src/main/resources/ui/src/interface/store.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/interface/store.interface.ts
@@ -55,6 +55,7 @@ export interface ApplicationStore
   searchCriteria: ExploreSearchIndex | '';
   theme: UIThemePreference['customTheme'];
   inlineAlertDetails?: InlineAlertProps;
+  applications: string[];
   setInlineAlertDetails: (alertDetails?: InlineAlertProps) => void;
   setSelectedPersona: (persona: EntityReference) => void;
   setApplicationConfig: (config: UIThemePreference) => void;
@@ -82,6 +83,7 @@ export interface ApplicationStore
   removeRefreshToken: () => void;
   updateSearchCriteria: (criteria: ExploreSearchIndex | '') => void;
   trySilentSignIn: (forceLogout?: boolean) => void;
+  setApplicationsName: (applications: string[]) => void;
 }
 
 export interface DomainStore {
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx
index 80357e067651..00c1d7a0d443 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx
@@ -19,6 +19,7 @@ import { useHistory } from 'react-router-dom';
 import ErrorPlaceHolder from '../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import PageHeader from '../../components/PageHeader/PageHeader.component';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
+import { useApplicationsProvider } from '../../components/Settings/Applications/ApplicationsProvider/ApplicationsProvider';
 import SettingItemCard from '../../components/Settings/SettingItemCard/SettingItemCard.component';
 import { PAGE_HEADERS } from '../../constants/PageHeaders.constant';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
@@ -38,6 +39,7 @@ const GlobalSettingPage = () => {
 
   const { permissions } = usePermissionProvider();
   const { isAdminUser } = useAuth();
+  const { loading } = useApplicationsProvider();
 
   const [settings, setSettings] = useState<SettingMenuItem[]>([]);
 
@@ -58,7 +60,7 @@ const GlobalSettingPage = () => {
 
           return false;
         }),
-    [permissions, isAdminUser]
+    [permissions, isAdminUser, loading]
   );
 
   const handleSettingItemClick = useCallback((category: string) => {