Process UXD review for Client Scopes (#1026)

src/client-scopes/ClientScopesSection.tsx

@@ -33,9 +33,11 @@ import { toNewClientScope } from "./routes/NewClientScope";
 
 import "./client-scope.css";
 import { toClientScope } from "./routes/ClientScope";
+import { useWhoAmI } from "../context/whoami/WhoAmI";
 
 export const ClientScopesSection = () => {
   const { realm } = useRealm();
+  const { whoAmI } = useWhoAmI();
   const { t } = useTranslation("client-scopes");
 
   const adminClient = useAdminClient();
@@ -55,9 +57,10 @@ export const ClientScopesSection = () => {
       await adminClient.clientScopes.listDefaultClientScopes();
     const optionalScopes =
       await adminClient.clientScopes.listDefaultOptionalClientScopes();
+    const clientScopes = await adminClient.clientScopes.find();
 
-    const clientScopes = (await adminClient.clientScopes.find()).map(
-      (scope) => {
+    return clientScopes
+      .map((scope) => {
         return {
           ...scope,
           type: defaultScopes.find(
@@ -70,10 +73,8 @@ export const ClientScopesSection = () => {
             ? ClientScope.optional
             : AllClientScopes.none,
         };
-      }
-    );
-
-    return clientScopes;
+      })
+      .sort((a, b) => a.name!.localeCompare(b.name!, whoAmI.getLocale()));
   };
 
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
@@ -232,8 +233,11 @@ export const ClientScopesSection = () => {
               name: "name",
               cellRenderer: ClientScopeDetailLink,
             },
-            { name: "description", cellFormatters: [emptyFormatter()] },
-            { name: "type", cellRenderer: TypeSelector },
+            {
+              name: "type",
+              displayKey: "client-scopes:assignedType",
+              cellRenderer: TypeSelector,
+            },
             {
               name: "protocol",
               displayKey: "client-scopes:protocol",
@@ -246,6 +250,7 @@ export const ClientScopesSection = () => {
               cellFormatters: [emptyFormatter()],
               transforms: [cellWidth(15)],
             },
+            { name: "description", cellFormatters: [emptyFormatter()] },
           ]}
         />
       </PageSection>

src/client-scopes/details/ScopeForm.tsx

@@ -284,18 +284,25 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           name="attributes.gui-order"
           defaultValue={1}
           control={control}
-          render={({ onChange, value }) => (
-            <NumberInput
-              type="text"
-              id="kc-gui-order"
-              value={value}
-              onPlus={() => onChange(value + 1)}
-              onMinus={() => onChange(value - 1)}
-              onChange={(event) =>
-                onChange(Number((event.target as HTMLInputElement).value))
-              }
-            />
-          )}
+          render={({ onChange, value }) => {
+            const MIN_VALUE = 0;
+            const setValue = (newValue: number) =>
+              onChange(Math.max(newValue, MIN_VALUE));
+
+            return (
+              <NumberInput
+                id="kc-gui-order"
+                value={value}
+                min={MIN_VALUE}
+                onPlus={() => setValue(value + 1)}
+                onMinus={() => setValue(value - 1)}
+                onChange={(event) => {
+                  const newValue = Number(event.currentTarget.value);
+                  setValue(!isNaN(newValue) ? newValue : 0);
+                }}
+              />
+            );
+          }}
         />
       </FormGroup>
       <ActionGroup>

src/client-scopes/messages.ts

@@ -8,6 +8,7 @@ export default {
       "Client scopes allow you to define a common set of protocol mappers and roles, which are shared between multiple clients",
     searchFor: "Search for client scope",
     protocol: "Protocol",
+    assignedType: "Assigned type",
     displayOrder: "Display order",
     type: "Type",
     deleteClientScope: "Delete client scope {{name}}",