keycloak-scim/src/clients/scopes/GeneratedCodeTab.tsx
2022-02-23 15:46:26 +01:00

90 lines
2.1 KiB
TypeScript

import React, { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import {
ClipboardCopyButton,
CodeBlock,
CodeBlockAction,
EmptyState,
EmptyStateBody,
TextArea,
Title,
} from "@patternfly/react-core";
import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
import useSetTimeout from "../../utils/useSetTimeout";
type GeneratedCodeTabProps = {
user?: UserRepresentation;
text: string;
label: string;
};
enum CopyState {
Ready,
Copied,
Error,
}
export const GeneratedCodeTab = ({
text,
user,
label,
}: GeneratedCodeTabProps) => {
const { t } = useTranslation("clients");
const setTimeout = useSetTimeout();
const [copy, setCopy] = useState(CopyState.Ready);
const copyMessage = useMemo(() => {
switch (copy) {
case CopyState.Ready:
return t("copyToClipboard");
case CopyState.Copied:
return t("copySuccess");
case CopyState.Error:
return t("clipboardCopyError");
}
}, [copy]);
useEffect(() => {
if (copy !== CopyState.Ready) {
return setTimeout(() => setCopy(CopyState.Ready), 1000);
}
}, [copy]);
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
setCopy(CopyState.Copied);
} catch (error) {
setCopy(CopyState.Error);
}
};
return user ? (
<CodeBlock
id={label}
actions={
<CodeBlockAction>
<ClipboardCopyButton
id={`copy-button-${label}`}
textId={label}
aria-label={t("copyToClipboard")}
onClick={() => copyToClipboard(text)}
exitDelay={600}
variant="plain"
>
{copyMessage}
</ClipboardCopyButton>
</CodeBlockAction>
}
>
<TextArea id={`text-area-${label}`} rows={20} value={text} />
</CodeBlock>
) : (
<EmptyState variant="large">
<Title headingLevel="h4" size="lg">
{t(`${label}No`)}
</Title>
<EmptyStateBody>{t(`${label}IsDisabled`)}</EmptyStateBody>
</EmptyState>
);
};