Limit the use of the same shortcut name when adding a shortcut

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>

plugins/shortcuts/src/AddShortcut.tsx

@@ -61,23 +61,18 @@ export const AddShortcut = ({
   const [formValues, setFormValues] = useState<FormValues>();
   const open = Boolean(anchorEl);
   const analytics = useAnalytics();
-  const shortcutData = api.get();
 
   const handleSave: SubmitHandler<FormValues> = async ({ url, title }) => {
     analytics.captureEvent('click', `Clicked 'Save' in AddShortcut`);
     const shortcut: Omit<Shortcut, 'id'> = { url, title };
 
     try {
-      if (shortcutData.some(shortcutTitle => shortcutTitle.title === title)) {
-        throw new Error(`Shortcut Title '${title}' already Exist`);
-      } else {
-        await api.add(shortcut);
-        alertApi.post({
-          message: `Added shortcut '${title}' to your sidebar`,
-          severity: 'success',
-          display: 'transient',
-        });
-      }
+      await api.add(shortcut);
+      alertApi.post({
+        message: `Added shortcut '${title}' to your sidebar`,
+        severity: 'success',
+        display: 'transient',
+      });
     } catch (error) {
       alertApi.post({
         message: `Could not add shortcut: ${error.message}`,

plugins/shortcuts/src/EditShortcut.tsx

@@ -60,7 +60,6 @@ export const EditShortcut = ({
   const alertApi = useApi(alertApiRef);
   const open = Boolean(anchorEl);
   const analytics = useAnalytics();
-  const shortcutData = api.get();
 
   const handleSave: SubmitHandler<FormValues> = async ({ url, title }) => {
     analytics.captureEvent('click', `Clicked 'Save' in Edit Shortcut`);
@@ -71,16 +70,12 @@ export const EditShortcut = ({
     };
 
     try {
-      if (shortcutData.some(shortcutTitle => shortcutTitle.title === title)) {
-        throw new Error(`Shortcut Title '${title}' already Exist`);
-      } else {
-        await api.update(newShortcut);
-        alertApi.post({
-          message: `Updated shortcut '${title}'`,
-          severity: 'success',
-          display: 'transient',
-        });
-      }
+      await api.update(newShortcut);
+      alertApi.post({
+        message: `Updated shortcut '${title}'`,
+        severity: 'success',
+        display: 'transient',
+      });
     } catch (error) {
       alertApi.post({
         message: `Could not update shortcut: ${error.message}`,

plugins/shortcuts/src/ShortcutForm.tsx

@@ -24,6 +24,7 @@ import {
   TextField,
 } from '@material-ui/core';
 import { FormValues } from './types';
+import { ShortcutApi } from './api';
 
 const useStyles = makeStyles(theme => ({
   field: {
@@ -39,6 +40,7 @@ const useStyles = makeStyles(theme => ({
 type Props = {
   formValues?: FormValues;
   onSave: SubmitHandler<FormValues>;
+  api: ShortcutApi;
   onClose: () => void;
   allowExternalLinks?: boolean;
 };
@@ -46,10 +48,12 @@ type Props = {
 export const ShortcutForm = ({
   formValues,
   onSave,
+  api,
   onClose,
   allowExternalLinks,
 }: Props) => {
   const classes = useStyles();
+  const shortcutData = api.get();
   const {
     handleSubmit,
     reset,
@@ -63,6 +67,12 @@ export const ShortcutForm = ({
     },
   });
 
+  const titleIsUnique = async (title: string) => {
+    if (shortcutData.some(shortcutTitle => shortcutTitle.title === title))
+      return 'This title name is already exist';
+    return true;
+  };
+
   useEffect(() => {
     reset(formValues);
   }, [reset, formValues]);
@@ -112,6 +122,7 @@ export const ShortcutForm = ({
           control={control}
           rules={{
             required: true,
+            validate: titleIsUnique,
             minLength: {
               value: 2,
               message: 'Must be at least 2 characters',