From 2af9fb66621d8749a74db8bfa6328d2274c8f3bd Mon Sep 17 00:00:00 2001
From: Elinor <elkaguon@microsoft.com>
Date: Wed, 1 Nov 2023 12:37:21 +0300
Subject: [PATCH] Fix: Update CLI tab to use uppercase (#2827)

---
 .../query-response/snippets/Snippets.tsx      |  2 +-
 .../snippets/snippets-helper.tsx              | 23 +++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/app/views/query-response/snippets/Snippets.tsx b/src/app/views/query-response/snippets/Snippets.tsx
index 9a8188709..dcc6f6884 100644
--- a/src/app/views/query-response/snippets/Snippets.tsx
+++ b/src/app/views/query-response/snippets/Snippets.tsx
@@ -38,7 +38,7 @@ function GetSnippets() {
       sdkDownloadLink: 'https://aka.ms/msgraphpythonsdk',
       sdkDocLink: 'https://aka.ms/sdk-doc'
     },
-    'Cli' : {
+    'CLI' : {
       sdkDownloadLink: 'https://aka.ms/msgraphclisdk',
       sdkDocLink: 'https://aka.ms/sdk-doc'
     }
diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx
index 23c4012cf..ea500d24d 100644
--- a/src/app/views/query-response/snippets/snippets-helper.tsx
+++ b/src/app/views/query-response/snippets/snippets-helper.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import { ITheme, Label, Link, PivotItem, getTheme } from '@fluentui/react';
 import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -30,10 +31,26 @@ interface ISupportedLanguages {
 
 export function renderSnippets(supportedLanguages: ISupportedLanguages) {
   const sortedSupportedLanguages: ISupportedLanguages = {};
-  Object.keys(supportedLanguages).sort().forEach(key => {
+  const sortedKeys = Object.keys(supportedLanguages).sort((lang1, lang2) => {
+    if (lang1 === 'CSharp') {
+      return -1;
+    }
+    if (lang2 === 'CSharp') {
+      return 1;
+    }
+    if (lang1 < lang2) {
+      return -1;
+    } else if (lang1 > lang2) {
+      return 1;
+    }
+    return 0;
+  });
+
+  sortedKeys.forEach(key => {
     sortedSupportedLanguages[key] = supportedLanguages[key];
   });
 
+
   return Object.keys(sortedSupportedLanguages).
     map((language: string) => (
       <PivotItem
@@ -54,6 +71,7 @@ export function renderSnippets(supportedLanguages: ISupportedLanguages) {
 function Snippet(props: ISnippetProps) {
   let { language } = props;
   const { sdkDownloadLink, sdkDocLink } = props.snippetInfo[language];
+  const unformattedLanguage = language;
 
   /**
    * Converting language lowercase so that we won't have to call toLowerCase() in multiple places.
@@ -61,6 +79,7 @@ function Snippet(props: ISnippetProps) {
    * Ie the monaco component expects a lowercase string for the language prop and the graphexplorerapi expects
    * a lowercase string for the param value.
    */
+
   language = language.toLowerCase();
 
   const { dimensions: { response }, snippets,
@@ -112,7 +131,7 @@ function Snippet(props: ISnippetProps) {
     return (
       <div style={snippetCommentStyles}>
 
-        {setCommentSymbol()} {translateMessage('Leverage libraries')} {language} {translateMessage('Client library')}
+        {setCommentSymbol()} {translateMessage('Leverage libraries')} {unformattedLanguage} {translateMessage('Client library')}
 
         <Link href={sdkDownloadLink} underline styles={snippetLinkStyles}
           onClick={(e) => trackLinkClickedEvent(sdkDownloadLink, e)} target={'_blank'} rel='noreferrer noopener'>