Merge pull request #622 from subquery/optimise/more-details

feat: improve update & latest. add categories search.

package.json

@@ -20,7 +20,7 @@
     "@rainbow-me/rainbowkit": "^1.2.0",
     "@sentry/react": "^7.57.0",
     "@subql/apollo-links": "^1.2.3",
-    "@subql/components": "1.0.3-21",
+    "@subql/components": "1.0.3-22",
     "@subql/contract-sdk": "^0.100.3",
     "@subql/network-clients": "^0.100.0",
     "@subql/network-config": "^0.100.0",

src/components/DeploymentInfo/DeploymentInfo.tsx

@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import UnsafeWarn from '@components/UnsafeWarn';
+import { useGetIfUnsafeDeployment } from '@hooks/useGetIfUnsafeDeployment';
 import { Spinner, Typography } from '@subql/components';
 import { Tooltip } from 'antd';
 
@@ -22,10 +23,11 @@ type Props = {
   deploymentVersion?: string;
 };
 
-export const DeploymentInfo: React.FC<Props> = ({ project, deploymentId, deploymentVersion }) => {
+export const DeploymentInfo: React.FC<Props> = ({ project, deploymentId }) => {
   const { t } = useTranslation();
 
   const deploymentMeta = useDeploymentMetadata(deploymentId);
+  const { isUnsafe } = useGetIfUnsafeDeployment(deploymentId);
   const versionHeader = deploymentMeta.data?.version
     ? `${deploymentMeta.data?.version} - ${t('projects.deploymentId')}:`
     : t('projects.deploymentId');
@@ -42,7 +44,7 @@ export const DeploymentInfo: React.FC<Props> = ({ project, deploymentId, deploym
                 {project?.name}
               </Typography>
             )}
-            {!!deploymentMeta.data?.unsafe && <UnsafeWarn></UnsafeWarn>}
+            {isUnsafe && <UnsafeWarn></UnsafeWarn>}
           </div>
           <div className={project?.name ? '' : styles.deployment}>
             <Typography variant="small" className={styles.text}>

src/components/Modal/Modal.module.css

@@ -1,5 +1,5 @@
 .steps {
-  margin: 1.25rem 0;
+  margin: 0 0 1.25rem 0;
 }
 
 .title {

src/components/Modal/Modal.tsx

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from 'react';
-import { Modal as AntDModal, Steps as AntDSteps, Typography } from 'antd';
+import { Modal as SubqlModal } from '@subql/components';
+import { Steps as AntDSteps, Typography } from 'antd';
 import clsx from 'clsx';
 
 import Spinner from '../Spinner';
@@ -54,7 +55,7 @@ export const Modal: React.FC<ModalProps> = ({
   };
 
   return (
-    <AntDModal
+    <SubqlModal
       title={<Title />}
       open={visible}
       onOk={onOk}
@@ -76,6 +77,6 @@ export const Modal: React.FC<ModalProps> = ({
           {content}
         </>
       )}
-    </AntDModal>
+    </SubqlModal>
   );
 };

src/components/ProjectDeployments/ProjectDeployments.tsx

@@ -4,8 +4,9 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCreateDeployment } from '@hooks';
-import { Markdown, Typography } from '@subql/components';
-import { Form, Modal, Radio } from 'antd';
+import { Markdown, Modal, openNotification, Typography } from '@subql/components';
+import { parseError } from '@utils';
+import { Form, Radio } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
@@ -23,19 +24,18 @@ type Props = {
   deployments: Deployment[];
   projectId: string;
   onRefresh: () => Promise<void>;
+  currentDeploymentCid?: string;
 };
 
-const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, onRefresh }) => {
+const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDeploymentCid, onRefresh }) => {
   const { t } = useTranslation();
   const updateDeployment = useCreateDeployment(projectId);
   const [deploymentModal, setDeploymentModal] = React.useState<boolean>(false);
   const [form] = useForm();
   const [currentDeployment, setCurrentDeployment] = React.useState<Deployment>();
-  const [addDeploymentsLoading, setAddDeploymentsLoading] = React.useState(false);
 
   const handleSubmitUpdate = async () => {
     try {
-      setAddDeploymentsLoading(true);
       await form.validateFields();
       await updateDeployment({
         ...currentDeployment,
@@ -44,8 +44,11 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, onRefresh
       await onRefresh();
       form.resetFields();
       setDeploymentModal(false);
-    } finally {
-      setAddDeploymentsLoading(false);
+    } catch (e) {
+      openNotification({
+        type: 'error',
+        description: parseError(e),
+      });
     }
   };
 
@@ -62,16 +65,9 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, onRefresh
           },
         }}
         okText="Update"
