feat(wren-ui): integrate preview to model metadata drawer

wren-ui/src/apollo/client/graphql/model.generated.ts

@@ -43,6 +43,13 @@ export type DeleteModelMutationVariables = Types.Exact<{
 
 export type DeleteModelMutation = { __typename?: 'Mutation', deleteModel: boolean };
 
+export type PreviewModelDataMutationVariables = Types.Exact<{
+  where: Types.WhereIdInput;
+}>;
+
+
+export type PreviewModelDataMutation = { __typename?: 'Mutation', previewModelData: any };
+
 export const CommonColumnFragmentDoc = gql`
     fragment CommonColumn on DetailedColumn {
   displayName
@@ -271,4 +278,35 @@ export function useDeleteModelMutation(baseOptions?: Apollo.MutationHookOptions<
       }
 export type DeleteModelMutationHookResult = ReturnType<typeof useDeleteModelMutation>;
 export type DeleteModelMutationResult = Apollo.MutationResult<DeleteModelMutation>;
-export type DeleteModelMutationOptions = Apollo.BaseMutationOptions<DeleteModelMutation, DeleteModelMutationVariables>;
+export type DeleteModelMutationOptions = Apollo.BaseMutationOptions<DeleteModelMutation, DeleteModelMutationVariables>;
+export const PreviewModelDataDocument = gql`
+    mutation PreviewModelData($where: WhereIdInput!) {
+  previewModelData(where: $where)
+}
+    `;
+export type PreviewModelDataMutationFn = Apollo.MutationFunction<PreviewModelDataMutation, PreviewModelDataMutationVariables>;
+
+/**
+ * __usePreviewModelDataMutation__
+ *
+ * To run a mutation, you first call `usePreviewModelDataMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `usePreviewModelDataMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [previewModelDataMutation, { data, loading, error }] = usePreviewModelDataMutation({
+ *   variables: {
+ *      where: // value for 'where'
+ *   },
+ * });
+ */
+export function usePreviewModelDataMutation(baseOptions?: Apollo.MutationHookOptions<PreviewModelDataMutation, PreviewModelDataMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<PreviewModelDataMutation, PreviewModelDataMutationVariables>(PreviewModelDataDocument, options);
+      }
+export type PreviewModelDataMutationHookResult = ReturnType<typeof usePreviewModelDataMutation>;
+export type PreviewModelDataMutationResult = Apollo.MutationResult<PreviewModelDataMutation>;
+export type PreviewModelDataMutationOptions = Apollo.BaseMutationOptions<PreviewModelDataMutation, PreviewModelDataMutationVariables>;

wren-ui/src/apollo/client/graphql/model.ts

@@ -104,3 +104,9 @@ export const DELETE_MODEL = gql`
     deleteModel(where: $where)
   }
 `;
+
+export const PREVIEW_MODEL_DATA = gql`
+  mutation PreviewModelData($where: WhereIdInput!) {
+    previewModelData(where: $where)
+  }
+`;

wren-ui/src/components/pages/modeling/metadata/ModelMetadata.tsx

@@ -1,21 +1,16 @@
-import { Col, Row, Typography } from 'antd';
+import { Col, Row, Typography, Button } from 'antd';
 import FieldTable from '@/components/table/FieldTable';
 import CalculatedFieldTable from '@/components/table/CalculatedFieldTable';
 import RelationTable from '@/components/table/RelationTable';
+import PreviewData from '@/components/dataPreview/PreviewData';
+import { DiagramModel } from '@/utils/data';
+import { usePreviewModelDataMutation } from '@/apollo/client/graphql/model.generated';
 
-export interface Props {
-  displayName: string;
-  referenceName: string;
-  sourceTableName: string;
-  fields: any[];
-  calculatedFields: any[];
-  relationFields: any[];
-  description: string;
-  properties: Record<string, any>;
-}
+export type Props = DiagramModel;
 
 export default function ModelMetadata(props: Props) {
   const {
+    modelId,
     displayName,
     referenceName,
     fields = [],
@@ -24,6 +19,15 @@ export default function ModelMetadata(props: Props) {
     description,
   } = props || {};
 
+  const [previewModelData, previewModelDataResult] =
+    usePreviewModelDataMutation({
+      onError: (error) => console.error(error),
+    });
+
+  const onPreviewData = () => {
+    previewModelData({ variables: { where: { id: modelId } } });
+  };
+
   return (
     <>
       <Row className="mb-6">
@@ -71,6 +75,25 @@ export default function ModelMetadata(props: Props) {
           <RelationTable dataSource={relationFields} showExpandable />
         </div>
       )}
+
+      <div className="mb-6">
+        <Typography.Text className="d-block gray-7 mb-2">
+          Data preview (100 rows)
+        </Typography.Text>
+        <Button
+          onClick={onPreviewData}
+          loading={previewModelDataResult.loading}
+        >
+          Preview data
+        </Button>
+        <div className="my-3">
+          <PreviewData
+            error={previewModelDataResult.error}
+            loading={previewModelDataResult.loading}
+            previewData={previewModelDataResult.data?.previewModelData}
+          />
+        </div>
+      </div>
     </>
   );
 }

wren-ui/src/components/pages/modeling/metadata/ViewMetadata.tsx

@@ -17,15 +17,12 @@ export default function ViewMetadata(props: Props) {
     viewId,
   } = props || {};
 
-  const [previewViewDataMutation, previewViewDataResult] =
-    usePreviewViewDataMutation({
-      onError: (error) => console.error(error),
-    });
+  const [previewViewData, previewViewDataResult] = usePreviewViewDataMutation({
+    onError: (error) => console.error(error),
+  });
 
   const onPreviewData = () => {
-    previewViewDataMutation({
-      variables: { where: { id: viewId } },
-    });
+    previewViewData({ variables: { where: { id: viewId } } });
   };
 
   // View only can input Name (alias), so it should show alias as Name in metadata.
@@ -70,11 +67,9 @@ export default function ViewMetadata(props: Props) {
         </Button>
         <div className="my-3">
           <PreviewData
-            {...{
-              error: previewViewDataResult.error,
-              loading: previewViewDataResult.loading,
-              previewData: previewViewDataResult?.data?.previewViewData,
-            }}
+            error={previewViewDataResult.error}
+            loading={previewViewDataResult.loading}
+            previewData={previewViewDataResult?.data?.previewViewData}
           />
         </div>
       </div>