Update export-to-language to LG Code v18

Author: kraenhansen

packages/compass-components/src/components/leafygreen.tsx

@@ -8,7 +8,7 @@ import { default as Badge } from '@leafygreen-ui/badge';
 import { default as Banner } from '@leafygreen-ui/banner';
 import Checkbox from '@leafygreen-ui/checkbox';
 import Card from '@leafygreen-ui/card';
-import Code, { Language } from '@leafygreen-ui/code';
+import Code, { Language, Panel } from '@leafygreen-ui/code';
 import ConfirmationModal from '@leafygreen-ui/confirmation-modal';
 import { default as LeafyGreenIcon } from '@leafygreen-ui/icon';
 import type { Size as LeafyGreenIconSize } from '@leafygreen-ui/icon';
@@ -128,6 +128,7 @@ export {
   Checkbox,
   Chip,
   Code,
+  Panel,
   ConfirmationModal,
   Copyable,
   ExpandedContent,

packages/compass-export-to-language/src/components/modal.tsx

@@ -5,6 +5,7 @@ import {
   css,
   Label,
   Code,
+  Panel,
   Checkbox,
   Banner,
   spacing,
@@ -240,13 +241,16 @@ const ExportToLanguageModal: React.FunctionComponent<
             className={codeStyles}
             id="export-to-language-input"
             data-testid="export-to-language-input"
-            languageOptions={shellLanguageOptions}
-            onChange={() => {
-              // There is only one language option and we don't allow to change
-              // the value
-            }}
             language="Shell"
-            copyable={true}
+            panel={
+              <Panel
+                languageOptions={shellLanguageOptions}
+                onChange={() => {
+                  // There is only one language option and we don't allow to change
+                  // the value
+                }}
+              />
+            }
           >
             {prettyInput}
           </Code>
@@ -266,13 +270,18 @@ const ExportToLanguageModal: React.FunctionComponent<
             className={codeStyles}
             id="export-to-language-output"
             data-testid="export-to-language-output"
-            languageOptions={languageOptions}
-            onChange={(option: LanguageOption) =>
-              setOutputLanguage(codeLanguageToOutputLanguage(option.language))
-            }
             language={outputLanguageToCodeLanguage(outputLanguage)}
-            copyable={true}
-            onCopy={trackCopiedOutput}
+            panel={
+              <Panel
+                languageOptions={shellLanguageOptions}
+                onCopy={trackCopiedOutput}
+                onChange={(option: LanguageOption) =>
+                  setOutputLanguage(
+                    codeLanguageToOutputLanguage(option.language)
+                  )
+                }
+              />
+            }
           >
             {transpiledExpression || ''}
           </Code>