Make JavaScript authorization policy read-only (#19594)

Closes #19532

js/apps/admin-ui/src/clients/authorization/policy/JavaScript.tsx

@@ -33,6 +33,7 @@ export const JavaScript = () => {
             code={field.value}
             height="600px"
             language={Language.javascript}
+            isReadOnly={true}
           />
         )}
       />

js/apps/admin-ui/src/clients/authorization/policy/LogicSelector.tsx

@@ -6,7 +6,11 @@ import { HelpItem } from "ui-shared";
 
 const LOGIC_TYPES = ["POSITIVE", "NEGATIVE"] as const;
 
-export const LogicSelector = () => {
+type LogicSelectorProps = {
+  isDisabled: boolean;
+};
+
+export const LogicSelector = ({ isDisabled }: LogicSelectorProps) => {
   const { t } = useTranslation("clients");
   const { control } = useFormContext();
 
@@ -39,6 +43,7 @@ export const LogicSelector = () => {
                 onChange={() => field.onChange(type)}
                 label={t(`logicType.${type.toLowerCase()}`)}
                 className="pf-u-mb-md"
+                isDisabled={isDisabled}
               />
             ))}
           </>

js/apps/admin-ui/src/clients/authorization/policy/NameDescription.tsx

@@ -8,9 +8,13 @@ import { KeycloakTextArea } from "../../../components/keycloak-text-area/Keycloa
 
 type NameDescriptionProps = {
   prefix: string;
+  isDisabled: boolean;
 };
 
-export const NameDescription = ({ prefix }: NameDescriptionProps) => {
+export const NameDescription = ({
+  prefix,
+  isDisabled,
+}: NameDescriptionProps) => {
   const { t } = useTranslation("clients");
   const {
     register,
@@ -35,6 +39,7 @@ export const NameDescription = ({ prefix }: NameDescriptionProps) => {
         }
       >
         <KeycloakTextInput
+          isDisabled={isDisabled}
           id="kc-name"
           data-testid="name"
           validated={
@@ -58,6 +63,7 @@ export const NameDescription = ({ prefix }: NameDescriptionProps) => {
         helperTextInvalid={t("common:maxLength", { length: 255 })}
       >
         <KeycloakTextArea
+          isDisabled={isDisabled}
           id="kc-description"
           data-testid="description"
           validated={

js/apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx

@@ -71,6 +71,7 @@ export default function PolicyDetails() {
   const { addAlert, addError } = useAlerts();
 
   const [policy, setPolicy] = useState<PolicyRepresentation>();
+  const isDisabled = policyType === "js";
 
   useFetch(
     async () => {
@@ -164,9 +165,13 @@ export default function PolicyDetails() {
     return <KeycloakSpinner />;
   }
 
-  const ComponentType = isValidComponentType(policyType)
-    ? COMPONENTS[policyType]
-    : COMPONENTS["js"];
+  function getComponentType() {
+    return isValidComponentType(policyType)
+      ? COMPONENTS[policyType]
+      : COMPONENTS["js"];
+  }
+
+  const ComponentType = getComponentType();
 
   return (
     <>
@@ -198,13 +203,14 @@ export default function PolicyDetails() {
           role="view-clients"
         >
           <FormProvider {...form}>
-            <NameDescription prefix="policy" />
+            <NameDescription isDisabled={isDisabled} prefix="policy" />
             <ComponentType />
-            <LogicSelector />
+            <LogicSelector isDisabled={isDisabled} />
           </FormProvider>
           <ActionGroup>
             <div className="pf-u-mt-md">
               <Button
+                isDisabled={isDisabled}
                 variant={ButtonVariant.primary}
                 className="pf-u-mr-md"
                 type="submit"