Raphaël Bosi
c596a5e342
## Description Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name **`twenty-ui`** (v0.1.0, publishable) and renames the old package to **`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports → `twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates twenty-front's `Toggle` to the new package (first consumer) as a drop-in. ## Next steps - Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` + `.yarnrc.yml`), then tag `ui/v0.1.0` to publish. - Continue migrating components from `twenty-ui-deprecated` → `twenty-ui`.
81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import { t } from '@lingui/core/macro';
|
|
import { styled } from '@linaria/react';
|
|
import { useCallback, useEffect } from 'react';
|
|
import { useDebouncedCallback } from 'use-debounce';
|
|
|
|
import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
|
|
import { useMutation } from '@apollo/client/react';
|
|
import { UpdateApiKeyDocument } from '~/generated-metadata/graphql';
|
|
|
|
const StyledComboInputContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
> * + * {
|
|
margin-left: ${themeCssVariables.spacing[4]};
|
|
}
|
|
`;
|
|
|
|
type ApiKeyNameInputProps = {
|
|
apiKeyName: string;
|
|
apiKeyId: string;
|
|
disabled: boolean;
|
|
onNameUpdate?: (name: string) => void;
|
|
};
|
|
|
|
export const ApiKeyNameInput = ({
|
|
apiKeyName,
|
|
apiKeyId,
|
|
disabled,
|
|
onNameUpdate,
|
|
}: ApiKeyNameInputProps) => {
|
|
const [updateApiKey] = useMutation(UpdateApiKeyDocument);
|
|
|
|
// TODO: Enhance this with react-web-hook-form (https://www.react-hook-form.com)
|
|
// oxlint-disable-next-line react-hooks/exhaustive-deps
|
|
const debouncedUpdate = useCallback(
|
|
useDebouncedCallback(async (name: string) => {
|
|
if (isDefined(onNameUpdate)) {
|
|
onNameUpdate(apiKeyName);
|
|
}
|
|
if (!apiKeyName) {
|
|
return;
|
|
}
|
|
const { data: updatedApiKeyData } = await updateApiKey({
|
|
variables: {
|
|
input: {
|
|
id: apiKeyId,
|
|
name,
|
|
},
|
|
},
|
|
});
|
|
const updatedApiKey = updatedApiKeyData?.updateApiKey;
|
|
if (isDefined(updatedApiKey)) {
|
|
onNameUpdate?.(updatedApiKey.name);
|
|
}
|
|
}, 500),
|
|
[updateApiKey, onNameUpdate],
|
|
);
|
|
|
|
useEffect(() => {
|
|
debouncedUpdate(apiKeyName);
|
|
return debouncedUpdate.cancel;
|
|
}, [debouncedUpdate, apiKeyName]);
|
|
|
|
const nameTextInputId = `${apiKeyId}-name`;
|
|
|
|
return (
|
|
<StyledComboInputContainer>
|
|
<SettingsTextInput
|
|
instanceId={nameTextInputId}
|
|
placeholder={t`E.g. backoffice integration`}
|
|
onChange={onNameUpdate}
|
|
fullWidth
|
|
value={apiKeyName}
|
|
disabled={disabled}
|
|
/>
|
|
</StyledComboInputContainer>
|
|
);
|
|
};
|