fix: code snippet loads when a sample is selected (#3789)

Author: ElinorW

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

@@ -89,7 +89,9 @@ const snippetSlice = createSlice({
       })
       .addCase(getSnippet.fulfilled, (state, action) => {
         state.pending = false;
-        state.data = action.payload as Snippet;
+        const [rawKey, value] = Object.entries(action.payload)[0];
+        const key = rawKey.toLowerCase();
+        state.data = { [key]: value };
         state.error = {} as SnippetError;
       })
       .addCase(getSnippet.rejected, (state, action) => {

src/app/views/query-response/snippets/Snippets.tsx

@@ -7,15 +7,14 @@ import {
   Spinner,
   Tab,
   TabList,
-  TabValue,
   Text
 } from '@fluentui/react-components';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from '../../../../store';
 import { componentNames, telemetry } from '../../../../telemetry';
 import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names';
 import { ValidationContext } from '../../../services/context/validation-context/ValidationContext';
-import { getSnippet } from '../../../services/slices/snippet.slice';
+import { getSnippet, setSnippetTabSuccess } from '../../../services/slices/snippet.slice';
 import { translateMessage } from '../../../utils/translate-messages';
 import { Monaco } from '../../common';
 import { copyAndTrackText } from '../../common/copy';
@@ -129,7 +128,15 @@ const trackLinkClickedEvent = (
 
 const ExtraSnippetInformation: React.FC<{ language: string }> = ({ language }) => {
   const styles = useSnippetStyles();
-  const { sdkDownloadLink, sdkDocLink } = supportedLanguages[language];
+  const langKey = Object.keys(supportedLanguages).find(
+    (key) => key.toLowerCase() === language.toLowerCase()
+  );
+
+  if (!langKey) {
+    return null;
+  }
+
+  const { sdkDownloadLink, sdkDocLink } = supportedLanguages[langKey];
   const libParagraph =
     setCommentSymbol(language) +
     translateMessage('Leverage libraries') +
@@ -182,10 +189,14 @@ const GetSnippets = () => {
 
 const RenderSnippets = () => {
   const styles = useSnippetStyles();
-  const [selectedLanguage, setSelectedLanguage] = useState<TabValue>('CSharp');
+  const dispatch = useAppDispatch();
+  const selectedLanguage = useAppSelector(state => state.snippets.snippetTab);
 
   const onTabSelect = (_event: SelectTabEvent, data: SelectTabData) => {
-    setSelectedLanguage(data.value);
+    const newLang = data.value as string;
+    dispatch(setSnippetTabSuccess(newLang));
+    dispatch(getSnippet(newLang.toLowerCase()));
+    telemetry.trackTabClickEvent(newLang);
   };
   return (
     <div id='snippets-tablist' className={styles.container}>
@@ -213,12 +224,14 @@ const SnippetContent: React.FC<SnippetContentProps> = (
   const dispatch = useAppDispatch();
   const language = props.language.toLowerCase();
   const snippets = useAppSelector((state) => state.snippets);
+  const sampleQuery = useAppSelector((state) => state.sampleQuery);
+  const snippetTab = useAppSelector((state) => state.snippets.snippetTab);
   const { data, pending: loadingState, error } = snippets;
   const hasSnippetError =
     (error?.status && error.status === 404) ||
     (error?.status && error.status === 400);
 
-  const snippet = !loadingState && data ? data[language] : '';
+  const snippet = !loadingState && data ? data[language.toLowerCase()] : '';
 
   const handleCopy = async () => {
     copyAndTrackText(snippet, CODE_SNIPPETS_COPY_BUTTON, {
@@ -227,8 +240,16 @@ const SnippetContent: React.FC<SnippetContentProps> = (
   };
 
   useEffect(() => {
-    dispatch(getSnippet(language));
-  }, [language, dispatch]);
+    if (snippetTab) {
+      dispatch(getSnippet(snippetTab.toLowerCase()));
+    }
+  }, [snippetTab]);
+
+  useEffect(() => {
+    if (sampleQuery && snippetTab) {
+      dispatch(getSnippet(snippetTab.toLowerCase()));
+    }
+  }, [sampleQuery]);
 
   const showSpinner = loadingState && !hasSnippetError;
   const notAvailable = !loadingState && hasSnippetError;