add release and load dialog ui

client/src/components/customDialog/CustomDialog.tsx

@@ -22,9 +22,15 @@ const useStyles = makeStyles((theme: Theme) =>
       borderRadius: '8px',
       padding: 0,
     },
+    noticePaper: {
+      maxWidth: '480px',
+    },
     paperSm: {
       maxWidth: '80%',
     },
+    dialogContent: {
+      marginTop: theme.spacing(4),
+    },
     title: {
       // padding: theme.spacing(4),
       '& p': {
@@ -84,8 +90,10 @@ const CustomDialog: FC<CustomDialogType> = props => {
   return (
     <Dialog
       classes={{
-        paper: classes.paper,
-        paperWidthSm: classes.paperSm,
+        paper: `${classes.paper} ${
+          type === 'notice' ? classes.noticePaper : ''
+        }`,
+        paperWidthSm: type === 'notice' ? '' : classes.paperSm,
         container: `${containerClass}`,
       }}
       open={open}
@@ -99,7 +107,11 @@ const CustomDialog: FC<CustomDialogType> = props => {
           >
             <Typography variant="body1">{title}</Typography>
           </CustomDialogTitle>
-          {component && <DialogContent>{component}</DialogContent>}
+          {component && (
+            <DialogContent classes={{ root: classes.dialogContent }}>
+              {component}
+            </DialogContent>
+          )}
           <DialogActions classes={{ spacing: classes.padding }}>
             <CustomButton
               onClick={() => handleCancel()}

client/src/i18n/cn/collection.ts

@@ -25,6 +25,18 @@ const collectionTrans = {
   autoId: 'Auto ID',
   dimension: 'Dimension',
   newBtn: 'add new field',
+
+  // load dialog
+  loadTitle: 'Load Collection',
+  loadContent:
+    'You are trying to load a collection with data. Only loaded collection can be searched.',
+  loadConfirmLabel: 'Load',
+
+  // release dialog
+  releaseTitle: 'Release Collection',
+  releaseContent:
+    'You are trying to release a collection with data. Please be aware that the data will no longer be available for search.',
+  releaseConfirmLabel: 'Release',
 };
 
 export default collectionTrans;

client/src/i18n/en/collection.ts

@@ -25,6 +25,18 @@ const collectionTrans = {
   autoId: 'Auto ID',
   dimension: 'Dimension',
   newBtn: 'add new field',
+
+  // load dialog
+  loadTitle: 'Load Collection',
+  loadContent:
+    'You are trying to load a collection with data. Only loaded collection can be searched.',
+  loadConfirmLabel: 'Load',
+
+  // release dialog
+  releaseTitle: 'Release Collection',
+  releaseContent:
+    'You are trying to release a collection with data. Please be aware that the data will no longer be available for search.',
+  releaseConfirmLabel: 'Release',
 };
 
 export default collectionTrans;

client/src/pages/collections/Collections.tsx

@@ -11,7 +11,7 @@ import EmptyCard from '../../components/cards/EmptyCard';
 import Status from '../../components/status/Status';
 import { useTranslation } from 'react-i18next';
 import { StatusEnum } from '../../components/status/Types';
-import { makeStyles, Theme, Link } from '@material-ui/core';
+import { makeStyles, Theme, Link, Typography } from '@material-ui/core';
 import StatusIcon from '../../components/status/StatusIcon';
 import CustomToolTip from '../../components/customToolTip/CustomToolTip';
 import { rootContext } from '../../context/Root';
@@ -26,6 +26,11 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '20px',
     marginLeft: theme.spacing(0.5),
   },
+
+  dialogContent: {
+    lineHeight: '24px',
+    fontSize: '16px',
+  },
 }));
 
 const Collections = () => {
@@ -93,6 +98,51 @@ const Collections = () => {
     handleCloseDialog();
   };
 
+  const handleRelease = async (data: CollectionView) => {};
+
+  const handleLoad = async (data: CollectionView) => {};
+
+  const handleAction = (data: CollectionView) => {
+    const actionType: 'release' | 'load' =
+      data.status === StatusEnum.loaded ? 'release' : 'load';
+
+    const actionsMap = {
+      release: {
+        title: t('releaseTitle'),
+        component: (
+          <Typography className={classes.dialogContent}>
+            {t('releaseContent')}
+          </Typography>
+        ),
+        confirmLabel: t('releaseConfirmLabel'),
+        confirm: () => handleRelease(data),
+      },
+      load: {
+        title: t('loadTitle'),
+        component: (
+          <Typography className={classes.dialogContent}>
+            {t('loadContent')}
+          </Typography>
+        ),
+        confirmLabel: t('loadConfirmLabel'),
+        confirm: () => handleLoad(data),
+      },
+    };
+
+    const { title, component, confirmLabel, confirm } = actionsMap[actionType];
+
+    setDialog({
+      open: true,
+      type: 'notice',
+      params: {
+        title,
+        component,
+        confirmLabel,
+        confirm,
+      },
+    });
+  };
+
   const toolbarConfigs: ToolBarConfig[] = [
     {
       label: t('create'),
@@ -173,7 +223,7 @@ const Collections = () => {
       actionBarConfigs: [
         {
           onClick: (e: React.MouseEvent, row: CollectionView) => {
-            console.log('action row', row);
+            handleAction(row);
           },
           icon: 'load',
           label: 'load',