refactor(CE): models creation flow

ui/src/hooks/models/useModelData.tsx

@@ -0,0 +1,46 @@
+import { useStore } from '@/stores';
+import useQueryWrapper from '@/hooks/useQueryWrapper';
+import { ModelAPIResponse, getModelById } from '@/services/models';
+import { PrefillValue } from '@/views/Models/ModelsForm/DefineModel/DefineSQL/types.ts';
+import { GetModelByIdResponse, QueryType } from '@/views/Models/types.ts';
+import EntityItem from '@/components/EntityItem';
+
+const useModelData = (modelId: string) => {
+  const activeWorkspaceId = useStore((state) => state.workspaceId);
+
+  const { data, isLoading, isError } = useQueryWrapper<
+    ModelAPIResponse<GetModelByIdResponse>,
+    Error
+  >(['modelByID', activeWorkspaceId, modelId], () => getModelById(modelId || ''), {
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    retryOnMount: true,
+    refetchOnReconnect: true,
+  });
+
+  const prefillValues: PrefillValue = {
+    connector_id: data?.data?.attributes.connector.id || '',
+    connector_icon: (
+      <EntityItem
+        name={data?.data?.attributes.connector.name || ''}
+        icon={data?.data?.attributes.connector.icon || ''}
+      />
+    ),
+    connector_name: data?.data?.attributes.connector.name || '',
+    model_name: data?.data?.attributes.name || '',
+    model_description: data?.data?.attributes.description || '',
+    primary_key: data?.data?.attributes.primary_key || '',
+    query: data?.data?.attributes.query || '',
+    query_type: data?.data?.attributes.query_type || QueryType.RawSql,
+    model_id: modelId,
+  };
+
+  return {
+    prefillValues,
+    data,
+    isLoading,
+    isError,
+  };
+};
+
+export default useModelData;

ui/src/views/Models/EditModel/EditModel.tsx

@@ -2,23 +2,27 @@ import { useQuery } from '@tanstack/react-query';
 import DefineSQL from '../ModelsForm/DefineModel/DefineSQL';
 import { useParams } from 'react-router-dom';
 import { Box } from '@chakra-ui/react';
+<<<<<<< HEAD
 import { getModelById } from '@/services/models';
 import { PrefillValue } from '../ModelsForm/DefineModel/DefineSQL/types';
+=======
+>>>>>>> 8f1c21c9 (refactor(CE): models creation flow)
 import TopBar from '@/components/TopBar';
 import ContentContainer from '@/components/ContentContainer';
-import EntityItem from '@/components/EntityItem';
 import Loader from '@/components/Loader';
 import { Step } from '@/components/Breadcrumbs/types';
 import { useRef } from 'react';
 import { QueryType } from '../types';
 import TableSelector from '../ModelsForm/DefineModel/TableSelector';
