console: fix stale data in permission ui

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9908
GitOrigin-RevId: 0c8cffde4c4285fa3d39d1c7a34a4d9234877820

frontend/libs/console/legacy-ce/src/lib/components/Services/Data/TablePermissions/Permissions.js

@@ -141,6 +141,8 @@ class Permissions extends Component {
   componentDidMount() {
     const { dispatch } = this.props;
 
+    dispatch(updateSchemaInfo());
+
     if (!isFeatureSupported('tables.permissions.enabled')) return;
 
     dispatch({ type: RESET });

frontend/libs/console/legacy-ce/src/lib/features/MetadataAPI/hooks/useMetadata.ts

@@ -1,12 +1,13 @@
-import Endpoints from '../../../Endpoints';
-import { Api } from '../../../hooks/apiUtils';
 import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
 import { useSelector } from 'react-redux';
-import type { MetadataResponse } from '../types';
+import Endpoints from '../../../Endpoints';
+import { Api } from '../../../hooks/apiUtils';
 import {
   METADATA_QUERY_KEY,
   MetadataQueryKey,
+  useSyncResourceVersionToRedux,
 } from '../../hasura-metadata-api/useMetadata';
+import type { MetadataResponse } from '../types';
 
 // overloads
 /**
@@ -56,6 +57,8 @@ export function useMetadata(
     'queryKey' | 'queryFn'
   >
 ) {
+  const { syncToRedux } = useSyncResourceVersionToRedux();
+
   const body = {
     type: 'export_metadata',
     version: 2,
@@ -68,11 +71,17 @@ export function useMetadata(
     string
   >;
   const queryFn = () => {
-    return Api.post<MetadataResponse>({
+    const post = Api.post<MetadataResponse>({
       headers,
       body,
       url: Endpoints.metadata,
     });
+
+    post.then(result => {
+      syncToRedux(result.resource_version);
+    });
+
+    return post;
   };
 
   return useQuery({

frontend/libs/console/legacy-ce/src/lib/features/MetadataAPI/hooks/useMetadataMigration.ts

@@ -4,8 +4,8 @@ import { CLI_CONSOLE_MODE } from '../../../constants';
 import Endpoints from '../../../Endpoints';
 import { Api } from '../../../hooks/apiUtils';
 import { useConsoleConfig } from '../../../hooks/useEnvVars';
-import { allowedMetadataTypes, MetadataResponse } from '../types';
 import { useInvalidateMetadata } from '../../hasura-metadata-api';
+import { allowedMetadataTypes, MetadataResponse } from '../types';
 
 const maxAllowedLength = 255;
 const unixEpochLength = 14;
@@ -107,11 +107,9 @@ export function useMetadataMigration<
             `Migration Body:`,
             JSON.stringify(lastBody, null, 2),
           ],
-          additionalQueryKeys:
-            additionalQueryKeysToInvalidate &&
-            additionalQueryKeysToInvalidate?.length > 0
-              ? additionalQueryKeysToInvalidate
-              : undefined,
+          additionalQueryKeys: additionalQueryKeysToInvalidate?.length
+            ? additionalQueryKeysToInvalidate
+            : undefined,
         });
 
         const { onSuccess } = mutationOptions ?? {};

frontend/libs/console/legacy-ce/src/lib/features/hasura-metadata-api/useMetadata.ts

@@ -5,6 +5,8 @@ import { useHttpClient } from '../Network';
 import { Metadata } from '../hasura-metadata-types';
 import { exportMetadata } from './exportMetadata';
 import { getCurrentReduxResourceVersion } from '../../store/utils/';
+import { exportMetadata as exportMetadataAction } from '../../metadata/actions';
+import React from 'react';
 
 export const DEFAULT_STALE_TIME = 5 * 60000; // 5 minutes as default stale time
 
@@ -23,6 +25,21 @@ type Options = {
   enabled?: boolean;
 };
 
+export const useSyncResourceVersionToRedux = () => {
+  const dispatch = useAppDispatch();
+
+  const syncToRedux = React.useCallback(
+    (resource_version: number) => {
+      if (resource_version !== getCurrentReduxResourceVersion()) {
+        dispatch(exportMetadataAction());
+      }
+    },
+    [dispatch]
+  );
+
+  return { syncToRedux };
+};
+
 export const useMetadata = <FinalResult = Metadata>(
   selector?: (m: Metadata) => FinalResult,
   options: Options = {
@@ -31,20 +48,13 @@ export const useMetadata = <FinalResult = Metadata>(
   }
 ) => {
   const httpClient = useHttpClient();
-
-  const dispatch = useAppDispatch();
-
+  const { syncToRedux } = useSyncResourceVersionToRedux();
   const queryReturn = useQuery<Metadata, APIError, FinalResult>({
     queryKey: [METADATA_QUERY_KEY],
     queryFn: async () => {
       const result = await exportMetadata({ httpClient });
 
-      if (result.resource_version !== getCurrentReduxResourceVersion()) {
-        dispatch({
-          type: 'Metadata/EXPORT_METADATA_SUCCESS',
-          data: result,
-        });
-      }
+      syncToRedux(result.resource_version);
 
       return result;
     },