update tabs & code

Author: paula-stacho

package-lock.json

@@ -34,48 +34,48 @@
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
-    "@leafygreen-ui/badge": "^10.0.2",
-    "@leafygreen-ui/banner": "^10.0.2",
-    "@leafygreen-ui/button": "^24.0.2",
-    "@leafygreen-ui/card": "^13.0.2",
-    "@leafygreen-ui/checkbox": "^18.0.0",
-    "@leafygreen-ui/chip": "^4.0.2",
-    "@leafygreen-ui/code": "^16.0.2",
-    "@leafygreen-ui/combobox": "^12.0.2",
-    "@leafygreen-ui/confirmation-modal": "^9.0.0",
-    "@leafygreen-ui/drawer": "^4.0.1",
+    "@leafygreen-ui/badge": "^10.0.3",
+    "@leafygreen-ui/banner": "^10.0.3",
+    "@leafygreen-ui/button": "^25.0.0",
+    "@leafygreen-ui/card": "^13.0.3",
+    "@leafygreen-ui/checkbox": "^18.0.1",
+    "@leafygreen-ui/chip": "^4.0.3",
+    "@leafygreen-ui/code": "^20.0.2",
+    "@leafygreen-ui/combobox": "^12.0.3",
+    "@leafygreen-ui/confirmation-modal": "^9.0.2",
+    "@leafygreen-ui/drawer": "^4.0.3",
     "@leafygreen-ui/emotion": "^5.0.0",
-    "@leafygreen-ui/guide-cue": "^8.0.2",
-    "@leafygreen-ui/hooks": "^9.1.0",
+    "@leafygreen-ui/guide-cue": "^8.0.4",
+    "@leafygreen-ui/hooks": "^9.1.1",
     "@leafygreen-ui/icon": "^14.1.0",
-    "@leafygreen-ui/icon-button": "^17.0.2",
-    "@leafygreen-ui/info-sprinkle": "^5.0.2",
-    "@leafygreen-ui/leafygreen-provider": "^5.0.1",
-    "@leafygreen-ui/logo": "^11.0.1",
-    "@leafygreen-ui/marketing-modal": "^6.0.2",
-    "@leafygreen-ui/menu": "^31.0.0",
-    "@leafygreen-ui/modal": "^19.0.0",
+    "@leafygreen-ui/icon-button": "^17.0.3",
+    "@leafygreen-ui/info-sprinkle": "^5.0.3",
+    "@leafygreen-ui/leafygreen-provider": "^5.0.2",
+    "@leafygreen-ui/logo": "^11.0.2",
+    "@leafygreen-ui/marketing-modal": "^6.0.4",
+    "@leafygreen-ui/menu": "^31.0.1",
+    "@leafygreen-ui/modal": "^19.0.1",
     "@leafygreen-ui/palette": "^5.0.0",
-    "@leafygreen-ui/pipeline": "^8.0.2",
-    "@leafygreen-ui/polymorphic": "^3.0.2",
-    "@leafygreen-ui/popover": "^14.0.2",
-    "@leafygreen-ui/portal": "^7.0.1",
-    "@leafygreen-ui/radio-box-group": "^15.0.2",
-    "@leafygreen-ui/radio-group": "^13.0.2",
-    "@leafygreen-ui/search-input": "^6.0.2",
-    "@leafygreen-ui/segmented-control": "^11.0.2",
-    "@leafygreen-ui/select": "^16.0.0",
-    "@leafygreen-ui/skeleton-loader": "^3.0.2",
-    "@leafygreen-ui/split-button": "^6.0.0",
-    "@leafygreen-ui/table": "^15.0.0",
-    "@leafygreen-ui/tabs": "^16.0.0",
-    "@leafygreen-ui/text-area": "^12.0.0",
-    "@leafygreen-ui/text-input": "^16.0.0",
-    "@leafygreen-ui/toast": "^8.0.2",
-    "@leafygreen-ui/toggle": "^12.0.2",
-    "@leafygreen-ui/tokens": "^3.1.1",
-    "@leafygreen-ui/tooltip": "^14.1.0",
-    "@leafygreen-ui/typography": "^21.0.0",
+    "@leafygreen-ui/pipeline": "^8.0.3",
+    "@leafygreen-ui/polymorphic": "^3.0.3",
+    "@leafygreen-ui/popover": "^14.0.3",
+    "@leafygreen-ui/portal": "^7.0.2",
+    "@leafygreen-ui/radio-box-group": "^15.0.3",
+    "@leafygreen-ui/radio-group": "^13.0.3",
+    "@leafygreen-ui/search-input": "^6.0.3",
+    "@leafygreen-ui/segmented-control": "^11.0.3",
+    "@leafygreen-ui/select": "^16.0.2",
+    "@leafygreen-ui/skeleton-loader": "^3.0.3",
+    "@leafygreen-ui/split-button": "^6.1.0",
+    "@leafygreen-ui/table": "^15.0.1",
+    "@leafygreen-ui/tabs": "^17.0.0",
+    "@leafygreen-ui/text-area": "^12.0.1",
+    "@leafygreen-ui/text-input": "^16.0.1",
+    "@leafygreen-ui/toast": "^8.0.3",
+    "@leafygreen-ui/toggle": "^12.0.3",
+    "@leafygreen-ui/tokens": "^3.1.2",
+    "@leafygreen-ui/tooltip": "^14.1.1",
+    "@leafygreen-ui/typography": "^22.0.1",
     "@mongodb-js/compass-context-menu": "^0.2.1",
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/utils": "^3.13.1",

