diff --git a/frontend/src/views/Settings/CreateServiceAccountPage/CreateServiceAccountPage.tsx b/frontend/src/views/Settings/CreateServiceAccountPage/CreateServiceAccountPage.tsx
index 2b331b244..56914f7df 100644
--- a/frontend/src/views/Settings/CreateServiceAccountPage/CreateServiceAccountPage.tsx
+++ b/frontend/src/views/Settings/CreateServiceAccountPage/CreateServiceAccountPage.tsx
@@ -4,8 +4,9 @@ import NavHeader from '@app/components/navigation/NavHeader';
import { SAProjectLevelPermissionsTable } from './components/SAProjectLevelPermissionsTable';
import {
- CopyServiceAccountIDSection,
- ServiceAccountNameChangeSection} from './components';
+ CopyServiceAccountPublicKeySection,
+ ServiceAccountNameChangeSection
+} from './components';
export const CreateServiceAccountPage = () => {
const router = useRouter();
@@ -29,7 +30,7 @@ export const CreateServiceAccountPage = () => {
serviceAccountId={serviceAccountId}
/>
-
diff --git a/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/CopyServiceAccountPublicKeySection.tsx b/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/CopyServiceAccountPublicKeySection.tsx
new file mode 100644
index 000000000..e12001985
--- /dev/null
+++ b/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/CopyServiceAccountPublicKeySection.tsx
@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { IconButton } from '@app/components/v2';
+import { useToggle } from '@app/hooks';
+import { useGetServiceAccountById } from '@app/hooks/api';
+
+type Props = {
+ serviceAccountId: string;
+}
+
+export const CopyServiceAccountPublicKeySection = ({ serviceAccountId }: Props): JSX.Element => {
+ const { data: serviceAccount } = useGetServiceAccountById(serviceAccountId);
+ const [isServiceAccountIdCopied, setIsServiceAccountIdCopied] = useToggle(false);
+
+ useEffect(() => {
+ let timer: NodeJS.Timeout;
+
+ if (isServiceAccountIdCopied) {
+ timer = setTimeout(() => setIsServiceAccountIdCopied.off(), 2000);
+ }
+
+ return () => clearTimeout(timer);
+ }, [isServiceAccountIdCopied]);
+
+ const copyServiceAccountIdToClipboard = () => {
+ if (!serviceAccount) return;
+
+ navigator.clipboard.writeText(serviceAccount.publicKey);
+ setIsServiceAccountIdCopied.on();
+ };
+
+ return serviceAccount ? (
+
+
Public Key
+
+
{serviceAccount.publicKey}
+
copyServiceAccountIdToClipboard()}
+ >
+
+
+ Copy
+
+
+
+
+ ) :
+}
\ No newline at end of file
diff --git a/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/index.tsx b/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/index.tsx
new file mode 100644
index 000000000..d9ed7f56f
--- /dev/null
+++ b/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/index.tsx
@@ -0,0 +1 @@
+export { CopyServiceAccountPublicKeySection } from './CopyServiceAccountPublicKeySection';
\ No newline at end of file
diff --git a/frontend/src/views/Settings/CreateServiceAccountPage/components/SAProjectLevelPermissionsTable/SAProjectLevelPermissionsTable.tsx b/frontend/src/views/Settings/CreateServiceAccountPage/components/SAProjectLevelPermissionsTable/SAProjectLevelPermissionsTable.tsx
index 3e3da9fd7..170e71e7e 100644
--- a/frontend/src/views/Settings/CreateServiceAccountPage/components/SAProjectLevelPermissionsTable/SAProjectLevelPermissionsTable.tsx
+++ b/frontend/src/views/Settings/CreateServiceAccountPage/components/SAProjectLevelPermissionsTable/SAProjectLevelPermissionsTable.tsx
@@ -40,7 +40,8 @@ import {
useDeleteServiceAccountProjectLevelPermission,
useGetServiceAccountById,
useGetServiceAccountProjectLevelPermissions,
- useGetUserWorkspaces} from '@app/hooks/api';
+ useGetUserWorkspaces
+} from '@app/hooks/api';
import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
const createProjectLevelPermissionSchema = yup.object({
diff --git a/frontend/src/views/Settings/CreateServiceAccountPage/components/ServiceAccountNameChangeSection/ServiceAccountNameChangeSection.tsx b/frontend/src/views/Settings/CreateServiceAccountPage/components/ServiceAccountNameChangeSection/ServiceAccountNameChangeSection.tsx
index 006975544..7bb7d3414 100644
--- a/frontend/src/views/Settings/CreateServiceAccountPage/components/ServiceAccountNameChangeSection/ServiceAccountNameChangeSection.tsx
+++ b/frontend/src/views/Settings/CreateServiceAccountPage/components/ServiceAccountNameChangeSection/ServiceAccountNameChangeSection.tsx
@@ -58,7 +58,7 @@ export const ServiceAccountNameChangeSection = ({
onSubmit={handleSubmit(onFormSubmit)}
className="rounded-md bg-white/5 p-6"
>
- Service Account Name
+ Name
{!isServiceAccountLoading && (
{
const orgId = currentOrg?._id || '';
const [step, setStep] = useState(0);
const [isAccessKeyCopied, setIsAccessKeyCopied] = useToggle(false);
+ const [isPublicKeyCopied, setIsPublicKeyCopied] = useToggle(false);
const [isPrivateKeyCopied, setIsPrivateKeyCopied] = useToggle(false);
const [accessKey, setAccessKey] = useState('');
+ const [publicKey, setPublicKey] = useState('');
const [privateKey, setPrivateKey] = useState('');
const [searchServiceAccountFilter, setSearchServiceAccountFilter] = useState('');
const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
@@ -85,12 +87,16 @@ export const OrgServiceAccountsTable = () => {
timer = setTimeout(() => setIsAccessKeyCopied.off(), 2000);
}
+ if (isPublicKeyCopied) {
+ timer = setTimeout(() => setIsPublicKeyCopied.off(), 2000);
+ }
+
if (isPrivateKeyCopied) {
timer = setTimeout(() => setIsPrivateKeyCopied.off(), 2000);
}
return () => clearTimeout(timer);
- }, [isAccessKeyCopied, isPrivateKeyCopied]);
+ }, [isAccessKeyCopied, isPublicKeyCopied, isPrivateKeyCopied]);
const {
control,
@@ -103,6 +109,7 @@ export const OrgServiceAccountsTable = () => {
if (!currentOrg?._id) return;
const keyPair = generateKeyPair();
+ setPublicKey(keyPair.publicKey);
setPrivateKey(keyPair.privateKey);
const serviceAccountDetails = await createServiceAccount.mutateAsync({
@@ -216,6 +223,24 @@ export const OrgServiceAccountsTable = () => {
+ Public Key
+
+
{publicKey}
+
{
+ navigator.clipboard.writeText(publicKey);
+ setIsPublicKeyCopied.on();
+ }}
+ >
+
+
+ Copy
+
+
+
Private Key
{privateKey}
@@ -234,6 +259,7 @@ export const OrgServiceAccountsTable = () => {
+
>
);
default: