fix: set default sample auto selection on page load globally (#3799)

* set auto selection globally

* remove highlight

* fix sonar issues

Author: Mnickii

src/app/services/actions/autocomplete-action-creators.spec.ts

@@ -47,7 +47,8 @@ const mockState: ApplicationState = {
   samples: {
     queries: [],
     pending: false,
-    error: null
+    error: null,
+    hasAutoSelectedDefault: false
   },
   scopes: {
     pending: { isSpecificPermissions: false, isFullPermissions: false },
@@ -123,7 +124,8 @@ store.getState = () => ({
   samples: {
     queries: [],
     pending: false,
-    error: null
+    error: null,
+    hasAutoSelectedDefault: false
   }
 })
 

src/app/services/actions/permissions-action-creator.spec.ts

@@ -68,7 +68,8 @@ const mockState: ApplicationState = {
   samples: {
     queries: [],
     pending: false,
-    error: null
+    error: null,
+    hasAutoSelectedDefault: false
   },
   scopes: {
     pending: { isSpecificPermissions: false, isFullPermissions: false },

src/app/services/actions/resource-explorer-action-creators.spec.ts

@@ -43,7 +43,8 @@ const mockState: ApplicationState = {
   samples: {
     queries: [],
     pending: false,
-    error: null
+    error: null,
+    hasAutoSelectedDefault: false
   },
   permissionGrants: {
     permissions: [],

src/app/services/slices/samples.slice.ts

@@ -9,12 +9,14 @@ interface SamplesState {
   queries: ISampleQuery[];
   pending: boolean;
   error: object | null | string;
+  hasAutoSelectedDefault: boolean;
 }
 
 const initialState: SamplesState = {
   queries: [],
   pending: false,
-  error: null
+  error: null,
+  hasAutoSelectedDefault: false
 };
 
 export const fetchSamples = createAsyncThunk<ISampleQuery[], void, { rejectValue: ISampleQuery[] }>(
@@ -52,7 +54,11 @@ export const fetchSamples = createAsyncThunk<ISampleQuery[], void, { rejectValue
 const samplesSlice = createSlice({
   name: 'samples',
   initialState,
-  reducers: {},
+  reducers: {
+    setHasAutoSelectedDefault: (state, action) => {
+      state.hasAutoSelectedDefault = action.payload;
+    }
+  },
   extraReducers: (builder) => {
     builder
       .addCase(fetchSamples.pending, (state) => {
@@ -73,4 +79,5 @@ const samplesSlice = createSlice({
   }
 });
 
+export const { setHasAutoSelectedDefault } = samplesSlice.actions;
 export default samplesSlice.reducer;

src/app/views/sidebar/sample-queries/SampleQueries.styles.ts

@@ -14,7 +14,6 @@ export const useStyles = makeStyles({
     maxWidth: '50px'
   },
   disabled: {
-    backgroundColor: tokens.colorSubtleBackgroundHover,
     '&:hover': {
       cursor: 'not-allowed'
     }

src/app/views/sidebar/sample-queries/SampleQueries.tsx

@@ -358,29 +358,33 @@ const Samples: React.FC<SamplesProps> = ({ queries, groups, searchValue }) => {
   const styles = useStyles();
   const [openItems, setOpenItems] = React.useState<Set<TreeItemValue>>(new Set());
   const [selectedQueryKey, setSelectedQueryKey] = useState<string | null>(null);
-  const [hasAutoSelected, setHasAutoSelected] = useState(false);
+  const hasAutoSelectedGlobally = useAppSelector(state => state.samples.hasAutoSelectedDefault) ?? false;
+  const [hasAutoSelected, setHasAutoSelected] = useState(hasAutoSelectedGlobally);
   const mobileScreen = useAppSelector((state) => state.sidebarProperties.mobileScreen);
 
   useEffect(() => {
     if (!searchValue && queries.length === 0) {
       dispatch(fetchSamples());
     } else {
       setSampleQueries(queries);
-      if (!mobileScreen && !hasAutoSelected && queries.length > 0) {
-        const defaultSample = queries.find(q =>
-          q.method === 'GET' && q.humanName.toLowerCase().includes('my profile')
-        );
-
-        if (defaultSample) {
-          const defaultKey = defaultSample.id ?? `${defaultSample.method}-${defaultSample.requestUrl}`;
-          setSelectedQueryKey(defaultKey);
-          sampleQueryItemSelected(defaultSample);
-          setHasAutoSelected(true);
-        }
-      }
     }
   }, [queries]);
 
+  useEffect(() => {
+    if (!mobileScreen && !hasAutoSelected && queries.length > 0) {
+      const defaultSample = queries.find(q =>
+        q.method === 'GET' && q.humanName.toLowerCase().includes('my profile')
+      );
+
+      if (defaultSample) {
+        const defaultKey = defaultSample.id ?? `${defaultSample.method}-${defaultSample.requestUrl}`;
+        setSelectedQueryKey(defaultKey);
+        sampleQueryItemSelected(defaultSample);
+        setHasAutoSelected(true);
+        dispatch({ type: 'samples/setHasAutoSelectedDefault', payload: true });
+      }
+    }
+  }, [mobileScreen, queries, hasAutoSelected, dispatch]);
   useEffect(() => {
     if (groups && groups.length > 0) {
       setOpenItems(prev => {