Fix multiple things related to adding service accunts

* Form validation (for empty value and max. length), which is relflected on the UI
* Removed success/error toasts
* Display errors on the form itself
* Refresh the service account list after one is created
* Hide "Add service account" button if the user isn't the owner of the team
* Fix mobile device responsivity
* Submit form via enter key press

Author: VilppeRiskidev

apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccounts.css

@@ -37,4 +37,24 @@
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-bold);
   }
+
+  .service-accounts__form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-md);
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  .service-accounts__nickname-input {
+    display: flex;
+    flex-direction: row;
+    gap: var(--gap-md);
+    align-items: center;
+  }
+
+  .service-accounts__nickname-input-max-length {
+    color: var(--color-text-tertiary);
+    font-size: var(--font-size-body-sm);
+  }
 }

apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccounts.tsx

@@ -76,6 +76,11 @@ export default function ServiceAccounts() {
 
   const toast = useToast();
 
+  const currentUserTeam = outletContext.currentUser?.teams_full?.find(
+    (team) => team.name === teamName
+  );
+  const isOwner = currentUserTeam?.role === "owner";
+
   async function serviceAccountRevalidate() {
     revalidator.revalidate();
   }
@@ -84,11 +89,6 @@ export default function ServiceAccounts() {
   const removeServiceAccountAction = ApiAction({
     endpoint: teamServiceAccountRemove,
     onSubmitSuccess: () => {
-      toast.addToast({
-        csVariant: "success",
-        children: `Service account removed`,
-        duration: 4000,
-      });
       serviceAccountRevalidate();
     },
     onSubmitError: (error) => {
@@ -180,11 +180,13 @@ export default function ServiceAccounts() {
         <div className="settings-items__meta">
           <p className="settings-items__title">Service accounts</p>
           <p className="settings-items__description">Your loyal servants</p>
-          <AddServiceAccountForm
-            teamName={teamName}
-            config={outletContext.requestConfig}
-            serviceAccountRevalidate={serviceAccountRevalidate}
-          />
+          {isOwner && (
+            <AddServiceAccountForm
+              teamName={teamName}
+              config={outletContext.requestConfig}
+              serviceAccountRevalidate={serviceAccountRevalidate}
+            />
+          )}
         </div>
         <div className="settings-items__content">
           <NewTable
@@ -210,6 +212,7 @@ function AddServiceAccountForm(props: {
   const [addedServiceAccountToken, setAddedServiceAccountToken] = useState("");
   const [addedServiceAccountNickname, setAddedServiceAccountNickname] =
     useState("");
+  const [error, setError] = useState<string | null>(null);
 
   function onSuccess(
     result: Awaited<ReturnType<typeof teamAddServiceAccount>>
@@ -219,8 +222,6 @@ function AddServiceAccountForm(props: {
     setAddedServiceAccountNickname(result.nickname);
   }
 
-  const toast = useToast();
-
   function formFieldUpdateAction(
     state: TeamServiceAccountAddRequestData,
     action: {
@@ -238,14 +239,17 @@ function AddServiceAccountForm(props: {
     nickname: "",
   });
 
+  const isValid =
+    formInputs.nickname.trim().length > 0 && formInputs.nickname.length <= 32;
+
   type SubmitorOutput = Awaited<ReturnType<typeof teamAddServiceAccount>>;
 
   async function submitor(data: typeof formInputs): Promise<SubmitorOutput> {
     return await teamAddServiceAccount({
       config: props.config,
       params: { team_name: props.teamName },
       queryParams: {},
-      data: { nickname: data.nickname },
+      data: { nickname: data.nickname.trim() },
     });
   }
 
@@ -265,18 +269,15 @@ function AddServiceAccountForm(props: {
     submitor,
     onSubmitSuccess: (result) => {
       onSuccess(result);
-      toast.addToast({
-        csVariant: "success",
-        children: `Service account added`,
-        duration: 4000,
-      });
+      setError(null);
+      // Refresh the service accounts list to show the newly created account
+      // TODO: When API returns identifier in response, we can append the new
+      // service account to the list instead of refreshing from backend
+      props.serviceAccountRevalidate?.();
     },
     onSubmitError: (error) => {
-      toast.addToast({
-        csVariant: "danger",
-        children: `Error occurred: ${error.message || "Unknown error"}`,
-        duration: 8000,
-      });
+      const message = `Error occurred: ${error.message || "Unknown error"}`;
+      setError(message);
     },
   });
 
@@ -286,6 +287,7 @@ function AddServiceAccountForm(props: {
       setServiceAccountAdded(false);
       setAddedServiceAccountToken("");
       setAddedServiceAccountNickname("");
+      setError(null);
       updateFormFieldState({ field: "nickname", value: "" });
     }
   };
@@ -321,26 +323,47 @@ function AddServiceAccountForm(props: {
         </Modal.Body>
       ) : (
         <Modal.Body>
-          <div>
-            Enter the nickname of the service account you wish to add to the
-            team <span>{props.teamName}</span>
-          </div>
-          <div>
-            <NewTextInput
-              onChange={(e) => {
-                updateFormFieldState({
-                  field: "nickname",
-                  value: e.target.value,
-                });
-              }}
-              placeholder={"ExampleName"}
-            />
-          </div>
+          <form
+            className="service-accounts__form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (isValid) {
+                strongForm.submit();
+              }
+            }}
+          >
+            <div>
+              Enter the nickname of the service account you wish to add to the
+              team <span>{props.teamName}</span>
+            </div>
+            <div className="service-accounts__nickname-input">
+              <NewTextInput
+                onChange={(e) => {
+                  updateFormFieldState({
+                    field: "nickname",
+                    value: e.target.value,
+                  });
+                }}
+                placeholder={"ExampleName"}
+                maxLength={32}
+              />
+              <div className="service-accounts__nickname-input-max-length">
+                Max. 32 characters
+              </div>
+            </div>
+            {error && (
+              <div style={{ width: "100%" }}>
+                <NewAlert csVariant="danger">{error}</NewAlert>
+              </div>
+            )}
+          </form>
         </Modal.Body>
       )}
       {serviceAccountAdded ? null : (
         <Modal.Footer>
-          <NewButton onClick={strongForm.submit}>Add Service Account</NewButton>
+          <NewButton onClick={strongForm.submit} disabled={!isValid}>
+            Add Service Account
+          </NewButton>
         </Modal.Footer>
       )}
     </Modal>

apps/cyberstorm-remix/app/styles/settingsItem.css

@@ -58,4 +58,18 @@
     border-radius: var(--radius-md);
     background: var(--color-surface-default);
   }
+
+  @media (width <= 48rem) {
+    .settings-items__item {
+      flex-direction: column;
+    }
+
+    .settings-items__meta {
+      width: 100%;
+    }
+
+    .settings-items__content {
+      width: 100%;
+    }
+  }
 }