+import useModelData from '@/hooks/models/useModelData.tsx';
 
 const EditModel = (): JSX.Element => {
   const params = useParams();
   const containerRef = useRef(null);
 
   const model_id = params.id || '';
 
+<<<<<<< HEAD
   const { data, isLoading, isError } = useQuery({
     queryKey: ['modelByID'],
     queryFn: () => getModelById(model_id || ''),
@@ -42,6 +46,9 @@ const EditModel = (): JSX.Element => {
     query_type: data?.data?.attributes.query_type || QueryType.RawSql,
     model_id: model_id,
   };
+=======
+  const { prefillValues, data, isLoading, isError } = useModelData(model_id);
+>>>>>>> 8f1c21c9 (refactor(CE): models creation flow)
 
   if (isLoading) {
     return <Loader />;

ui/src/views/Models/ViewModel/ModelActions.tsx

@@ -1,8 +1,7 @@
-import { Box, Popover, PopoverBody, PopoverContent, PopoverTrigger } from '@chakra-ui/react';
-import { FiMoreHorizontal } from 'react-icons/fi';
 import EditModelModal from './EditModelModal';
 import { PrefillValue } from '../ModelsForm/DefineModel/DefineSQL/types';
 import DeleteModelModal from './DeleteModelModal';
+<<<<<<< HEAD
 
 const ModelActions = ({ prefillValues }: { prefillValues: PrefillValue }) => (
   <>
@@ -32,6 +31,23 @@ const ModelActions = ({ prefillValues }: { prefillValues: PrefillValue }) => (
       </PopoverContent>
     </Popover>
   </>
+=======
+import RoleAccess from '@/enterprise/components/RoleAccess';
+import { UserActions } from '@/enterprise/types';
+import HorizontalMenuActions from '@/components/HorizontalMenuActions';
+
+const ModelActions = ({ prefillValues }: { prefillValues: PrefillValue }) => (
+  <HorizontalMenuActions backgroundColor='gray.200' contentMargin='12px' borderColor='gray.400'>
+    <>
+      <RoleAccess location='model' type='item' action={UserActions.Update}>
+        <EditModelModal {...prefillValues} />
+      </RoleAccess>
+      <RoleAccess location='model' type='item' action={UserActions.Delete}>
+        <DeleteModelModal />
+      </RoleAccess>
+    </>
+  </HorizontalMenuActions>
+>>>>>>> 8f1c21c9 (refactor(CE): models creation flow)
 );
 
 export default ModelActions;

ui/src/views/Models/ViewModel/ViewModel.tsx

@@ -1,6 +1,5 @@
-import { PrefillValue } from '../ModelsForm/DefineModel/DefineSQL/types';
 import TopBar from '@/components/TopBar/TopBar';
-import { getModelById, putModelById, ModelAPIResponse } from '@/services/models';
+import { putModelById } from '@/services/models';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Step } from '@/components/Breadcrumbs/types';
 
@@ -27,32 +26,28 @@ import EntityItem from '@/components/EntityItem';
 import Loader from '@/components/Loader';
 import moment from 'moment';
 import ModelActions from './ModelActions';
-import { CustomToastStatus } from '@/components/Toast/index';
+import { CustomToastStatus } from '@/components/Toast';
 import useCustomToast from '@/hooks/useCustomToast';
+<<<<<<< HEAD
 import useQueryWrapper from '@/hooks/useQueryWrapper';
 import { GetModelByIdResponse } from '@/views/Models/types';
 import { useStore } from '@/stores';
+=======
+
+import RoleAccess from '@/enterprise/components/RoleAccess';
+>>>>>>> 8f1c21c9 (refactor(CE): models creation flow)
 import { FiLayout } from 'react-icons/fi';
 import { QueryType } from '@/views/Models/types';
+import useModelData from '@/hooks/models/useModelData.tsx';
 
 const ViewModel = (): JSX.Element => {
   const params = useParams();
   const showToast = useCustomToast();
   const navigate = useNavigate();
 
-  const activeWorkspaceId = useStore((state) => state.workspaceId);
-
   const model_id = params.id || '';
 
-  const { data, isLoading, isError } = useQueryWrapper<
-    ModelAPIResponse<GetModelByIdResponse>,
-    Error
-  >(['modelByID', activeWorkspaceId, model_id], () => getModelById(model_id || ''), {
-    refetchOnMount: true,
-    refetchOnWindowFocus: true,
-    retryOnMount: true,
-    refetchOnReconnect: true,
-  });
+  const { prefillValues, data, isLoading, isError } = useModelData(model_id);
 
   const validationSchema = Yup.object().shape({
     primaryKey: Yup.string().required('Primary Key is required'),
@@ -68,23 +63,6 @@ const ViewModel = (): JSX.Element => {
 
   if (!data) return <></>;
 
-  const prefillValues: PrefillValue = {
-    connector_id: data?.data?.attributes.connector.id || '',
-    connector_icon: (
-      <EntityItem
-        name={data?.data?.attributes.connector.name || ''}
-        icon={data?.data?.attributes.connector.icon || ''}
-      />
-    ),
-    connector_name: data?.data?.attributes.connector.name || '',
-    model_name: data?.data?.attributes.name || '',
-    model_description: data?.data?.attributes.description || '',
-    primary_key: data?.data?.attributes.primary_key || '',
-    query: data?.data?.attributes.query || '',
-    query_type: data?.data?.attributes.query_type || QueryType.RawSql,
-    model_id: model_id,
-  };
-
   async function handleModelUpdate(primary_key: string) {
     const updatePayload: UpdateModelPayload = {
       model: {