Fix: Update CLI tab to use uppercase (#2827)

microsoftgraph · Nov 1, 2023 · 2af9fb6 · 2af9fb6
1 parent 5d10068
commit 2af9fb6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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,13 +71,15 @@ 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.
    *
    * 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'>