Merge pull request #630 from subquery/feat/up-user-friendly

feat: up user exp friendly

src/components/Expand/Expand.tsx

@@ -0,0 +1,68 @@
+// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
+import { Typography } from '@subql/components';
+import { useUpdate } from 'ahooks';
+
+import styles from './index.module.less';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const Expand: FC<IProps> = (props) => {
+  const update = useUpdate();
+
+  const [expanded, setExpanded] = useState(false);
+  const childrenRef = useRef<HTMLDivElement | null>(null);
+
+  const setCallback = useCallback((ref: HTMLDivElement) => {
+    childrenRef.current = ref;
+    update();
+  }, []);
+
+  const showExpandIcon = useMemo(() => {
+    const rect = childrenRef.current?.getBoundingClientRect();
+    return !!(rect?.height && rect.height > 400);
+  }, [childrenRef.current, props.children]);
+
+  return (
+    <div>
+      <div
+        ref={setCallback}
+        style={{
+          position: 'fixed',
+          zIndex: '-9999',
+          opacity: 0,
+        }}
+      >
+        {props.children}
+      </div>
+
+      <div
+        className={styles.expand}
+        style={{
+          height: expanded ? 'auto' : showExpandIcon ? 400 : 'auto',
+          overflow: 'hidden',
+        }}
+      >
+        {props.children}
+      </div>
+
+      {showExpandIcon && (
+        <div style={{ display: 'flex', justifyContent: 'center', padding: 12 }}>
+          <Typography.Link
+            active
+            onClick={() => {
+              setExpanded(!expanded);
+            }}
+          >
+            {expanded ? 'Show Less' : 'Show More'}
+          </Typography.Link>
+        </div>
+      )}
+    </div>
+  );
+};
+export default Expand;

src/components/ProjectDeployments/ProjectDeployments.module.less

@@ -9,3 +9,16 @@
 .copy {
   margin-left: 6px;
 }
+
+
+@media screen and (max-width: 1599px) {
+  .descriptionMarkdown {
+    width: 300px;
+  } 
+}
+
+@media screen and (min-width: 1600px) {
+  .descriptionMarkdown {
+    width: auto;
+  } 
+}

src/components/ProjectDeployments/ProjectDeployments.tsx

@@ -3,15 +3,15 @@
 
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import Expand from '@components/Expand/Expand';
 import { useCreateDeployment } from '@hooks';
-import { Markdown, Modal, openNotification, Typography } from '@subql/components';
+import { Markdown, Modal, openNotification, TableTitle, Typography } from '@subql/components';
 import { parseError } from '@utils';
-import { Form, Radio } from 'antd';
+import { Form, Radio, Table } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import dayjs from 'dayjs';
 
 import { NewDeployment } from '../../models';
-import { Table, TableBody, TableCell, TableHead, TableRow } from '../Table';
 import { Copy } from '..';
 import styles from './ProjectDeployments.module.less';
 
@@ -67,70 +67,86 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDe
         <div>
           <Form form={form} layout="vertical">
             <Form.Item label="Deployment Description" name="description" rules={[{ required: true }]}>
-              <Markdown
-                value={form.getFieldValue('description')}
-                onChange={(e) => {
-                  form.setFieldValue('description', e);
-                }}
-              ></Markdown>
+              <div className={styles.markdownWrapper}>
+                <Markdown
+                  value={form.getFieldValue('description')}
+                  onChange={(e) => {
+                    form.setFieldValue('description', e);
+                  }}
+                ></Markdown>
+              </div>
             </Form.Item>
           </Form>
         </div>
       </Modal>
