Spaces:
Build error
Build error
File size: 2,847 Bytes
b59aa07 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import { BrandButton } from "#/components/features/settings/brand-button";
import { SettingsInput } from "#/components/features/settings/settings-input";
import { LoadingSpinner } from "#/components/shared/loading-spinner";
import { CreateApiKeyResponse } from "#/api/api-keys";
import {
displayErrorToast,
displaySuccessToast,
} from "#/utils/custom-toast-handlers";
import { ApiKeyModalBase } from "./api-key-modal-base";
import { useCreateApiKey } from "#/hooks/mutation/use-create-api-key";
interface CreateApiKeyModalProps {
isOpen: boolean;
onClose: () => void;
onKeyCreated: (newKey: CreateApiKeyResponse) => void;
}
export function CreateApiKeyModal({
isOpen,
onClose,
onKeyCreated,
}: CreateApiKeyModalProps) {
const { t } = useTranslation();
const [newKeyName, setNewKeyName] = useState("");
const createApiKeyMutation = useCreateApiKey();
const handleCreateKey = async () => {
if (!newKeyName.trim()) {
displayErrorToast(t(I18nKey.ERROR$REQUIRED_FIELD));
return;
}
try {
const newKey = await createApiKeyMutation.mutateAsync(newKeyName);
onKeyCreated(newKey);
displaySuccessToast(t(I18nKey.SETTINGS$API_KEY_CREATED));
setNewKeyName("");
} catch (error) {
displayErrorToast(t(I18nKey.ERROR$GENERIC));
}
};
const handleCancel = () => {
setNewKeyName("");
onClose();
};
const modalFooter = (
<>
<BrandButton
type="button"
variant="primary"
className="grow"
onClick={handleCreateKey}
isDisabled={createApiKeyMutation.isPending || !newKeyName.trim()}
>
{createApiKeyMutation.isPending ? (
<LoadingSpinner size="small" />
) : (
t(I18nKey.BUTTON$CREATE)
)}
</BrandButton>
<BrandButton
type="button"
variant="secondary"
className="grow"
onClick={handleCancel}
isDisabled={createApiKeyMutation.isPending}
>
{t(I18nKey.BUTTON$CANCEL)}
</BrandButton>
</>
);
return (
<ApiKeyModalBase
isOpen={isOpen}
title={t(I18nKey.SETTINGS$CREATE_API_KEY)}
footer={modalFooter}
>
<div data-testid="create-api-key-modal">
<p className="text-sm text-gray-300">
{t(I18nKey.SETTINGS$CREATE_API_KEY_DESCRIPTION)}
</p>
<SettingsInput
testId="api-key-name-input"
label={t(I18nKey.SETTINGS$NAME)}
placeholder={t(I18nKey.SETTINGS$API_KEY_NAME_PLACEHOLDER)}
value={newKeyName}
onChange={(value) => setNewKeyName(value)}
className="w-full mt-4"
type="text"
/>
</div>
</ApiKeyModalBase>
);
}
|