From 427af2e7ecc2c18ea26828eb14bd3033f4bcca8a Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Fri, 6 Sep 2024 15:55:33 +0200
Subject: [PATCH] Ops: Add query param essentials to open Essentials drawer
 (#93023)

* Add query param essentials to open Essentials drawer

* use query param for keeping the state of the essentials drawer
---
 .../configuration-tracker/components/ConfigureIRM.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/public/app/features/gops/configuration-tracker/components/ConfigureIRM.tsx b/public/app/features/gops/configuration-tracker/components/ConfigureIRM.tsx
index 750100c3162..802e7a7091c 100644
--- a/public/app/features/gops/configuration-tracker/components/ConfigureIRM.tsx
+++ b/public/app/features/gops/configuration-tracker/components/ConfigureIRM.tsx
@@ -1,9 +1,10 @@
 import { css } from '@emotion/css';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { IconName, Text, useStyles2 } from '@grafana/ui';
+import { useURLSearchParams } from 'app/features/alerting/unified/hooks/useURLSearchParams';
 import { getFirstCompatibleDataSource } from 'app/features/alerting/unified/utils/datasource';
 import { DATASOURCES_ROUTES } from 'app/features/datasources/constants';
 
@@ -58,7 +59,9 @@ export function ConfigureIRM() {
     });
   }, [dataSourceConfigurationData.dataSourceCompatibleWithAlerting]);
 
-  const [essentialsOpen, setEssentialsOpen] = useState(false);
+  // query param 'essentials' is used to open essentials drawer
+  const [queryParams, setQueryParams] = useURLSearchParams();
+  const essentialsOpen = queryParams.get('essentials') === 'open';
 
   const handleActionClick = (configID: number, isDone?: boolean) => {
     trackIrmConfigurationTrackerEvent(IRMInteractionNames.ClickDataSources, {
@@ -75,7 +78,7 @@ export function ConfigureIRM() {
         }
         break;
       case ConfigurationStepsEnum.ESSENTIALS:
-        setEssentialsOpen(true);
+        setQueryParams({ essentials: 'open' });
         trackIrmConfigurationTrackerEvent(IRMInteractionNames.OpenEssentials, {
           essentialStepsDone: essentialsConfigurationData.stepsDone,
           essentialStepsToDo: essentialsConfigurationData.totalStepsToDo,
@@ -88,7 +91,7 @@ export function ConfigureIRM() {
   };
 
   function onCloseEssentials() {
-    setEssentialsOpen(false);
+    setQueryParams({ essentials: undefined });
     trackIrmConfigurationTrackerEvent(IRMInteractionNames.CloseEssentials, {
       essentialStepsDone: essentialsConfigurationData.stepsDone,
       essentialStepsToDo: essentialsConfigurationData.totalStepsToDo,