feat(CE): added refresh source catalog support during model creation

Co-authored-by: Tushar Selvakumar <54372016+macintushar@users.noreply.github.com>

ui/src/views/Models/ModelsForm/DefineModel/DefineSQL/DefineSQL.tsx

@@ -21,6 +21,7 @@ import { format } from 'sql-formatter';
 import { autocompleteEntries } from './autocomplete';
 import ModelQueryResults from '../ModelQueryResults';
 import { useAPIErrorsToast, useErrorToast } from '@/hooks/useErrorToast';
+import RefreshModelCatalog from '../RefreshModelCatalog';
 
 const DefineSQL = ({
   hasPrefilledValues = false,
@@ -207,6 +208,7 @@ const DefineSQL = ({
                 </Flex>
                 <Spacer />
                 <HStack spacing={3}>
+                  <RefreshModelCatalog source_id={connector_id} />
                   <Button
                     variant='shell'
                     onClick={getPreview}
@@ -233,6 +235,7 @@ const DefineSQL = ({
                     fontSize='12px'
                     height='32px'
                     paddingX={3}
+                    isDisabled={!runQuery}
                     onClick={() => setUserQuery(format(userQuery))}
                   >
                     <Image src={StarsImage} w={6} mr={2} /> Beautify

ui/src/views/Models/ModelsForm/DefineModel/RefreshModelCatalog.tsx

@@ -0,0 +1,81 @@
+import { CustomToastStatus } from '@/components/Toast';
+import useCustomToast from '@/hooks/useCustomToast';
+import { useAPIErrorsToast, useErrorToast } from '@/hooks/useErrorToast';
+import { getCatalog } from '@/services/syncs';
+import { Button, Tooltip } from '@chakra-ui/react';
+import { useState } from 'react';
+import { FiLoader, FiRefreshCw } from 'react-icons/fi';
+
+type RefreshModelCatalogProps = {
+  source_id: string;
+};
+
+const RefreshModelCatalog = ({ source_id }: RefreshModelCatalogProps) => {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const toast = useCustomToast();
+  const errorToast = useErrorToast();
+  const apiErrorsToast = useAPIErrorsToast();
+
+  const tooltipLabel = isRefreshing
+    ? 'Source schema is refreshing...'
+    : 'Refresh the source schema if any tables are missing.';
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      const data = await getCatalog(source_id, true);
+      if (data?.errors) {
+        apiErrorsToast(data.errors);
+      }
+      if (data?.data) {
+        toast({
+          title: 'Success!',
+          description: 'Source schema refreshed successfully',
+          status: CustomToastStatus.Success,
+          isClosable: true,
+          position: 'bottom-right',
+        });
+      }
+    } catch (error) {
+      errorToast('An error occurred while refreshing the source catalog.', true, null, true);
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  return (
+    <Tooltip
+      hasArrow
+      label={tooltipLabel}
+      fontSize='xs'
+      placement='top'
+      backgroundColor='black.500'
+      color='gray.100'
+      borderRadius='6px'
+      padding='8px'
+    >
+      <Button
+        variant='shell'
+        minWidth='0'
+        width='auto'
+        fontSize='12px'
+        height='32px'
+        paddingX={3}
+        borderWidth={1}
+        borderStyle='solid'
+        borderColor='gray.500'
+        onClick={handleRefresh}
+        isDisabled={isRefreshing}
+      >
+        {isRefreshing ? (
+          <FiLoader height='14px' width='14px' />
+        ) : (
+          <FiRefreshCw height='14px' width='14px' />
+        )}
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default RefreshModelCatalog;

ui/src/views/Models/ModelsForm/DefineModel/TableSelector/TableSelector.tsx

@@ -23,6 +23,7 @@ import { QueryType } from '@/views/Models/types';
 import ViewSQLModal from './ViewSQLModal';
 import SearchBar from '@/components/SearchBar/SearchBar';
 import { useAPIErrorsToast, useErrorToast } from '@/hooks/useErrorToast';
+import RefreshModelCatalog from '../RefreshModelCatalog';
 
 const generateQuery = (table: string) => `SELECT * FROM ${table}`;
 
@@ -203,6 +204,7 @@ const TableSelector = ({
                 />
               </Box>
               <HStack spacing={3} flex={1} justifyContent='flex-end'>
+                <RefreshModelCatalog source_id={connector_id} />
                 <Button
                   variant='shell'
                   onClick={getPreview}