Added tool tips on flow icons (#2573)

This commit is contained in:
Erik Jan de Wit 2022-05-09 12:41:20 +02:00 committed by GitHub
parent 0c73fc0e84
commit 1447a77dc1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 82 additions and 66 deletions

View file

@ -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>
);
};

View file

@ -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}

View file

@ -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>,
]}