Added way to edit flow name and description (#2775)

src/authentication/components/AddFlowDropdown.tsx

@@ -14,7 +14,7 @@ import { AddStepModal, FlowType } from "./modals/AddStepModal";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { AddSubFlowModal, Flow } from "./modals/AddSubFlowModal";
 
-type EditFlowDropdownProps = {
+type AddFlowDropdownProps = {
   execution: ExpandableExecution;
   onAddExecution: (
     execution: ExpandableExecution,
@@ -23,11 +23,11 @@ type EditFlowDropdownProps = {
   onAddFlow: (execution: ExpandableExecution, flow: Flow) => void;
 };
 
-export const EditFlowDropdown = ({
+export const AddFlowDropdown = ({
   execution,
   onAddExecution,
   onAddFlow,
-}: EditFlowDropdownProps) => {
+}: AddFlowDropdownProps) => {
   const { t } = useTranslation("authentication");
   const adminClient = useAdminClient();
 
@@ -45,7 +45,7 @@ export const EditFlowDropdown = ({
   );
 
   return (
-    <Tooltip content={t("common:edit")}>
+    <Tooltip content={t("common:add")}>
       <>
         <Dropdown
           isPlain

src/authentication/components/EditFlow.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useForm } from "react-hook-form";
+import {
+  Button,
+  ButtonVariant,
+  Form,
+  FormGroup,
+  Modal,
+  ModalVariant,
+  Tooltip,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import { PencilAltIcon } from "@patternfly/react-icons";
+
+import type { ExpandableExecution } from "../execution-model";
+import useToggle from "../../utils/useToggle";
+import { HelpItem } from "../../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
+import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
+
+type EditFlowProps = {
+  execution: ExpandableExecution;
+  onRowChange: (execution: ExpandableExecution) => void;
+};
+
+export const EditFlow = ({ execution, onRowChange }: EditFlowProps) => {
+  const { t } = useTranslation("authentication");
+  const { register, errors, reset, handleSubmit } = useForm();
+
+  const [show, toggle] = useToggle();
+
+  const update = (values: ExpandableExecution) => {
+    onRowChange({ ...execution, ...values });
+    toggle();
+  };
+
+  useEffect(() => {
+    reset(execution);
+  }, [execution, reset]);
+
+  return (
+    <>
+      <Tooltip content={t("common:edit")}>
+        <Button
+          variant="plain"
+          data-testid={`${execution.id}-edit`}
+          aria-label={t("common:edit")}
+          onClick={toggle}
+        >
+          <PencilAltIcon />
+        </Button>
+      </Tooltip>
+      {show && (
+        <Modal
+          title={t("editFlow")}
+          isOpen={true}
+          onClose={toggle}
+          variant={ModalVariant.small}
+          actions={[
+            <Button
+              id="modal-confirm"
+              key="confirm"
+              onClick={handleSubmit(update)}
+              data-testid="confirm"
+            >
+              {t("edit")}
+            </Button>,
+            <Button
+              data-testid="cancel"
+              id="modal-cancel"
+              key="cancel"
+              variant={ButtonVariant.link}
+              onClick={toggle}
+            >
+              {t("common:cancel")}
+            </Button>,
+          ]}
+        >
+          <Form isHorizontal>
+            <FormGroup
+              label={t("common:name")}
+              fieldId="name"
+              helperTextInvalid={t("common:required")}
+              validated={
+                errors.displayName
+                  ? ValidatedOptions.error
+                  : ValidatedOptions.default
+              }
+              isRequired
+              labelIcon={
+                <HelpItem
+                  helpText="authentication-help:name"
+                  fieldLabelId="name"
+                />
+              }
+            >
+              <KeycloakTextInput
+                type="text"
+                id="name"
+                name="displayName"
+                data-testid="displayName"
+                ref={register({ required: true })}
+                validated={
+                  errors.displayName
+                    ? ValidatedOptions.error
+                    : ValidatedOptions.default
+                }
+              />
+            </FormGroup>
+            <FormGroup
+              label={t("common:description")}
+              fieldId="kc-description"
+              labelIcon={
+                <HelpItem
+                  helpText="authentication-help:description"
+                  fieldLabelId="description"
+                />
+              }
+              validated={
+                errors.description
+                  ? ValidatedOptions.error
+                  : ValidatedOptions.default
+              }
+              helperTextInvalid={errors.description?.message}
+            >
+              <KeycloakTextArea
+                ref={register({
+                  maxLength: {
+                    value: 255,
+                    message: t("common:maxLength", { length: 255 }),
+                  },
+                })}
+                type="text"
+                id="kc-description"
+                name="description"
+                data-testid="description"
+                validated={
+                  errors.description
+                    ? ValidatedOptions.error
+                    : ValidatedOptions.default
+                }
+              />
+            </FormGroup>
+          </Form>
+        </Modal>
+      )}
+    </>
+  );
+};

src/authentication/components/FlowRow.tsx

@@ -21,7 +21,8 @@ import type { Flow } from "./modals/AddSubFlowModal";
 import { FlowTitle } from "./FlowTitle";
 import { FlowRequirementDropdown } from "./FlowRequirementDropdown";
 import { ExecutionConfigModal } from "./ExecutionConfigModal";
-import { EditFlowDropdown } from "./EditFlowDropdown";
+import { AddFlowDropdown } from "./AddFlowDropdown";
+import { EditFlow } from "./EditFlow";
 
 import "./flow-row.css";
 
@@ -104,11 +105,14 @@ export const FlowRow = ({
                   <ExecutionConfigModal execution={execution} />
                 )}
                 {execution.authenticationFlow && !builtIn && (
-                  <EditFlowDropdown
-                    execution={execution}
-                    onAddExecution={onAddExecution}
-                    onAddFlow={onAddFlow}
-                  />
+                  <>
+                    <AddFlowDropdown
+                      execution={execution}
+                      onAddExecution={onAddExecution}
+                      onAddFlow={onAddFlow}
+                    />
+                    <EditFlow execution={execution} onRowChange={onRowChange} />
+                  </>
                 )}
                 {!builtIn && (
                   <Tooltip content={t("common:delete")}>