frontend: fix neon error on database already exists

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9542
GitOrigin-RevId: ffca4699d298dfc00d711661ab6705881e1fbecf

frontend/libs/console/legacy-ce/src/lib/components/Services/Data/DataSources/CreateDataSource/Neon/NeonConnect.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Dispatch } from '../../../../../../types';
 import { reactQueryClient } from '../../../../../../lib/reactQuery';
 import { NeonBanner } from './components/Neon/NeonBanner';
@@ -9,24 +8,29 @@ import {
 import { useNeonIntegration } from './useNeonIntegration';
 import _push from '../../../push';
 import { FETCH_NEON_PROJECTS_BY_PROJECTID_QUERYKEY } from './components/NeonDashboardLink';
+import { useMetadata } from '../../../../../../features/hasura-metadata-api';
 
 type NeonConnectProps = {
-  allDatabases: string[];
   dispatch: Dispatch;
   connectDbUrl?: string;
 };
 // This component deals with Neon DB creation on connect DB page
 export function NeonConnect({
   dispatch,
-  allDatabases,
   connectDbUrl = '/data/manage/connect',
 }: NeonConnectProps) {
+  const { data, invalidateMetadata } = useMetadata();
+  const allDatabases = data?.metadata.sources.map(source => source.name) ?? [];
+
   // success callback
   const pushToDataSource = (dataSourceName: string) => {
     // on success, refetch queries to show neon dashboard link in connect database page,
     // overriding the stale time
     reactQueryClient.refetchQueries(FETCH_NEON_PROJECTS_BY_PROJECTID_QUERYKEY);
 
+    // invalidate react query metadata on success
+    invalidateMetadata();
+
     dispatch(_push(`/data/${dataSourceName}/schema/public`));
   };
   const pushToConnectDBPage = () => {

frontend/libs/console/legacy-ce/src/lib/components/Services/Data/DataSources/CreateDataSource/index.tsx

@@ -11,12 +11,11 @@ import styles from './styles.module.scss';
 import { mapDispatchToPropsEmpty } from '../../../../Common/utils/reactUtils';
 import Tabbed from '../TabbedDataSourceConnection';
 import { NotFoundError } from '../../../../Error/PageNotFound';
-import { getDataSources } from '../../../../../metadata/selector';
 import { NeonConnect } from './Neon';
 
 type Props = InjectedProps;
 
-const CreateDataSource: React.FC<Props> = ({ dispatch, allDataSources }) => {
+const CreateDataSource: React.FC<Props> = ({ dispatch }) => {
   // this condition fails for everything other than a Hasura Cloud project
   if (!isCloudConsole(Globals)) {
     throw new NotFoundError();
@@ -28,10 +27,7 @@ const CreateDataSource: React.FC<Props> = ({ dispatch, allDataSources }) => {
         <div className={styles.connect_db_content}>
           <div className={`${styles.container} mb-md`}>
             <div className="w-full mb-md">
-              <NeonConnect
-                allDatabases={allDataSources.map(d => d.name)}
-                dispatch={dispatch}
-              />
+              <NeonConnect dispatch={dispatch} />
             </div>
           </div>
         </div>
@@ -44,7 +40,6 @@ const mapStateToProps = (state: ReduxState) => {
   return {
     currentDataSource: state.tables.currentDataSource,
     currentSchema: state.tables.currentSchema,
-    allDataSources: getDataSources(state),
   };
 };
 

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/ConnectDbBody/parts/Cloud.tsx

@@ -2,7 +2,6 @@ import { NeonConnect } from '../../../../components/Services/Data/DataSources/Cr
 import { IndicatorCard } from '../../../../new-components/IndicatorCard';
 import { useAppDispatch } from '../../../../storeHooks';
 import { DriverInfo } from '../../../DataSource';
-import { useMetadata } from '../../../hasura-metadata-api';
 import { ConnectButton } from '../../components/ConnectButton';
 
 export const Cloud = ({
@@ -12,10 +11,6 @@ export const Cloud = ({
   selectedDriver: DriverInfo;
   isDriverAvailable: boolean;
 }) => {
-  const { data: sourceNames } = useMetadata(m =>
-    m?.metadata.sources.map(s => s.name)
-  );
-
   const dispatch = useAppDispatch();
 
   return (
@@ -23,7 +18,6 @@ export const Cloud = ({
       {selectedDriver?.name === 'postgres' && (
         <div className="mt-3" data-testid="neon-connect">
           <NeonConnect
-            allDatabases={sourceNames ?? []}
             dispatch={dispatch}
             connectDbUrl={'/data/v2/manage/connect'}
           />