chore: use similar UI for realm name taken message (#148)

* fix: env switch back env title * chore: error ui use same ui on name taken err * chore: cleanup remove errant comment
bcgov · Dec 20, 2023 · 3997e70 · 3997e70
1 parent 2c79fb0
commit 3997e70
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/app/components/RealmForm.tsx b/app/components/RealmForm.tsx
@@ -12,7 +12,7 @@ import * as yup from 'yup';
 import kebabCase from 'lodash.kebabcase';
 import AsyncSelect from 'react-select/async';
 import { getIdirUserId, getIdirUsersByEmail } from 'services/azure';
-
+import { realmTakenError } from 'pages/custom-realm-form';
 const SForm = styled.form<{ collapse: boolean }>`
   display: grid;
   grid-template-columns: ${(props) => (props.collapse ? '1fr' : '1fr 1fr')};
@@ -199,7 +199,7 @@ export default function RealmForm({
   updatedMessage,
   collapse = false,
 }: Props) {
-  const [formErrors, setFormErrors] = useState<{ [key in keyof CustomRealmFormData]?: boolean }>({});
+  const [formErrors, setFormErrors] = useState<{ [key in keyof CustomRealmFormData]?: boolean | string }>({});
   const [otherPrimaryEndUsersSelected, setOtherPrimaryEndUsersSelected] = useState(
     hasOtherPrimaryEndUsers(formData.primaryEndUsers),
   );
@@ -264,7 +264,14 @@ export default function RealmForm({
       return;
     }
     setSubmittingForm(true);
-    onSubmit(submission).then(() => setSubmittingForm(false));
+    onSubmit(submission)
+      .catch((err) => {
+        if (err.message === realmTakenError) {
+          setFormErrors({ realm: 'Realm Name taken.' });
+          document.getElementById('realm-input')?.scrollIntoView();
+        }
+      })
+      .then(() => setSubmittingForm(false));
   };
 
   const loadBranches = async (division: string = 'Other') => {
@@ -323,7 +330,11 @@ export default function RealmForm({
             disabled={!schemaFields.includes('realm')}
           />
           {formErrors.realm && (
-            <p className="error-message">Realm name should contain only letters, underscores and hypens</p>
+            <p className="error-message">
+              {typeof formErrors.realm === 'string'
+                ? formErrors.realm
+                : 'Realm name should contain only letters, underscores and hypens'}
+            </p>
           )}
         </div>
 

diff --git a/app/pages/api/realms.ts b/app/pages/api/realms.ts
@@ -112,7 +112,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       // the keycloak console may not show realm if the realm name was manually updated through console
       // however the realm id does not change
       if (existingRealm.length > 0 || existingKcRealms.find((realm) => realm.id === data.realm)) {
-        return res.status(400).json({ success: false, error: 'Realm name already taken' });
+        return res.status(409).json({ success: false, error: 'Realm name already taken' });
       }
 
       let newRealm = await prisma.roster.create({

diff --git a/app/pages/custom-realm-form.tsx b/app/pages/custom-realm-form.tsx
@@ -10,13 +10,16 @@ import RealmForm from 'components/RealmForm';
 import styled from 'styled-components';
 import { createRealmSchema } from 'validators/create-realm';
 
+export const realmTakenError = 'name taken';
+
 const Container = styled.div`
   padding: 0 2em;
 `;
 
 const defaultData: CustomRealmFormData = {
   realm: '',
   purpose: '',
+  productName: '',
   primaryEndUsers: [],
   productOwnerEmail: '',
   productOwnerIdirUserId: '',
@@ -47,13 +50,16 @@ function NewRealmForm({ alert }: Props) {
   const handleSubmit = async (data: CustomRealmFormData) => {
     const [response, err] = await submitRealmRequest(data);
     if (err) {
-      const content = err?.response?.data?.error || 'Network request failure. Please try again.';
-      alert.show({
-        variant: 'danger',
-        fadeOut: 10000,
-        closable: true,
-        content,
-      });
+      if (err.response.status === 409) {
+        throw new Error(realmTakenError);
+      } else {
+        alert.show({
+          variant: 'danger',
+          fadeOut: 10000,
+          closable: true,
+          content: 'Network request failure. Please try again.',
+        });
+      }
     } else {
       router.push('/').then(() => {
         setModalConfig({