feat: rename access tokens to api keys (#6687)

* feat: rename access tokens to api keys

* feat: update test cases

* feat: update delete token to delete key

frontend/public/locales/en-GB/routes.json

@@ -3,7 +3,7 @@
 	"alert_channels": "Alert Channels",
 	"organization_settings": "Organization Settings",
 	"ingestion_settings": "Ingestion Settings",
-	"api_keys": "Access Tokens",
+	"api_keys": "API Keys",
 	"my_settings": "My Settings",
 	"overview_metrics": "Overview Metrics",
 	"dbcall_metrics": "Database Calls",

frontend/public/locales/en-GB/titles.json

@@ -26,7 +26,7 @@
 	"MY_SETTINGS": "SigNoz | My Settings",
 	"ORG_SETTINGS": "SigNoz | Organization Settings",
 	"INGESTION_SETTINGS": "SigNoz | Ingestion Settings",
-	"API_KEYS": "SigNoz | Access Tokens",
+	"API_KEYS": "SigNoz | API Keys",
 	"SOMETHING_WENT_WRONG": "SigNoz | Something Went Wrong",
 	"UN_AUTHORIZED": "SigNoz | Unauthorized",
 	"NOT_FOUND": "SigNoz | Page Not Found",

frontend/public/locales/en/apiKeys.json

@@ -1,3 +1,3 @@
 {
-	"delete_confirm_message": "Are you sure you want to delete {{keyName}} token? Deleting a token is irreversible and cannot be undone."
+	"delete_confirm_message": "Are you sure you want to delete {{keyName}} key? Deleting a key is irreversible and cannot be undone."
 }

frontend/public/locales/en/routes.json

@@ -3,7 +3,7 @@
 	"alert_channels": "Alert Channels",
 	"organization_settings": "Organization Settings",
 	"ingestion_settings": "Ingestion Settings",
-	"api_keys": "Access Tokens",
+	"api_keys": "API Keys",
 	"my_settings": "My Settings",
 	"overview_metrics": "Overview Metrics",
 	"dbcall_metrics": "Database Calls",

frontend/public/locales/en/titles.json

@@ -32,7 +32,7 @@
 	"MY_SETTINGS": "SigNoz | My Settings",
 	"ORG_SETTINGS": "SigNoz | Organization Settings",
 	"INGESTION_SETTINGS": "SigNoz | Ingestion Settings",
-	"API_KEYS": "SigNoz | Access Tokens",
+	"API_KEYS": "SigNoz | API Keys",
 	"SOMETHING_WENT_WRONG": "SigNoz | Something Went Wrong",
 	"UN_AUTHORIZED": "SigNoz | Unauthorized",
 	"NOT_FOUND": "SigNoz | Page Not Found",

frontend/src/AppRoutes/routes.ts

@@ -432,7 +432,7 @@ export const oldRoutes = [
 	'/logs-explorer/live',
 	'/logs-save-views',
 	'/traces-save-views',
-	'/settings/api-keys',
+	'/settings/access-tokens',
 ];
 
 export const oldNewRoutesMapping: Record<string, string> = {
@@ -442,7 +442,7 @@ export const oldNewRoutesMapping: Record<string, string> = {
 	'/logs-explorer/live': '/logs/logs-explorer/live',
 	'/logs-save-views': '/logs/saved-views',
 	'/traces-save-views': '/traces/saved-views',
-	'/settings/api-keys': '/settings/access-tokens',
+	'/settings/access-tokens': '/settings/api-keys',
 };
 
 export interface AppRoutes {

frontend/src/constants/routes.ts

@@ -34,7 +34,7 @@ const ROUTES = {
 	MY_SETTINGS: '/my-settings',
 	SETTINGS: '/settings',
 	ORG_SETTINGS: '/settings/org-settings',
-	API_KEYS: '/settings/access-tokens',
+	API_KEYS: '/settings/api-keys',
 	INGESTION_SETTINGS: '/settings/ingestion-settings',
 	SOMETHING_WENT_WRONG: '/something-went-wrong',
 	UN_AUTHORIZED: '/un-authorized',

frontend/src/container/APIKeys/APIKeys.test.tsx

@@ -26,9 +26,9 @@ describe('APIKeys component', () => {
 	});
 
 	it('renders APIKeys component without crashing', () => {
-		expect(screen.getByText('Access Tokens')).toBeInTheDocument();
+		expect(screen.getByText('API Keys')).toBeInTheDocument();
 		expect(
-			screen.getByText('Create and manage access tokens for the SigNoz API'),
+			screen.getByText('Create and manage API keys for the SigNoz API'),
 		).toBeInTheDocument();
 	});
 
@@ -40,16 +40,16 @@ describe('APIKeys component', () => {
 		);
 
 		await waitFor(() => {
-			expect(screen.getByText('No Expiry Token')).toBeInTheDocument();
+			expect(screen.getByText('No Expiry Key')).toBeInTheDocument();
-			expect(screen.getByText('1-5 of 18 tokens')).toBeInTheDocument();
+			expect(screen.getByText('1-5 of 18 keys')).toBeInTheDocument();
 		});
 	});
 
 	it('opens add new key modal on button click', async () => {
-		fireEvent.click(screen.getByText('New Token'));
+		fireEvent.click(screen.getByText('New Key'));
 		await waitFor(() => {
 			const createNewKeyBtn = screen.getByRole('button', {
-				name: /Create new token/i,
+				name: /Create new key/i,
 			});
 
 			expect(createNewKeyBtn).toBeInTheDocument();
@@ -57,10 +57,10 @@ describe('APIKeys component', () => {
 	});
 
 	it('closes add new key modal on cancel button click', async () => {
-		fireEvent.click(screen.getByText('New Token'));
+		fireEvent.click(screen.getByText('New Key'));
 
 		const createNewKeyBtn = screen.getByRole('button', {
-			name: /Create new token/i,
+			name: /Create new key/i,
 		});
 
 		await waitFor(() => {
@@ -79,10 +79,10 @@ describe('APIKeys component', () => {
 			),
 		);
 
-		fireEvent.click(screen.getByText('New Token'));
+		fireEvent.click(screen.getByText('New Key'));
 
 		const createNewKeyBtn = screen.getByRole('button', {
-			name: /Create new token/i,
+			name: /Create new key/i,
 		});
 
 		await waitFor(() => {
@@ -90,7 +90,7 @@ describe('APIKeys component', () => {
 		});
 
 		act(() => {
-			const inputElement = screen.getByPlaceholderText('Enter Token Name');
+			const inputElement = screen.getByPlaceholderText('Enter Key Name');
 			fireEvent.change(inputElement, { target: { value: 'Top Secret' } });
 			fireEvent.click(screen.getByTestId('create-form-admin-role-btn'));
 			fireEvent.click(createNewKeyBtn);

frontend/src/container/APIKeys/APIKeys.tsx

@@ -512,15 +512,15 @@ function APIKeys(): JSX.Element {
 		<div className="api-key-container">
 			<div className="api-key-content">
 				<header>
-					<Typography.Title className="title">Access Tokens </Typography.Title>
+					<Typography.Title className="title">API Keys</Typography.Title>
 					<Typography.Text className="subtitle">
-						Create and manage access tokens for the SigNoz API
+						Create and manage API keys for the SigNoz API
 					</Typography.Text>
 				</header>
 
 				<div className="api-keys-search-add-new">
 					<Input
-						placeholder="Search for token..."
+						placeholder="Search for keys..."
 						prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
 						value={searchValue}
 						onChange={handleSearch}
@@ -531,7 +531,7 @@ function APIKeys(): JSX.Element {
 						type="primary"
 						onClick={showAddModal}
 					>
-						<Plus size={14} /> New Token
+						<Plus size={14} /> New Key
 					</Button>
 				</div>
 
@@ -544,7 +544,7 @@ function APIKeys(): JSX.Element {
 						pageSize: 5,
 						hideOnSinglePage: true,
 						showTotal: (total: number, range: number[]): string =>
-							`${range[0]}-${range[1]} of ${total} tokens`,
+							`${range[0]}-${range[1]} of ${total} keys`,
 					}}
 				/>
 			</div>
@@ -552,7 +552,7 @@ function APIKeys(): JSX.Element {
 			{/* Delete Key Modal */}
 			<Modal
 				className="delete-api-key-modal"
-				title={<span className="title">Delete Token</span>}
+				title={<span className="title">Delete Key</span>}
 				open={isDeleteModalOpen}
 				closable
 				afterClose={handleModalClose}
@@ -574,7 +574,7 @@ function APIKeys(): JSX.Element {
 						onClick={onDeleteHandler}
 						className="delete-btn"
 					>
-						Delete Token
+						Delete key
 					</Button>,
 				]}
 			>
@@ -588,7 +588,7 @@ function APIKeys(): JSX.Element {
 			{/* Edit Key Modal */}
 			<Modal
 				className="api-key-modal"
-				title="Edit token"
+				title="Edit key"
 				open={isEditModalOpen}
 				key="edit-api-key-modal"
 				afterClose={handleModalClose}
@@ -612,7 +612,7 @@ function APIKeys(): JSX.Element {
 						icon={<Check size={14} />}
 						onClick={onUpdateApiKey}
 					>
-						Update Token
+						Update key
 					</Button>,
 				]}
 			>
@@ -632,7 +632,7 @@ function APIKeys(): JSX.Element {
 						label="Name"
 						rules={[{ required: true }, { type: 'string', min: 6 }]}
 					>
-						<Input placeholder="Enter Token Name" autoFocus />
+						<Input placeholder="Enter Key Name" autoFocus />
 					</Form.Item>
 
 					<Form.Item name="role" label="Role">
@@ -666,7 +666,7 @@ function APIKeys(): JSX.Element {
 			{/* Create New Key Modal */}
 			<Modal
 				className="api-key-modal"
-				title="Create new token"
+				title="Create new key"
 				open={isAddModalOpen}
 				key="create-api-key-modal"
 				closable
@@ -683,7 +683,7 @@ function APIKeys(): JSX.Element {
 									onClick={handleCopyClose}
 									icon={<Check size={12} />}
 								>
-									Copy token and close
+									Copy key and close
 								</Button>,
 						  ]
 						: [
@@ -704,7 +704,7 @@ function APIKeys(): JSX.Element {
 									loading={isLoadingCreateAPIKey}
 									onClick={onCreateAPIKey}
 								>
-									Create new token
+									Create new key
 								</Button>,
 						  ]
 				}
@@ -728,7 +728,7 @@ function APIKeys(): JSX.Element {
 							rules={[{ required: true }, { type: 'string', min: 6 }]}
 							validateTrigger="onFinish"
 						>
-							<Input placeholder="Enter Token Name" autoFocus />
+							<Input placeholder="Enter Key Name" autoFocus />
 						</Form.Item>
 
 						<Form.Item name="role" label="Role">
@@ -769,7 +769,7 @@ function APIKeys(): JSX.Element {
 				{showNewAPIKeyDetails && (
 					<div className="api-key-info-container">
 						<Row>
-							<Col span={8}>Token</Col>
+							<Col span={8}>Key</Col>
 							<Col span={16}>
 								<span className="copyable-text">
 									<Typography.Text>

frontend/src/mocks-server/__mockdata__/apiKeys.ts

@@ -82,7 +82,7 @@ export const getAPIKeysResponse = {
 			},
 			token: '1udrUFmRI6gdb8r/hLabS7zRlgfMQlUw/tz9sac82pE=',
 			role: 'ADMIN',
-			name: 'No Expiry Token',
+			name: 'No Expiry Key',
 			createdAt: 1708008178,
 			expiresAt: 0,
 			updatedAt: 1708008190,