-        okButtonProps={{
-          shape: 'round',
-          size: 'large',
-          loading: addDeploymentsLoading,
-        }}
-        onOk={() => {
-          handleSubmitUpdate();
-        }}
+        onSubmit={handleSubmitUpdate}
       >
-        <div style={{ padding: '12px 0' }}>
+        <div>
           <Form form={form} layout="vertical">
             <Form.Item label="Deployment Description" name="description" rules={[{ required: true }]}>
               <Markdown
@@ -103,7 +99,7 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, onRefresh
               </TableCell>
               <TableCell>
                 <p className={styles.value}>
-                  <Radio checked>RECOMMENDED</Radio>
+                  <Radio checked={currentDeploymentCid === deployment.deploymentId}>RECOMMENDED</Radio>
                 </p>
               </TableCell>
               <TableCell>

src/components/ProjectHeader/ProjectHeader.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import UnsafeWarn from '@components/UnsafeWarn';
 import { ProjectDetailsQuery } from '@hooks/useProjectFromQuery';
 import { Address, Typography } from '@subql/components';
+import { Button } from 'antd';
 import dayjs from 'dayjs';
 
 import Detail from '../Detail';
@@ -54,13 +55,24 @@ const ProjectHeader: React.FC<Props> = ({ project, versions, currentVersion, isU
       <div className={styles.inner}>
         <div className={styles.upper}>
           <div className={styles.titleVersion}>
-            <Typography variant="h4" className={styles.name} weight={600}>
+            <Typography variant="h4" className={styles.name} weight={600} style={{ marginRight: 8 }}>
               {project.metadata.name}
             </Typography>
             {isUnsafeDeployment && <UnsafeWarn></UnsafeWarn>}
             <VersionDropdown />
           </div>
           <Address address={project.owner} size="small" />
+
+          <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+            {project.metadata.categories &&
+              project.metadata.categories.map((val) => {
+                return (
+                  <Button key={val} type="primary" shape="round" className="staticButton">
+                    {val}
+                  </Button>
+                );
+              })}
+          </div>
         </div>
         <div className={styles.lower}>
           {currentVersion && <Detail label={t('projectHeader.deploymentId')} value={currentVersion} canCopy={true} />}

src/components/index.ts

@@ -25,7 +25,6 @@ export * from './ModalInput';
 export * from './NumberInput';
 export * from './ModalApproveToken';
 export * from './ModalClaimIndexerRewards';
-export * from './ModalStatus';
 export * from './TransactionModal';
 export * from './AppSidebar';
 export * from './AppPageHeader';

src/containers/ProjectRegistry.ts

@@ -86,7 +86,6 @@ function useProjectRegistryImpl(logger: Logger) {
       throw new Error('ProjectRegistry contract not available');
     }
 
-    // TODO: front-end page need to provide an option for user to choose if they want to set this deployment as latest
     const tx = await contracts.projectRegistry.addOrUpdateDeployment(
       id,
       cidToBytes32(deploymentId),

src/hooks/useDeploymentMetadata.tsx

@@ -12,7 +12,6 @@ type DeploymentMetadata = {
   versionId: string;
   version: string;
   description: string;
-  unsafe: boolean;
 };
 
 export async function getDeploymentMetadata(
@@ -23,13 +22,12 @@ export async function getDeploymentMetadata(
 
   const raw = await catSingle(versionId);
 
-  const { version, description, unsafe = false } = JSON.parse(Buffer.from(raw).toString('utf8'));
+  const { version, description } = JSON.parse(Buffer.from(raw).toString('utf8'));
 
   return {
     versionId,
     version,
     description,
-    unsafe,
   };
 }