packages/compass-components/package.json

@@ -7,7 +7,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 as CodePanel } 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';
@@ -165,6 +165,7 @@ export {
   Checkbox,
   Chip,
   Code,
+  CodePanel,
   ConfirmationModal,
   ExpandedContent,
   HeaderCell,

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

@@ -73,12 +73,12 @@ function TabNavBar({
           className="test-tab-nav-bar-tabs"
           // https://jira.mongodb.org/browse/LG-4696 - i is a
           // React.Dispatch<React.SetStateAction<number>> type
-          setSelected={(i) => {
+          onValueChange={(i) => {
             if (typeof i === 'number') {
               return onTabClicked(i);
             }
           }}
-          selected={activeTabIndex}
+          value={activeTabIndex}
         >
           {tabs.map(({ name, title }, idx) => {
             return (

packages/compass-components/src/components/tab-nav-bar.tsx

@@ -8,6 +8,7 @@ import {
   spacing,
   openToast,
   closeToast,
+  CodePanel,
 } from '@mongodb-js/compass-components';
 import type { ConnectionInfo } from '@mongodb-js/connection-info';
 import { getConnectionTitle } from '@mongodb-js/connection-info';
@@ -188,7 +189,7 @@ const openNotifyDeviceAuthModal = (
         <br></br>
         <Body>Enter the following code on that page:</Body>
         <Body as="div">
-          <Code language="none" copyable>
+          <Code language="none" panel={<CodePanel />}>
             {userCode}
           </Code>
         </Body>

packages/compass-connections/src/components/connection-status-notifications.tsx

@@ -5,6 +5,7 @@ import {
   css,
   Label,
   Code,
+  CodePanel,
   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={
+              <CodePanel
+                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={
+              <CodePanel
+                languageOptions={languageOptions}
+                onChange={(option: LanguageOption) =>
+                  setOutputLanguage(
+                    codeLanguageToOutputLanguage(option.language)
+                  )
+                }
+              />
+            }
           >
             {transpiledExpression || ''}
           </Code>

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

@@ -1,6 +1,12 @@
 import React, { useMemo } from 'react';
 import { connect } from 'react-redux';
-import { Body, Code, css, spacing } from '@mongodb-js/compass-components';
+import {
+  Body,
+  Code,
+  CodePanel,
+  css,
+  spacing,
+} from '@mongodb-js/compass-components';
 
 import type { FieldsToExportOption, FieldsToExport } from '../modules/export';
 import type { RootExportState } from '../stores/export-store';
@@ -78,7 +84,7 @@ function ExportCodeView({
         data-testid="export-collection-code-preview-wrapper"
         id={codeElementId}
         language="javascript"
-        copyable
+        panel={<CodePanel />}
       >
         {code}
       </Code>

packages/compass-import-export/src/components/export-code-view.tsx

@@ -1,4 +1,10 @@
-import { Code, Link, css, spacing } from '@mongodb-js/compass-components';
+import {
+  Code,
+  CodePanel,
+  Link,
+  css,
+  spacing,
+} from '@mongodb-js/compass-components';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import React from 'react';
 
@@ -77,7 +83,7 @@ const MDBCodeViewer = ({
       <Code
         data-testid={dataTestId || 'mdb-code-viewer'}
         language="javascript"
-        onCopy={onCopy}
+        panel={<CodePanel onCopy={onCopy} />}
       >
         {GeneratedCode}
       </Code>

packages/compass-indexes/src/components/create-index-form/mdb-code-viewer.tsx

@@ -30,7 +30,6 @@ export const QueryItemContent: React.FunctionComponent<{
             className={queryCodeStyles}
             data-testid="query-history-query-code"
             language="javascript"
-            copyable={false}
           >
             {formatQuery(value)}
           </Code>

packages/compass-query-bar/src/components/query-history/query-item/query-item-content.tsx

@@ -109,8 +109,8 @@ function AdvancedOptionsTabs({
   return (
     <Tabs
       className={tabsStyles}
-      setSelected={setActiveTab}
-      selected={activeTab}
+      onValueChange={setActiveTab}
+      value={activeTab}
       aria-label="Advanced Options Tabs"
     >
       {tabs.map((tabObject: TabObject, idx: number) => {