Remove last violatations of no-unstable-nested-components
(#28559)
Signed-off-by: Jon Koops <jonkoops@gmail.com>
This commit is contained in:
parent
92bcd2645c
commit
2ebf28ed63
2 changed files with 68 additions and 54 deletions
|
@ -118,8 +118,7 @@ export default tseslint.config(
|
|||
"react/jsx-no-useless-fragment": "error",
|
||||
// Ban nesting components, as this will cause unintended re-mounting of components.
|
||||
// See: https://react.dev/learn/your-first-component#nesting-and-organizing-components
|
||||
// TODO: Set this to "error" once all issues are fixed.
|
||||
"react/no-unstable-nested-components": ["warn", { allowAsProps: true }],
|
||||
"react/no-unstable-nested-components": ["error", { allowAsProps: true }],
|
||||
// Prefer a specific import scope (e.g. `lodash/map` vs `lodash`).
|
||||
// Allows for more efficient tree-shaking and better code splitting.
|
||||
"lodash/import-scope": ["error", "member"],
|
||||
|
@ -144,5 +143,5 @@ export default tseslint.config(
|
|||
"mocha/no-mocha-arrows": "off",
|
||||
"mocha/no-setup-in-describe": "off",
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
|
|
|
@ -7,7 +7,6 @@ import {
|
|||
Divider,
|
||||
Flex,
|
||||
FlexItem,
|
||||
Label,
|
||||
PageSection,
|
||||
Radio,
|
||||
Switch,
|
||||
|
@ -15,7 +14,7 @@ import {
|
|||
ToolbarItem,
|
||||
} from "@patternfly/react-core";
|
||||
import { useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { Controller, useForm, type UseFormReturn } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
|
||||
|
@ -113,53 +112,6 @@ export const PoliciesTab = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const ClientPolicyDetailLink = (row: ClientPolicy) => (
|
||||
<Link to={toEditClientPolicy({ realm, policyName: row.name! })}>
|
||||
{row.name} {row.global && <Label color="blue">{t("global")}</Label>}
|
||||
</Link>
|
||||
);
|
||||
|
||||
const SwitchRenderer = ({ clientPolicy }: { clientPolicy: ClientPolicy }) => {
|
||||
const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
|
||||
titleKey: "disablePolicyConfirmTitle",
|
||||
messageKey: "disablePolicyConfirm",
|
||||
continueButtonLabel: "disable",
|
||||
onConfirm: () => {
|
||||
form.setValue(clientPolicy.name!, false);
|
||||
saveStatus();
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DisableConfirm />
|
||||
<Controller
|
||||
name={clientPolicy.name!}
|
||||
data-testid={`${clientPolicy.name!}-switch`}
|
||||
defaultValue={clientPolicy.enabled}
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<Switch
|
||||
label={t("enabled")}
|
||||
labelOff={t("disabled")}
|
||||
isChecked={field.value}
|
||||
isDisabled={clientPolicy.global}
|
||||
onChange={(_event, value) => {
|
||||
if (!value) {
|
||||
toggleDisableDialog();
|
||||
} else {
|
||||
field.onChange(value);
|
||||
saveStatus();
|
||||
}
|
||||
}}
|
||||
aria-label={clientPolicy.name!}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
if (!code) {
|
||||
return;
|
||||
|
@ -291,13 +243,25 @@ export const PoliciesTab = () => {
|
|||
columns={[
|
||||
{
|
||||
name: "name",
|
||||
cellRenderer: ClientPolicyDetailLink,
|
||||
cellRenderer: ({ name }: ClientPolicyRepresentation) => (
|
||||
<Link to={toEditClientPolicy({ realm, policyName: name! })}>
|
||||
{name}
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "enabled",
|
||||
displayKey: "status",
|
||||
cellRenderer: (clientPolicy) => (
|
||||
<SwitchRenderer clientPolicy={clientPolicy} />
|
||||
<SwitchRenderer
|
||||
clientPolicy={clientPolicy}
|
||||
form={form}
|
||||
saveStatus={saveStatus}
|
||||
onConfirm={() => {
|
||||
form.setValue(clientPolicy.name!, false);
|
||||
saveStatus();
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
|
@ -342,3 +306,54 @@ export const PoliciesTab = () => {
|
|||
</>
|
||||
);
|
||||
};
|
||||
|
||||
type SwitchRendererProps = {
|
||||
clientPolicy: ClientPolicy;
|
||||
form: UseFormReturn<Record<string, boolean>>;
|
||||
saveStatus: () => void;
|
||||
onConfirm: () => void;
|
||||
};
|
||||
|
||||
const SwitchRenderer = ({
|
||||
clientPolicy,
|
||||
form,
|
||||
saveStatus,
|
||||
onConfirm,
|
||||
}: SwitchRendererProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
|
||||
titleKey: "disablePolicyConfirmTitle",
|
||||
messageKey: "disablePolicyConfirm",
|
||||
continueButtonLabel: "disable",
|
||||
onConfirm,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<DisableConfirm />
|
||||
<Controller
|
||||
name={clientPolicy.name!}
|
||||
data-testid={`${clientPolicy.name!}-switch`}
|
||||
defaultValue={clientPolicy.enabled}
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<Switch
|
||||
label={t("enabled")}
|
||||
labelOff={t("disabled")}
|
||||
isChecked={field.value}
|
||||
isDisabled={clientPolicy.global}
|
||||
onChange={(_event, value) => {
|
||||
if (!value) {
|
||||
toggleDisableDialog();
|
||||
} else {
|
||||
field.onChange(value);
|
||||
saveStatus();
|
||||
}
|
||||
}}
|
||||
aria-label={clientPolicy.name!}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue