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
open-metadata · Nov 3, 2024 · fe654ca · fe654ca
1 parent d05461d
commit fe654ca
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/...ces/ui/src/components/Settings/Applications/ApplicationsProvider/ApplicationsProvider.tsx b/...ces/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
@@ -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
@@ -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
@@ -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) => {