Support enter for dialog (#149)

* support pressing 'enter' for deleting dialog * support pressing enter for dialogs
zilliztech · Dec 15, 2022 · 4c1f05d · 4c1f05d
1 parent 5526375
commit 4c1f05d
Show file tree

Hide file tree

Showing 16 changed files with 132 additions and 121 deletions.
diff --git a/client/src/components/customDialog/CustomDialog.tsx b/client/src/components/customDialog/CustomDialog.tsx
@@ -100,7 +100,7 @@ const CustomDialog: FC<CustomDialogType> = props => {
       onClose={handleCancel}
     >
       {type === 'notice' ? (
-        <>
+        <form onSubmit={handleConfirm}>
           <CustomDialogTitle
             classes={{ root: classes.title }}
             onClose={handleCancel}
@@ -121,15 +121,15 @@ const CustomDialog: FC<CustomDialogType> = props => {
               {cancelLabel}
             </CustomButton>
             <CustomButton
-              onClick={() => handleConfirm()}
+              type="submit"
               color="primary"
               variant="contained"
               className={confirmClass}
             >
               {confirmLabel}
             </CustomButton>
           </DialogActions>
-        </>
+        </form>
       ) : (
         CustomComponent
       )}

diff --git a/client/src/components/customDialog/DeleteDialogTemplate.tsx b/client/src/components/customDialog/DeleteDialogTemplate.tsx
@@ -66,55 +66,60 @@ const DeleteTemplate: FC<DeleteDialogContentType> = props => {
 
   return (
     <div className={classes.root}>
-      <CustomDialogTitle classes={{ root: classes.mb }} onClose={onCancelClick}>
-        {title}
-      </CustomDialogTitle>
+      <form onSubmit={onDeleteClick}>
+        <CustomDialogTitle
+          classes={{ root: classes.mb }}
+          onClose={onCancelClick}
+        >
+          {title}
+        </CustomDialogTitle>
 
-      <DialogContent>
-        <Typography variant="body1">{text}</Typography>
-        <Typography variant="body1" className={classes.mb}>
-          {dialogTrans('deleteTipAction')}
-          <strong
-            className={classes.btnLabel}
-          >{` ${label.toLowerCase()} `}</strong>
-          {dialogTrans('deleteTipPurpose')}
-        </Typography>
-        <TextField
-          value={value}
-          onChange={onChange}
-          InputLabelProps={{
-            classes: {
-              root: classes.label,
-            },
-          }}
-          InputProps={{
-            classes: {
-              input: classes.input,
-            },
-          }}
-          variant="filled"
-          fullWidth={true}
-        />
-      </DialogContent>
+        <DialogContent>
+          <Typography variant="body1">{text}</Typography>
+          <Typography variant="body1" className={classes.mb}>
+            {dialogTrans('deleteTipAction')}
+            <strong
+              className={classes.btnLabel}
+            >{` ${label.toLowerCase()} `}</strong>
+            {dialogTrans('deleteTipPurpose')}
+          </Typography>
+          <TextField
+            value={value}
+            onChange={onChange}
+            InputLabelProps={{
+              classes: {
+                root: classes.label,
+              },
+            }}
+            InputProps={{
+              classes: {
+                input: classes.input,
+              },
+            }}
+            variant="filled"
+            fullWidth={true}
+          />
+        </DialogContent>
 
-      <DialogActions className={classes.btnWrapper}>
-        <CustomButton
-          name="cancel"
-          onClick={onCancelClick}
-          className={classes.cancelBtn}
-        >
-          {btnTrans('cancel')}
-        </CustomButton>
-        <CustomButton
-          variant="contained"
-          onClick={onDeleteClick}
-          color="secondary"
-          disabled={!deleteReady}
-          name="delete"
-        >
-          {label}
-        </CustomButton>
-      </DialogActions>
+        <DialogActions className={classes.btnWrapper}>
+          <CustomButton
+            name="cancel"
+            onClick={onCancelClick}
+            className={classes.cancelBtn}
+          >
+            {btnTrans('cancel')}
+          </CustomButton>
+          <CustomButton
+            type="submit"
+            variant="contained"
+            color="secondary"
+            disabled={!deleteReady}
+            name="delete"
+          >
+            {label}
+          </CustomButton>
+        </DialogActions>
+      </form>
     </div>
   );
 };

diff --git a/client/src/components/customDialog/DialogTemplate.tsx b/client/src/components/customDialog/DialogTemplate.tsx
@@ -78,46 +78,55 @@ const DialogTemplate: FC<DialogContainerProps> = ({
 
   return (
     <section className={classes.wrapper}>
-      <div
-        ref={dialogRef}
-        className={`${classes.dialog} ${classes.block} ${dialogClass}`}
-      >
-        <CustomDialogTitle onClose={handleClose} showCloseIcon={showCloseIcon}>
-          {title}
-        </CustomDialogTitle>
-        <DialogContent>{children}</DialogContent>
-        {showActions && (
-          <DialogActions className={classes.actions}>
-            <div>{leftActions}</div>
-            <div>
-              {showCancel && (
-                <CustomButton onClick={onCancel} color="default" name="cancel">
-                  {cancel}
+      <form onSubmit={handleConfirm}>
+        <div
+          ref={dialogRef}
+          className={`${classes.dialog} ${classes.block} ${dialogClass}`}
+        >
+          <CustomDialogTitle
+            onClose={handleClose}
+            showCloseIcon={showCloseIcon}
+          >
+            {title}
+          </CustomDialogTitle>
+          <DialogContent>{children}</DialogContent>
+          {showActions && (
+            <DialogActions className={classes.actions}>
+              <div>{leftActions}</div>
+              <div>
+                {showCancel && (
+                  <CustomButton
+                    onClick={onCancel}
+                    color="default"
+                    name="cancel"
+                  >
+                    {cancel}
+                  </CustomButton>
+                )}
+                <CustomButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  disabled={confirmDisabled}
+                  name="confirm"
+                >
+                  {confirm}
                 </CustomButton>
-              )}
-              <CustomButton
-                variant="contained"
-                onClick={handleConfirm}
-                color="primary"
-                disabled={confirmDisabled}
-                name="confirm"
-              >
-                {confirm}
-              </CustomButton>
-            </div>
-          </DialogActions>
-        )}
-      </div>
+              </div>
+            </DialogActions>
+          )}
+        </div>
 
-      <div className={`${classes.block} ${classes.codeWrapper}`}>
-        {showCode && (
-          <CodeView
-            height={dialogHeight}
-            wrapperClass={classes.code}
-            data={codeBlocksData}
-          />
-        )}
-      </div>
+        <div className={`${classes.block} ${classes.codeWrapper}`}>
+          {showCode && (
+            <CodeView
+              height={dialogHeight}
+              wrapperClass={classes.code}
+              data={codeBlocksData}
+            />
+          )}
+        </div>
+      </form>
     </section>
   );
 };

diff --git a/client/src/i18n/cn/common.ts b/client/src/i18n/cn/common.ts
@@ -6,7 +6,6 @@ const commonTrans = {
     username: 'Username',
     password: 'Password',
     optional: '(optional)',
-
     ssl: 'SSL',
   },
   status: {

diff --git a/client/src/i18n/cn/dialog.ts b/client/src/i18n/cn/dialog.ts
@@ -9,7 +9,7 @@ const dialogTrans = {
   loadContent: `You are trying to load a {{type}} with data. Only loaded {{type}} can be searched.`,
   releaseContent: `You are trying to release a {{type}} with data. Please be aware that the data will no longer be available for search.`,
 
-  createTitle: `Create {{type}} in "{{name}}"`,
+  createTitle: `Create {{type}} on "{{name}}"`,
 };
 
 export default dialogTrans;
diff --git a/client/src/i18n/cn/search.ts b/client/src/i18n/cn/search.ts
@@ -1,11 +1,11 @@
 const searchTrans = {
-  firstTip: '1. Enter search vector {{dimensionTip}}',
-  secondTip: '2. Choose collection and field',
+  firstTip: '2. Enter search vector {{dimensionTip}}',
+  secondTip: '1. Choose collection and field',
   thirdTip: '3. Set search parameters',
   vectorPlaceholder: 'Please input your vector value here, e.g. [1, 2, 3, 4]',
-  collection: 'Choose Loaded Collection',
-  noCollection: 'No collection',
-  field: 'Choose Field',
+  collection: 'Choose loaded collection',
+  noCollection: 'No loaded collection',
+  field: 'Choose vector field',
   startTip: 'Start your vector search',
   empty: 'No result',
   result: 'Search Results',

diff --git a/client/src/i18n/cn/success.ts b/client/src/i18n/cn/success.ts
@@ -2,9 +2,9 @@ const successTrans = {
   connect: 'Connection to milvus successful',
   create: `{{name}} has been created.`,
   load: `{{name}} is loading.`,
-  delete: `{{name}} successfully dropped,`,
-  release: `{{name}} has been released,`,
-  update: `{{name}} has been updated,`,
+  delete: `{{name}} successfully dropped.`,
+  release: `{{name}} has been released.`,
+  update: `{{name}} has been updated.`,
 };
 
 export default successTrans;
diff --git a/client/src/i18n/cn/user.ts b/client/src/i18n/cn/user.ts
@@ -2,14 +2,14 @@ const userTrans = {
   createTitle: 'Create User',
   updateTitle: 'Update User',
   user: 'User',
-  deleteWarning: 'You are trying to delete user. This action cannot be undone.',
+  deleteWarning: 'You are trying to drop user. This action cannot be undone.',
   oldPassword: 'Current Password',
   newPassword: 'New Password',
   confirmPassword: 'Confirm Password',
   update: 'Update password',
   isNotSame: 'Not same as new password',
   deleteTip:
-    'Please select at least one item to delete and root can not be deleted.',
+    'Please select at least one item to drop and root can not be dropped.',
 };
 
 export default userTrans;
diff --git a/client/src/i18n/en/dialog.ts b/client/src/i18n/en/dialog.ts
@@ -9,7 +9,7 @@ const dialogTrans = {
   loadContent: `You are trying to load a {{type}} with data. Only loaded {{type}} can be searched.`,
   releaseContent: `You are trying to release a {{type}} with data. Please be aware that the data will no longer be available for search.`,
 
-  createTitle: `Create {{type}} in "{{name}}"`,
+  createTitle: `Create {{type}} on "{{name}}"`,
 };
 
 export default dialogTrans;
diff --git a/client/src/i18n/en/success.ts b/client/src/i18n/en/success.ts
@@ -2,9 +2,9 @@ const successTrans = {
   connect: 'Connection to milvus successful',
   create: `{{name}} has been created.`,
   load: `{{name}} is loading.`,
-  delete: `{{name}} successfully dropped,`,
-  release: `{{name}} has been released,`,
-  update: `{{name}} has been updated,`,
+  delete: `{{name}} successfully dropped.`,
+  release: `{{name}} has been released.`,
+  update: `{{name}} has been updated.`,
 };
 
 export default successTrans;
diff --git a/client/src/i18n/en/user.ts b/client/src/i18n/en/user.ts
@@ -2,14 +2,14 @@ const userTrans = {
   createTitle: 'Create User',
   updateTitle: 'Update User',
   user: 'User',
-  deleteWarning: 'You are trying to delete user. This action cannot be undone.',
+  deleteWarning: 'You are trying to drop user. This action cannot be undone.',
   oldPassword: 'Current Password',
   newPassword: 'New Password',
   confirmPassword: 'Confirm Password',
   update: 'Update password',
   isNotSame: 'Not same as new password',
   deleteTip:
-    'Please select at least one item to delete and root can not be deleted.',
+    'Please select at least one item to drop and root can not be dropped.',
 };
 
 export default userTrans;
diff --git a/client/src/pages/collections/Create.tsx b/client/src/pages/collections/Create.tsx
@@ -212,7 +212,7 @@ const CreateCollection: FC<CollectionCreateProps> = ({ handleCreate }) => {
       confirmDisabled={disabled || !allFieldsValid}
       dialogClass={classes.dialog}
     >
-      <form>
+      <>
         <fieldset className={classes.fieldset}>
           <legend>{collectionTrans('general')}</legend>
           {generalInfoConfigs.map(config => (
@@ -251,7 +251,7 @@ const CreateCollection: FC<CollectionCreateProps> = ({ handleCreate }) => {
             variant="filled"
           />
         </fieldset>
-      </form>
+      </>
     </DialogTemplate>
   );
 };

diff --git a/client/src/pages/partitions/Create.tsx b/client/src/pages/partitions/Create.tsx
@@ -68,14 +68,12 @@ const CreatePartition: FC<PartitionCreateProps> = ({
       handleConfirm={handleCreatePartition}
       confirmDisabled={disabled}
     >
-      <form>
-        <CustomInput
-          type="text"
-          textConfig={nameInputConfig}
-          checkValid={checkIsValid}
-          validInfo={validation}
-        />
-      </form>
+      <CustomInput
+        type="text"
+        textConfig={nameInputConfig}
+        checkValid={checkIsValid}
+        validInfo={validation}
+      />
     </DialogTemplate>
   );
 };

diff --git a/client/src/pages/user/Create.tsx b/client/src/pages/user/Create.tsx
@@ -88,7 +88,7 @@ const CreateUser: FC<CreateUserProps> = ({ handleCreate, handleClose }) => {
       handleConfirm={handleCreateUser}
       confirmDisabled={disabled}
     >
-      <form>
+      <>
         {createConfigs.map(v => (
           <CustomInput
             type="text"
@@ -98,7 +98,7 @@ const CreateUser: FC<CreateUserProps> = ({ handleCreate, handleClose }) => {
             key={v.label}
           />
         ))}
-      </form>
+      </>
     </DialogTemplate>
   );
 };