[LG-5463] fix(code): fix language select rendering when displayName and language differ

.changeset/flat-carrots-change.md

@@ -0,0 +1,29 @@
+---
+'@leafygreen-ui/code': patch
+---
+
+Fixes bug that prevented the language select from rendering if the `displayName` and `language` differed. 
+
+```tsx
+// languageOptions passed to `<Panel`>
+export const languageOptions = [
+  {
+    displayName: 'JavaScript',
+    language: 'javascript',
+  },
+  {
+    displayName: 'Python',
+    language: 'python',
+  },
+  {
+    displayName: 'macOS',
+    language: 'shell',
+  },
+];
+
+// This will render the language selector.
+<Code
+  language={languageOptions[2].language} // shell
+  panel={<Panel languageOptions={languageOptions} />} 
+/>
+```

packages/code/src/Code.stories.tsx

@@ -11,10 +11,8 @@ import { css } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 
-import {
-  languageOptions,
-  LanguageSwitcherWithPanelExample,
-} from './LanguageSwitcher/LanguageSwitcherExample';
+import { LanguageSwitcherWithPanelExample } from './LanguageSwitcher/LanguageSwitcherExample';
+import { languageOptions } from './testing/Code.testutils';
 import Code, {
   CodeProps,
   CopyButton,

packages/code/src/Code/Code.spec.tsx

@@ -409,6 +409,74 @@ describe('packages/Code', () => {
           );
         }
       });
+
+      describe('when the language and displayName are the same', () => {
+        test('renders the language picker', () => {
+          const { getLanguageSwitcherUtils } = renderCode({
+            language: languageOptions[0].displayName,
+            panel: (
+              <Panel onChange={() => {}} languageOptions={languageOptions} />
+            ),
+          });
+          expect(getLanguageSwitcherUtils().getInput()).toBeDefined();
+        });
+
+        test('the language pickers display the displayName', () => {
+          const { getLanguageSwitcherUtils } = renderCode({
+            language: languageOptions[0].displayName,
+            panel: (
+              <Panel onChange={() => {}} languageOptions={languageOptions} />
+            ),
+          });
+          expect(getLanguageSwitcherUtils().getInput()).toHaveTextContent(
+            'JavaScript',
+          );
+        });
+
+        test('sets the correct language', () => {
+          const { getLanguage } = renderCode({
+            language: languageOptions[0].displayName,
+            panel: (
+              <Panel onChange={() => {}} languageOptions={languageOptions} />
+            ),
+          });
+          expect(getLanguage()).toBe('JavaScript');
+        });
+      });
+
+      describe('when the language and displayName are different', () => {
+        test('renders the language picker', () => {
+          const { getLanguageSwitcherUtils } = renderCode({
+            language: languageOptions[2].language, // language is shell. displayName is macOS
+            panel: (
+              <Panel onChange={() => {}} languageOptions={languageOptions} />
+            ),
+          });
+          expect(getLanguageSwitcherUtils().getInput()).toBeDefined();
+        });
+
+        test('the language pickers displays the displayName', () => {
+          const { getLanguageSwitcherUtils } = renderCode({
+            language: languageOptions[2].language, // language is shell. displayName is macOS
+            panel: (
+              <Panel onChange={() => {}} languageOptions={languageOptions} />
+            ),
+          });
+          expect(getLanguageSwitcherUtils().getInput()).toHaveTextContent(
+            'macOS',
+          );
+        });
+
+        test('sets the correct language', () => {
+          const { getLanguage } = renderCode({
+            language: languageOptions[2].language, // language is shell. displayName is macOS
+            panel: (
+              <Panel onChange={() => {}} languageOptions={languageOptions} />
+            ),
+          });
+          expect(getLanguage()).toBe('shell');
+        });
+      });
     });
 
     describe('custom action buttons', () => {
@@ -490,7 +558,7 @@ describe('packages/Code', () => {
       const { getLanguageSwitcherUtils } = renderCodeWithLanguageSwitcher({});
       const trigger = getLanguageSwitcherUtils().getInput();
       userEvent.click(trigger!);
-      expect(getLanguageSwitcherUtils().getOptions()).toHaveLength(2);
+      expect(getLanguageSwitcherUtils().getOptions()).toHaveLength(3);
     });
 
     test('options displayed in select are based on the languageOptions prop', () => {

packages/code/src/LanguageSwitcher/LanguageSwitcherExample.tsx

@@ -1,20 +1,10 @@
 import React, { useState } from 'react';
 
 import { LanguageOption } from '../Panel/Panel.types';
+import { languageOptions } from '../testing/Code.testutils';
 import { Language } from '../types';
 import Code, { Panel } from '..';
 
-export const languageOptions = [
-  {
-    displayName: 'JavaScript',
-    language: Language.JavaScript,
-  },
-  {
-    displayName: 'Python',
-    language: Language.Python,
-  },
-];
-
 const jsSnippet = `
 
 function greeting(entity) {
@@ -34,9 +24,17 @@ print (greeting("World"))
 
 `;
 
+const shellSnippet = `
+
+#!/bin/sh
+echo "Hello world"
+
+`;
+
 const snippetMap = {
   [Language.JavaScript]: jsSnippet,
   [Language.Python]: pythonSnippet,
+  [Language.Shell]: shellSnippet,
 };
 
 export function LanguageSwitcherWithPanelExample({
@@ -61,7 +59,7 @@ export function LanguageSwitcherWithPanelExample({
   return (
     <Code
       {...rest}
-      language={language.displayName}
+      language={language.language}
       panel={
         <Panel
           languageOptions={languageOptions}
@@ -72,7 +70,7 @@ export function LanguageSwitcherWithPanelExample({
         />
       }
     >
-      {snippetMap[languageIndex as 'javascript' | 'python']}
+      {snippetMap[languageIndex as 'javascript' | 'python' | 'shell']}
     </Code>
   );
 }

packages/code/src/Panel/Panel.tsx

@@ -41,7 +41,7 @@ function Panel({
     showCustomActionButtons && !!filteredCustomActionIconButtons.length;
 
   const currentLanguage = languageOptions?.find(
-    option => option.displayName === language,
+    option => option.displayName === language || option.language === language,
   );
 
   const shouldRenderLanguageSwitcher =

packages/code/src/testing/Code.testutils.tsx

@@ -42,6 +42,10 @@ export const languageOptions = [
     displayName: 'Python',
     language: Language.Python,
   },
+  {
+    displayName: 'macOS',
+    language: Language.Shell,
+  },
 ];
 
 export const renderCode = (

packages/code/src/testing/getTestUtils.spec.tsx

@@ -105,7 +105,7 @@ describe('packages/tabs/getTestUtils', () => {
             {},
           );
           userEvent.click(getLanguageSwitcherUtils().getInput()!);
-          expect(getLanguageSwitcherUtils().getOptions()).toHaveLength(2);
+          expect(getLanguageSwitcherUtils().getOptions()).toHaveLength(3);
         });
       });