Added tool tips on flow icons (#2573)
This commit is contained in:
parent
0c73fc0e84
commit
1447a77dc1
3 changed files with 82 additions and 66 deletions
|
@ -1,6 +1,11 @@
|
|||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Dropdown, DropdownItem, DropdownToggle } from "@patternfly/react-core";
|
||||
import {
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownToggle,
|
||||
Tooltip,
|
||||
} from "@patternfly/react-core";
|
||||
import { PlusIcon } from "@patternfly/react-icons";
|
||||
|
||||
import type { AuthenticationProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation";
|
||||
|
@ -40,57 +45,62 @@ export const EditFlowDropdown = ({
|
|||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dropdown
|
||||
isPlain
|
||||
position="right"
|
||||
data-testid={`${execution.displayName}-edit-dropdown`}
|
||||
isOpen={open}
|
||||
toggle={
|
||||
<DropdownToggle onToggle={setOpen}>
|
||||
<PlusIcon />
|
||||
</DropdownToggle>
|
||||
}
|
||||
dropdownItems={[
|
||||
<DropdownItem
|
||||
key="addStep"
|
||||
onClick={() =>
|
||||
setType(providerId === "form-flow" ? "form" : "basic")
|
||||
}
|
||||
>
|
||||
{t("addStep")}
|
||||
</DropdownItem>,
|
||||
<DropdownItem key="addCondition" onClick={() => setType("condition")}>
|
||||
{t("addCondition")}
|
||||
</DropdownItem>,
|
||||
<DropdownItem key="addSubFlow" onClick={() => setType("subFlow")}>
|
||||
{t("addSubFlow")}
|
||||
</DropdownItem>,
|
||||
]}
|
||||
onSelect={() => setOpen(false)}
|
||||
/>
|
||||
{type && type !== "subFlow" && (
|
||||
<AddStepModal
|
||||
name={execution.displayName!}
|
||||
type={type}
|
||||
onSelect={(type) => {
|
||||
if (type) {
|
||||
onAddExecution(execution, type);
|
||||
}
|
||||
setType(undefined);
|
||||
}}
|
||||
<Tooltip content={t("common:edit")}>
|
||||
<>
|
||||
<Dropdown
|
||||
isPlain
|
||||
position="right"
|
||||
data-testid={`${execution.displayName}-edit-dropdown`}
|
||||
isOpen={open}
|
||||
toggle={
|
||||
<DropdownToggle onToggle={setOpen}>
|
||||
<PlusIcon />
|
||||
</DropdownToggle>
|
||||
}
|
||||
dropdownItems={[
|
||||
<DropdownItem
|
||||
key="addStep"
|
||||
onClick={() =>
|
||||
setType(providerId === "form-flow" ? "form" : "basic")
|
||||
}
|
||||
>
|
||||
{t("addStep")}
|
||||
</DropdownItem>,
|
||||
<DropdownItem
|
||||
key="addCondition"
|
||||
onClick={() => setType("condition")}
|
||||
>
|
||||
{t("addCondition")}
|
||||
</DropdownItem>,
|
||||
<DropdownItem key="addSubFlow" onClick={() => setType("subFlow")}>
|
||||
{t("addSubFlow")}
|
||||
</DropdownItem>,
|
||||
]}
|
||||
onSelect={() => setOpen(false)}
|
||||
/>
|
||||
)}
|
||||
{type === "subFlow" && (
|
||||
<AddSubFlowModal
|
||||
name={execution.displayName!}
|
||||
onCancel={() => setType(undefined)}
|
||||
onConfirm={(flow) => {
|
||||
onAddFlow(flow);
|
||||
setType(undefined);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
{type && type !== "subFlow" && (
|
||||
<AddStepModal
|
||||
name={execution.displayName!}
|
||||
type={type}
|
||||
onSelect={(type) => {
|
||||
if (type) {
|
||||
onAddExecution(execution, type);
|
||||
}
|
||||
setType(undefined);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{type === "subFlow" && (
|
||||
<AddSubFlowModal
|
||||
name={execution.displayName!}
|
||||
onCancel={() => setType(undefined)}
|
||||
onConfirm={(flow) => {
|
||||
onAddFlow(flow);
|
||||
setType(undefined);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -10,6 +10,7 @@ import {
|
|||
FormGroup,
|
||||
Modal,
|
||||
ModalVariant,
|
||||
Tooltip,
|
||||
ValidatedOptions,
|
||||
} from "@patternfly/react-core";
|
||||
import { CogIcon, TrashIcon } from "@patternfly/react-icons";
|
||||
|
@ -125,13 +126,15 @@ export const ExecutionConfigModal = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant="plain"
|
||||
aria-label={t("common:settings")}
|
||||
onClick={() => setShow(true)}
|
||||
>
|
||||
<CogIcon />
|
||||
</Button>
|
||||
<Tooltip content={t("common:settings")}>
|
||||
<Button
|
||||
variant="plain"
|
||||
aria-label={t("common:settings")}
|
||||
onClick={() => setShow(true)}
|
||||
>
|
||||
<CogIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
{configDescription && (
|
||||
<Modal
|
||||
variant={ModalVariant.small}
|
||||
|
|
|
@ -11,6 +11,7 @@ import {
|
|||
Text,
|
||||
TextVariants,
|
||||
Button,
|
||||
Tooltip,
|
||||
} from "@patternfly/react-core";
|
||||
import { TrashIcon } from "@patternfly/react-icons";
|
||||
|
||||
|
@ -111,13 +112,15 @@ export const FlowRow = ({
|
|||
/>
|
||||
)}
|
||||
{!builtIn && (
|
||||
<Button
|
||||
variant="plain"
|
||||
aria-label={t("common:delete")}
|
||||
onClick={() => onDelete(execution)}
|
||||
>
|
||||
<TrashIcon />
|
||||
</Button>
|
||||
<Tooltip content={t("common:delete")}>
|
||||
<Button
|
||||
variant="plain"
|
||||
aria-label={t("common:delete")}
|
||||
onClick={() => onDelete(execution)}
|
||||
>
|
||||
<TrashIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</DataListCell>,
|
||||
]}
|
||||
|
|
Loading…
Reference in a new issue