feat: update naming to API keys to Access Tokens (#4597)

* feat: update naming to API keys to Access Tokens

* feat: update api-keys route to access-tokens

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": "API Keys",
+	"api_keys": "Access Tokens",
 	"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 | API Keys",
+	"API_KEYS": "SigNoz | Access Tokens",
 	"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}} key? Deleting a key is irreversible and cannot be undone."
+	"delete_confirm_message": "Are you sure you want to delete {{keyName}} token? Deleting a token 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": "API Keys",
+	"api_keys": "Access Tokens",
 	"my_settings": "My Settings",
 	"overview_metrics": "Overview Metrics",
 	"dbcall_metrics": "Database Calls",

frontend/public/locales/en/titles.json

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

frontend/src/AppRoutes/routes.ts

@@ -358,6 +358,7 @@ export const oldRoutes = [
 	'/logs/old-logs-explorer',
 	'/logs-explorer',
 	'/logs-explorer/live',
+	'/settings/api-keys',
 ];
 
 export const oldNewRoutesMapping: Record<string, string> = {
@@ -365,6 +366,7 @@ export const oldNewRoutesMapping: Record<string, string> = {
 	'/logs/old-logs-explorer': '/logs/old-logs-explorer',
 	'/logs-explorer': '/logs/logs-explorer',
 	'/logs-explorer/live': '/logs/logs-explorer/live',
+	'/settings/api-keys': '/settings/access-tokens',
 };
 
 export interface AppRoutes {

frontend/src/constants/routes.ts

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

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

@@ -26,13 +26,13 @@ describe('APIKeys component', () => {
 	});
 
 	it('renders APIKeys component without crashing', () => {
-		expect(screen.getByText('API Keys')).toBeInTheDocument();
+		expect(screen.getByText('Access Tokens')).toBeInTheDocument();
 		expect(
-			screen.getByText('Create and manage access keys for the SigNoz API'),
+			screen.getByText('Create and manage access tokens for the SigNoz API'),
 		).toBeInTheDocument();
 	});
 
-	it('render list of API Keys', async () => {
+	it('render list of Access Tokens', async () => {
 		server.use(
 			rest.get(apiKeysURL, (req, res, ctx) =>
 				res(ctx.status(200), ctx.json(getAPIKeysResponse)),
@@ -41,15 +41,15 @@ describe('APIKeys component', () => {
 
 		await waitFor(() => {
 			expect(screen.getByText('No Expiry Token')).toBeInTheDocument();
-			expect(screen.getByText('1-5 of 18 API Keys')).toBeInTheDocument();
+			expect(screen.getByText('1-5 of 18 tokens')).toBeInTheDocument();
 		});
 	});
 
 	it('opens add new key modal on button click', async () => {
-		fireEvent.click(screen.getByText('New Key'));
+		fireEvent.click(screen.getByText('New Token'));
 		await waitFor(() => {
 			const createNewKeyBtn = screen.getByRole('button', {
-				name: /Create new key/i,
+				name: /Create new token/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 Key'));
+		fireEvent.click(screen.getByText('New Token'));
 
 		const createNewKeyBtn = screen.getByRole('button', {
-			name: /Create new key/i,
+			name: /Create new token/i,
 		});
 
 		await waitFor(() => {
@@ -79,10 +79,10 @@ describe('APIKeys component', () => {
 			),
 		);
 
-		fireEvent.click(screen.getByText('New Key'));
+		fireEvent.click(screen.getByText('New Token'));
 
 		const createNewKeyBtn = screen.getByRole('button', {
-			name: /Create new key/i,
+			name: /Create new token/i,
 		});
 
 		await waitFor(() => {
@@ -90,7 +90,7 @@ describe('APIKeys component', () => {
 		});
 
 		act(() => {
-			const inputElement = screen.getByPlaceholderText('Enter Key Name');
+			const inputElement = screen.getByPlaceholderText('Enter Token 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

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