feat: add green tick for generation api key fulfilled gf-189 (#568)

apps/frontend/src/modules/project-api-keys/slices/project-api-keys.slice.ts

@@ -7,22 +7,27 @@ import { copyToClipboard, create } from "./actions.js";
 
 type State = {
 	dataStatus: ValueOf<typeof DataStatus>;
+	generateKeyDataStatus: ValueOf<typeof DataStatus>;
 };
 
 const initialState: State = {
 	dataStatus: DataStatus.IDLE,
+	generateKeyDataStatus: DataStatus.IDLE,
 };
 
 const { actions, name, reducer } = createSlice({
 	extraReducers(builder) {
 		builder.addCase(create.pending, (state) => {
 			state.dataStatus = DataStatus.PENDING;
+			state.generateKeyDataStatus = DataStatus.PENDING;
 		});
 		builder.addCase(create.fulfilled, (state) => {
 			state.dataStatus = DataStatus.FULFILLED;
+			state.generateKeyDataStatus = DataStatus.FULFILLED;
 		});
 		builder.addCase(create.rejected, (state) => {
 			state.dataStatus = DataStatus.REJECTED;
+			state.generateKeyDataStatus = DataStatus.REJECTED;
 		});
 
 		builder.addCase(copyToClipboard.pending, (state) => {

apps/frontend/src/pages/project/libs/components/setup-analytics-modal/setup-analytics-modal.tsx

@@ -1,5 +1,6 @@
 import {
 	Button,
+	Icon,
 	IconButton,
 	Input,
 	Modal,
@@ -32,12 +33,16 @@ const SetupAnalyticsModal = ({
 }: Properties): JSX.Element => {
 	const dispatch = useAppDispatch();
 
-	const { dataStatus } = useAppSelector(({ projectApiKeys }) => projectApiKeys);
+	const { dataStatus, generateKeyDataStatus } = useAppSelector(
+		({ projectApiKeys }) => projectApiKeys,
+	);
 	const { authenticatedUser } = useAppSelector(({ auth }) => auth);
 
 	const hasProjectApiKey = project.apiKey !== null;
 	const hasAuthenticatedUser = authenticatedUser !== null;
 
+	const isKeyGenerated = generateKeyDataStatus === DataStatus.FULFILLED;
+
 	const isGenerateButtonDisabled = dataStatus === DataStatus.PENDING;
 	const isCopyButtonDisabled =
 		!hasProjectApiKey || dataStatus === DataStatus.PENDING;
@@ -129,6 +134,15 @@ const SetupAnalyticsModal = ({
 						label="API key"
 						name="apiKey"
 						placeholder="No API key"
+						{...(isKeyGenerated
+							? {
+									leftIcon: (
+										<div className={styles["generated-key-indicator"]}>
+											<Icon height={20} name="check" width={20} />
+										</div>
+									),
+								}
+							: {})}
 						rightIcon={
 							<IconButton
 								iconName="clipboard"

apps/frontend/src/pages/project/libs/components/setup-analytics-modal/styles.module.css

@@ -41,3 +41,11 @@
 .list-item-text {
 	margin: 0;
 }
+
+.generated-key-indicator {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 30px;
+	color: var(--color-success);
+}