feat(wren-ui): adjust model metadata drawer to be read-only

wren-ui/src/components/pages/modeling/MetadataDrawer.tsx

@@ -38,7 +38,7 @@ export default function MetadataDrawer(props: Props) {
     <Drawer
       visible={visible}
       title={referenceName}
-      width={750}
+      width={760}
       closable
       destroyOnClose
       onClose={onClose}

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

@@ -1,4 +1,4 @@
-import { Typography, Row, Col } from 'antd';
+import { Typography } from 'antd';
 import FieldTable from '@/components/table/FieldTable';
 import CalculatedFieldTable from '@/components/table/CalculatedFieldTable';
 import RelationTable from '@/components/table/RelationTable';
@@ -17,21 +17,14 @@ export interface Props {
 
 export default function ModelMetadata(props: Props) {
   const {
-    displayName,
-    sourceTableName,
     referenceName,
     fields = [],
     calculatedFields = [],
     relations = [],
-    properties,
   } = props || {};
 
-  const FieldMetadataTable =
-    makeMetadataBaseTable(FieldTable)(UpdateMetadataModal);
   const CalculatedFieldMetadataTable =
     makeMetadataBaseTable(CalculatedFieldTable)(UpdateMetadataModal);
-  const RelationMetadataTable =
-    makeMetadataBaseTable(RelationTable)(UpdateMetadataModal);
 
   // To convert edit value for update metadata modal
   const editMetadataValue = (value) => {
@@ -48,50 +41,16 @@ export default function ModelMetadata(props: Props) {
 
   return (
     <>
-      <Row>
-        <Col span={12}>
-          <div className="mb-6">
-            <Typography.Text className="d-block gray-7 mb-2">
-              Display name
-            </Typography.Text>
-            <div>{displayName || '-'}</div>
-          </div>
-        </Col>
-        <Col span={12}>
-          <div className="mb-6">
-            <Typography.Text className="d-block gray-7 mb-2">
-              Reference name
-            </Typography.Text>
-            <div>{referenceName || '-'}</div>
-          </div>
-        </Col>
-        <Col span={24}>
-          <div className="mb-6">
-            <Typography.Text className="d-block gray-7 mb-2">
-              Description
-            </Typography.Text>
-            <div>{properties?.description || '-'}</div>
-          </div>
-        </Col>
-        <Col span={12}>
-          <div className="mb-6">
-            <Typography.Text className="d-block gray-7 mb-2">
-              Source table name
-            </Typography.Text>
-            <div>{sourceTableName || '-'}</div>
-          </div>
-        </Col>
-      </Row>
+      <div className="mb-6">
+        <Typography.Text className="d-block gray-7 mb-2">Name</Typography.Text>
+        <div>{referenceName || '-'}</div>
+      </div>
 
       <div className="mb-6">
         <Typography.Text className="d-block gray-7 mb-2">
           Fields ({fields.length})
         </Typography.Text>
-        <FieldMetadataTable
-          dataSource={fields}
-          onEditValue={editMetadataValue}
-          onSubmitRemote={submitMetadata}
-        />
+        <FieldTable dataSource={fields} />
       </div>
 
       {!!calculatedFields.length && (
@@ -111,11 +70,7 @@ export default function ModelMetadata(props: Props) {
         <Typography.Text className="d-block gray-7 mb-2">
           Relations ({relations.length})
         </Typography.Text>
-        <RelationMetadataTable
-          dataSource={relations}
-          onEditValue={editMetadataValue}
-          onSubmitRemote={submitMetadata}
-        />
+        <RelationTable dataSource={relations} />
       </div>
     </>
   );

wren-ui/src/components/table/BaseTable.tsx

@@ -15,10 +15,9 @@ export const COLUMN = {
     render: (name) => name || '-',
   },
   REFERENCE_NAME: {
-    title: 'Reference name',
+    title: 'Name',
     dataIndex: 'referenceName',
     key: 'referenceName',
-    width: 150,
     ellipsis: true,
     render: (name) => name || '-',
   },
@@ -46,10 +45,25 @@ export const COLUMN = {
       );
     },
   },
+  RELATION_FROM: {
+    title: 'From',
+    dataIndex: 'fromField',
+    key: 'fromField',
+    ellipsis: true,
+    render: (fromField) => `${fromField.model}.${fromField.field}`,
+  },
+  RELATION_TO: {
+    title: 'To',
+    dataIndex: 'toField',
+    key: 'toField',
+    ellipsis: true,
+    render: (toField) => `${toField.model}.${toField.field}`,
+  },
   RELATION: {
-    title: 'Relation',
+    title: 'Relation type',
     dataIndex: 'joinType',
     key: 'joinType',
+    width: 130,
     render: (joinType) => getJoinTypeText(joinType),
   },
   DESCRIPTION: {

wren-ui/src/components/table/FieldTable.tsx

@@ -5,14 +5,7 @@ export default function FieldTable(props: Props) {
   return (
     <BaseTable
       {...props}
-      columns={
-        columns || [
-          COLUMN.DISPLAY_NAME,
-          COLUMN.REFERENCE_NAME,
-          COLUMN.TYPE,
-          COLUMN.DESCRIPTION,
-        ]
-      }
+      columns={columns || [COLUMN.REFERENCE_NAME, COLUMN.TYPE]}
     />
   );
 }

wren-ui/src/components/table/RelationTable.tsx

@@ -7,8 +7,9 @@ export default function RelationTable(props: Props) {
       {...props}
       columns={
         columns || [
-          COLUMN.DISPLAY_NAME,
           COLUMN.REFERENCE_NAME,
+          COLUMN.RELATION_FROM,
+          COLUMN.RELATION_TO,
           COLUMN.RELATION,
           COLUMN.DESCRIPTION,
         ]