Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): copy flag/segment key to clipboard button in ui #1987

Merged
merged 4 commits into from
Aug 14, 2023
Merged

feat(ui): copy flag/segment key to clipboard button in ui #1987

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c33d36f
feat(ui): copy flag/segment key to clipboard button in ui
markphelps Aug 12, 2023
b44c050
chore: only show copy to clipboard for existing flags/segments
markphelps Aug 12, 2023
ce81d44
chore: dont cancel all in progress ITs if one fails
markphelps Aug 13, 2023
8f78461
Merge branch 'main' into copy-keys-to-clipboard
markphelps Aug 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/integration-test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ jobs:
runs-on: ubuntu-latest
timeout-minutes: 20
strategy:
fail-fast: false
matrix:
test:
["api", "api/cache", "fs/git", "fs/local", "fs/s3", "import/export"]
Expand Down
63 changes: 52 additions & 11 deletions ui/src/components/flags/FlagForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { CheckIcon, ClipboardDocumentIcon } from '@heroicons/react/20/solid';
import { Form, Formik } from 'formik';
import { useState } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import * as Yup from 'yup';
Expand All @@ -13,7 +15,7 @@ import { useError } from '~/data/hooks/error';
import { useSuccess } from '~/data/hooks/success';
import { keyValidation, requiredValidation } from '~/data/validations';
import { FlagType, IFlag, IFlagBase } from '~/types/Flag';
import { stringAsKey } from '~/utils/helpers';
import { classNames, copyTextToClipboard, stringAsKey } from '~/utils/helpers';

type FlagFormProps = {
flag?: IFlag;
Expand Down Expand Up @@ -59,6 +61,8 @@ export default function FlagForm(props: FlagFormProps) {
enabled: flag?.enabled || false
};

const [keyCopied, setKeyCopied] = useState(false);

return (
<Formik
enableReinitialize
Expand Down Expand Up @@ -144,16 +148,53 @@ export default function FlagForm(props: FlagFormProps) {
>
Key
</label>
<Input
className="mt-1"
name="key"
id="key"
disabled={!isNew || readOnly}
onChange={(e) => {
const formatted = stringAsKey(e.target.value);
formik.setFieldValue('key', formatted);
}}
/>
<div
className={classNames(
isNew ? '' : 'flex items-center justify-between'
)}
>
<Input
className={classNames(isNew ? 'mt-1' : 'mt-1 md:mr-2')}
name="key"
id="key"
disabled={!isNew || readOnly}
onChange={(e) => {
const formatted = stringAsKey(e.target.value);
formik.setFieldValue('key', formatted);
}}
/>
{!isNew && (
<button
aria-label="Copy"
className="hidden md:block"
onClick={(e) => {
e.preventDefault();
copyTextToClipboard(flag?.key || '');
setKeyCopied(true);
setTimeout(() => {
setKeyCopied(false);
}, 2000);
}}
>
<CheckIcon
className={classNames(
'nightwind-prevent text-green-400 absolute m-auto h-6 w-6 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white',
keyCopied
? 'visible opacity-100'
: 'invisible opacity-0'
)}
/>
<ClipboardDocumentIcon
className={classNames(
'text-gray-400 m-auto h-6 w-6 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white dark:hover:text-gray-500',
keyCopied
? 'invisible opacity-0'
: 'visible opacity-100'
)}
/>
</button>
)}
</div>
</div>
<div className="col-span-3">
<label
Expand Down
63 changes: 52 additions & 11 deletions ui/src/components/segments/SegmentForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { CheckIcon, ClipboardDocumentIcon } from '@heroicons/react/20/solid';
import { Form, Formik } from 'formik';
import { useState } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import * as Yup from 'yup';
Expand All @@ -12,7 +14,7 @@ import { useError } from '~/data/hooks/error';
import { useSuccess } from '~/data/hooks/success';
import { keyValidation, requiredValidation } from '~/data/validations';
import { ISegment, ISegmentBase, SegmentMatchType } from '~/types/Segment';
import { stringAsKey } from '~/utils/helpers';
import { classNames, copyTextToClipboard, stringAsKey } from '~/utils/helpers';

const segmentMatchTypes = [
{
Expand Down Expand Up @@ -59,6 +61,8 @@ export default function SegmentForm(props: SegmentFormProps) {
matchType: segment?.matchType || SegmentMatchType.ALL
};

const [keyCopied, setKeyCopied] = useState(false);

return (
<Formik
enableReinitialize
Expand Down Expand Up @@ -126,16 +130,53 @@ export default function SegmentForm(props: SegmentFormProps) {
>
Key
</label>
<Input
className="mt-1"
name="key"
id="key"
disabled={!isNew || readOnly}
onChange={(e) => {
const formatted = stringAsKey(e.target.value);
formik.setFieldValue('key', formatted);
}}
/>
<div
className={classNames(
isNew ? '' : 'flex items-center justify-between'
)}
>
<Input
className={classNames(isNew ? 'mt-1' : 'mt-1 md:mr-2')}
name="key"
id="key"
disabled={!isNew || readOnly}
onChange={(e) => {
const formatted = stringAsKey(e.target.value);
formik.setFieldValue('key', formatted);
}}
/>
{!isNew && (
<button
aria-label="Copy"
className="hidden md:block"
onClick={(e) => {
e.preventDefault();
copyTextToClipboard(segment?.key || '');
setKeyCopied(true);
setTimeout(() => {
setKeyCopied(false);
}, 2000);
}}
>
<CheckIcon
className={classNames(
'nightwind-prevent text-green-400 absolute m-auto h-6 w-6 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white',
keyCopied
? 'visible opacity-100'
: 'invisible opacity-0'
)}
/>
<ClipboardDocumentIcon
className={classNames(
'text-gray-400 m-auto h-6 w-6 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white dark:hover:text-gray-500',
keyCopied
? 'invisible opacity-0'
: 'visible opacity-100'
)}
/>
</button>
)}
</div>
</div>
<div className="col-span-3">
<label
Expand Down
10 changes: 1 addition & 9 deletions ui/src/components/tokens/ShowTokenPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import 'highlight.js/styles/tokyo-night-dark.css';
import { useEffect, useState } from 'react';
import Button from '~/components/forms/buttons/Button';
import { IAuthTokenSecret } from '~/types/auth/Token';
import { classNames } from '~/utils/helpers';
import { classNames, copyTextToClipboard } from '~/utils/helpers';

hljs.registerLanguage('text', text);

Expand All @@ -24,14 +24,6 @@ export default function ShowTokenPanel(props: ShowTokenPanelProps) {
hljs.initHighlighting();
}, [token]);

const copyTextToClipboard = (text: string) => {
if ('clipboard' in navigator) {
return navigator.clipboard.writeText(text);
} else {
return document.execCommand('copy', true, text);
}
};

return (
<>
<div>
Expand Down
8 changes: 8 additions & 0 deletions ui/src/utils/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@ export function classNames(...classes: string[]) {
return classes.filter(Boolean).join(' ');
}

export function copyTextToClipboard(text: string) {
if ('clipboard' in navigator) {
navigator.clipboard.writeText(text);
} else {
document.execCommand('copy', true, text);
}
}

export function stringAsKey(str: string) {
return str.toLowerCase().split(/\s+/).join('-');

Expand Down