-      <Table aria-label="simple table">
-        <TableHead>
-          <TableRow>
-            <TableCell>{t('deployments.header1')}</TableCell>
-            <TableCell>RECOMMENDED</TableCell>
-            <TableCell>{t('deployments.header2')}</TableCell>
-            <TableCell>{t('deployments.header3')}</TableCell>
-            <TableCell>{t('deployments.header4')}</TableCell>
-            <TableCell>{t('general.action')}</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {deployments.map((deployment, index) => (
-            <TableRow key={index}>
-              <TableCell>
-                <p className={styles.value}>{deployment.version}</p>
-              </TableCell>
-              <TableCell>
-                <p className={styles.value}>
-                  <Radio checked={currentDeploymentCid === deployment.deploymentId}>RECOMMENDED</Radio>
-                </p>
-              </TableCell>
-              <TableCell>
-                <div className={styles.deploymentId}>
-                  <p className={styles.value}>{deployment.deploymentId}</p>
-                  <Copy value={deployment.deploymentId} className={styles.copy} />
-                </div>
-              </TableCell>
-              <TableCell>
-                <div className={styles.descriptionMarkdown}>
-                  <Markdown.Preview>{deployment.description}</Markdown.Preview>
-                </div>
-              </TableCell>
-              <TableCell>
-                <p className={styles.value}>
-                  {deployment.createdAt ? dayjs(deployment.createdAt).utc(true).fromNow() : 'N/A'}
-                </p>
-              </TableCell>
-              <TableCell>
-                <Typography.Link
-                  active
-                  onClick={() => {
-                    form.setFieldValue('description', deployment.description || '');
-                    setCurrentDeployment(deployment);
-                    setDeploymentModal(true);
-                  }}
-                >
-                  Edit
-                </Typography.Link>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+      <Table
+        columns={[
+          {
+            dataIndex: 'version',
+            key: 'version',
+            title: <TableTitle>{t('deployments.header1')}</TableTitle>,
+            render: (val) => <Typography>{val}</Typography>,
+          },
+          {
+            dataIndex: 'deploymentId',
+            key: 'deploymentId',
+            title: <TableTitle>RECOMMENDED</TableTitle>,
+            render: (val) => (
+              <p className={styles.value}>
+                <Radio checked={currentDeploymentCid === val}>RECOMMENDED</Radio>
+              </p>
+            ),
+          },
+          {
+            dataIndex: 'deploymentId',
+            key: 'deploymentIdText',
+            title: <TableTitle>{t('deployments.header2')}</TableTitle>,
+            render: (val) => (
+              <div className={styles.deploymentId}>
+                <p className={styles.value}>{val}</p>
+                <Copy value={val} className={styles.copy} />
+              </div>
+            ),
+          },
+          {
+            dataIndex: 'description',
+            key: 'description',
+            title: <TableTitle>{t('deployments.header3')}</TableTitle>,
+            render: (val) => (
+              <div className={styles.descriptionMarkdown}>
+                <Expand>
+                  <Markdown.Preview>{val}</Markdown.Preview>
+                </Expand>
+              </div>
+            ),
+          },
+          {
+            dataIndex: 'createdAt',
+            key: 'createdAt',
+            title: <TableTitle>{t('deployments.header4')}</TableTitle>,
+            render: (val) => <p className={styles.value}>{val ? dayjs(val).utc(true).fromNow() : 'N/A'}</p>,
+          },
+          {
+            dataIndex: 'version',
+            key: 'version',
+            title: <TableTitle>{t('general.action')}</TableTitle>,
+            render: (_, record) => (
+              <Typography.Link
+                active
+                onClick={() => {
+                  form.setFieldValue('description', record.description || '');
+                  setCurrentDeployment(record);
+                  setDeploymentModal(true);
+                }}
+              >
+                Edit
+              </Typography.Link>
+            ),
+            fixed: 'right',
+          },
+        ]}
+        dataSource={deployments}
+      ></Table>
     </>
   );
 };

src/components/ProjectOverview/ProjectOverview.tsx

@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { BsGithub, BsGlobe } from 'react-icons/bs';
+import Expand from '@components/Expand/Expand';
 import NewCard from '@components/NewCard';
 import { useRouteQuery } from '@hooks';
 import { ProjectDetailsQuery } from '@hooks/useProjectFromQuery';
@@ -62,7 +63,9 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
     <div className={styles.container}>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         <div style={{ width: 720 }}>
-          <Markdown.Preview>{metadata.description || 'N/A'}</Markdown.Preview>
+          <Expand>
+            <Markdown.Preview>{metadata.description || 'N/A'}</Markdown.Preview>
+          </Expand>
         </div>
         <div className={styles.column} style={{ marginTop: 16 }}>
           <ExternalLink icon="globe" link={metadata.websiteUrl} />
@@ -74,7 +77,9 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
             {t('projectOverview.deploymentDescription')}
           </Typography>
           <div style={{ width: 670, marginTop: 8 }}>
-            <Markdown.Preview>{deploymentDescription || 'N/A'}</Markdown.Preview>
+            <Expand>
+              <Markdown.Preview>{deploymentDescription || 'N/A'}</Markdown.Preview>
+            </Expand>
           </div>
         </div>
       </div>