Added preselected / disabled on create permission (#2236)

src/clients/authorization/PermissionDetails.tsx

@@ -46,7 +46,7 @@ export default function PermissionDetails() {
   const { register, control, reset, errors, handleSubmit } = form;
 
   const history = useHistory();
-  const { id, realm, permissionType, permissionId } = useParams<
+  const { id, realm, permissionType, permissionId, selectedId } = useParams<
     NewPermissionParams & PermissionDetailsParams
   >();
 
@@ -287,6 +287,9 @@ export default function PermissionDetails() {
                   name="resources"
                   searchFunction="listResources"
                   clientId={id}
+                  preSelected={
+                    permissionType === "scope" ? undefined : selectedId
+                  }
                   variant={
                     permissionType === "scope"
                       ? SelectVariant.typeahead
@@ -309,7 +312,11 @@ export default function PermissionDetails() {
                 validated={errors.scopes ? "error" : "default"}
                 isRequired
               >
-                <ScopeSelect clientId={id} resourceId={resourcesIds?.[0]} />
+                <ScopeSelect
+                  clientId={id}
+                  resourceId={resourcesIds?.[0]}
+                  preSelected={selectedId}
+                />
               </FormGroup>
             )}
             <FormGroup

src/clients/authorization/Resources.tsx

@@ -218,6 +218,7 @@ export const AuthorizationResources = ({ clientId }: ResourcesProps) => {
                           realm,
                           id: clientId,
                           permissionType: "resource",
+                          selectedId: resource._id,
                         })}
                       />
                     )}

src/clients/authorization/ResourcesPolicySelect.tsx

@@ -12,6 +12,12 @@ type ResourcesPolicySelectProps = {
   clientId: string;
   searchFunction: keyof Pick<Clients, "listPolicies" | "listResources">;
   variant?: SelectVariant;
+  preSelected?: string;
+};
+
+type Policies = {
+  id?: string;
+  name?: string;
 };
 
 export const ResourcesPolicySelect = ({
@@ -19,12 +25,13 @@ export const ResourcesPolicySelect = ({
   searchFunction,
   clientId,
   variant = SelectVariant.typeaheadMulti,
+  preSelected,
 }: ResourcesPolicySelectProps) => {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
 
   const { control } = useFormContext<PolicyRepresentation>();
-  const [items, setItems] = useState<JSX.Element[]>([]);
+  const [items, setItems] = useState<Policies[]>([]);
   const [search, setSearch] = useState("");
   const [open, setOpen] = useState(false);
 
@@ -41,21 +48,21 @@ export const ResourcesPolicySelect = ({
         id: "_id" in p ? p._id : "id" in p ? p.id : undefined,
         name: p.name,
       })),
-    (policies) =>
+    (policies) => setItems(policies),
-      setItems(
+    [search]
-        policies.map((p) => (
+  );
+
+  const toSelectOptions = () =>
+    items.map((p) => (
       <SelectOption key={p.id} value={p.id}>
         {p.name}
       </SelectOption>
-        ))
+    ));
-      ),
-    [search]
-  );
 
   return (
     <Controller
       name={name}
-      defaultValue={[]}
+      defaultValue={preSelected ? [preSelected] : []}
       control={control}
       render={({ onChange, value }) => (
         <Select
@@ -64,7 +71,7 @@ export const ResourcesPolicySelect = ({
           onToggle={setOpen}
           onFilter={(_, filter) => {
             setSearch(filter);
-            return items;
+            return toSelectOptions();
           }}
           onClear={() => {
             onChange([]);
@@ -81,8 +88,9 @@ export const ResourcesPolicySelect = ({
           }}
           isOpen={open}
           aria-labelledby={t(name)}
+          isDisabled={!!preSelected}
         >
-          {items}
+          {toSelectOptions()}
         </Select>
       )}
     />

src/clients/authorization/ScopeSelect.tsx

@@ -9,9 +9,14 @@ import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 type ScopeSelectProps = {
   clientId: string;
   resourceId?: string;
+  preSelected?: string;
 };
 
-export const ScopeSelect = ({ clientId, resourceId }: ScopeSelectProps) => {
+export const ScopeSelect = ({
+  clientId,
+  resourceId,
+  preSelected,
+}: ScopeSelectProps) => {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
 
@@ -57,7 +62,7 @@ export const ScopeSelect = ({ clientId, resourceId }: ScopeSelectProps) => {
   return (
     <Controller
       name="scopes"
-      defaultValue={[]}
+      defaultValue={preSelected ? [preSelected] : []}
       control={control}
       rules={{ validate: (value) => value.length > 0 }}
       render={({ onChange, value }) => (
@@ -85,6 +90,7 @@ export const ScopeSelect = ({ clientId, resourceId }: ScopeSelectProps) => {
           isOpen={open}
           aria-labelledby={t("scopes")}
           validated={errors.scopes ? "error" : "default"}
+          isDisabled={!!preSelected}
         >
           {toSelectOptions(scopes)}
         </Select>

src/clients/authorization/Scopes.tsx

@@ -208,6 +208,7 @@ export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
                             realm,
                             id: clientId,
                             permissionType: "scope",
+                            selectedId: scope.id,
                           })}
                         />
                       )}

src/clients/routes/NewPermission.ts

@@ -9,10 +9,11 @@ export type NewPermissionParams = {
   realm: string;
   id: string;
   permissionType: PermissionType;
+  selectedId?: string;
 };
 
 export const NewPermissionRoute: RouteDef = {
-  path: "/:realm/clients/:id/authorization/permission/new/:permissionType",
+  path: "/:realm/clients/:id/authorization/permission/new/:permissionType/:selectedId?",
   component: lazy(() => import("../authorization/PermissionDetails")),
   breadcrumb: (t) => t("clients:createPermission"),
   access: "manage-clients",