Skip to content

Commit 6e574ac

Browse files
committed
update tabs & code
1 parent 8f05251 commit 6e574ac

File tree

10 files changed

+263
-1547
lines changed

10 files changed

+263
-1547
lines changed

package-lock.json

Lines changed: 180 additions & 1486 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/compass-components/package.json

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -34,48 +34,48 @@
3434
"@dnd-kit/core": "^6.0.7",
3535
"@dnd-kit/sortable": "^7.0.2",
3636
"@dnd-kit/utilities": "^3.2.1",
37-
"@leafygreen-ui/badge": "^10.0.2",
38-
"@leafygreen-ui/banner": "^10.0.2",
39-
"@leafygreen-ui/button": "^24.0.2",
40-
"@leafygreen-ui/card": "^13.0.2",
41-
"@leafygreen-ui/checkbox": "^18.0.0",
42-
"@leafygreen-ui/chip": "^4.0.2",
43-
"@leafygreen-ui/code": "^16.0.2",
44-
"@leafygreen-ui/combobox": "^12.0.2",
45-
"@leafygreen-ui/confirmation-modal": "^9.0.0",
46-
"@leafygreen-ui/drawer": "^4.0.1",
37+
"@leafygreen-ui/badge": "^10.0.3",
38+
"@leafygreen-ui/banner": "^10.0.3",
39+
"@leafygreen-ui/button": "^25.0.0",
40+
"@leafygreen-ui/card": "^13.0.3",
41+
"@leafygreen-ui/checkbox": "^18.0.1",
42+
"@leafygreen-ui/chip": "^4.0.3",
43+
"@leafygreen-ui/code": "^20.0.2",
44+
"@leafygreen-ui/combobox": "^12.0.3",
45+
"@leafygreen-ui/confirmation-modal": "^9.0.2",
46+
"@leafygreen-ui/drawer": "^4.0.3",
4747
"@leafygreen-ui/emotion": "^5.0.0",
48-
"@leafygreen-ui/guide-cue": "^8.0.2",
49-
"@leafygreen-ui/hooks": "^9.1.0",
48+
"@leafygreen-ui/guide-cue": "^8.0.4",
49+
"@leafygreen-ui/hooks": "^9.1.1",
5050
"@leafygreen-ui/icon": "^14.1.0",
51-
"@leafygreen-ui/icon-button": "^17.0.2",
52-
"@leafygreen-ui/info-sprinkle": "^5.0.2",
53-
"@leafygreen-ui/leafygreen-provider": "^5.0.1",
54-
"@leafygreen-ui/logo": "^11.0.1",
55-
"@leafygreen-ui/marketing-modal": "^6.0.2",
56-
"@leafygreen-ui/menu": "^31.0.0",
57-
"@leafygreen-ui/modal": "^19.0.0",
51+
"@leafygreen-ui/icon-button": "^17.0.3",
52+
"@leafygreen-ui/info-sprinkle": "^5.0.3",
53+
"@leafygreen-ui/leafygreen-provider": "^5.0.2",
54+
"@leafygreen-ui/logo": "^11.0.2",
55+
"@leafygreen-ui/marketing-modal": "^6.0.4",
56+
"@leafygreen-ui/menu": "^31.0.1",
57+
"@leafygreen-ui/modal": "^19.0.1",
5858
"@leafygreen-ui/palette": "^5.0.0",
59-
"@leafygreen-ui/pipeline": "^8.0.2",
60-
"@leafygreen-ui/polymorphic": "^3.0.2",
61-
"@leafygreen-ui/popover": "^14.0.2",
62-
"@leafygreen-ui/portal": "^7.0.1",
63-
"@leafygreen-ui/radio-box-group": "^15.0.2",
64-
"@leafygreen-ui/radio-group": "^13.0.2",
65-
"@leafygreen-ui/search-input": "^6.0.2",
66-
"@leafygreen-ui/segmented-control": "^11.0.2",
67-
"@leafygreen-ui/select": "^16.0.0",
68-
"@leafygreen-ui/skeleton-loader": "^3.0.2",
69-
"@leafygreen-ui/split-button": "^6.0.0",
70-
"@leafygreen-ui/table": "^15.0.0",
71-
"@leafygreen-ui/tabs": "^16.0.0",
72-
"@leafygreen-ui/text-area": "^12.0.0",
73-
"@leafygreen-ui/text-input": "^16.0.0",
74-
"@leafygreen-ui/toast": "^8.0.2",
75-
"@leafygreen-ui/toggle": "^12.0.2",
76-
"@leafygreen-ui/tokens": "^3.1.1",
77-
"@leafygreen-ui/tooltip": "^14.1.0",
78-
"@leafygreen-ui/typography": "^21.0.0",
59+
"@leafygreen-ui/pipeline": "^8.0.3",
60+
"@leafygreen-ui/polymorphic": "^3.0.3",
61+
"@leafygreen-ui/popover": "^14.0.3",
62+
"@leafygreen-ui/portal": "^7.0.2",
63+
"@leafygreen-ui/radio-box-group": "^15.0.3",
64+
"@leafygreen-ui/radio-group": "^13.0.3",
65+
"@leafygreen-ui/search-input": "^6.0.3",
66+
"@leafygreen-ui/segmented-control": "^11.0.3",
67+
"@leafygreen-ui/select": "^16.0.2",
68+
"@leafygreen-ui/skeleton-loader": "^3.0.3",
69+
"@leafygreen-ui/split-button": "^6.1.0",
70+
"@leafygreen-ui/table": "^15.0.1",
71+
"@leafygreen-ui/tabs": "^17.0.0",
72+
"@leafygreen-ui/text-area": "^12.0.1",
73+
"@leafygreen-ui/text-input": "^16.0.1",
74+
"@leafygreen-ui/toast": "^8.0.3",
75+
"@leafygreen-ui/toggle": "^12.0.3",
76+
"@leafygreen-ui/tokens": "^3.1.2",
77+
"@leafygreen-ui/tooltip": "^14.1.1",
78+
"@leafygreen-ui/typography": "^22.0.1",
7979
"@mongodb-js/compass-context-menu": "^0.2.1",
8080
"@react-aria/interactions": "^3.9.1",
8181
"@react-aria/utils": "^3.13.1",

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { default as Badge } from '@leafygreen-ui/badge';
77
import { default as Banner } from '@leafygreen-ui/banner';
88
import Checkbox from '@leafygreen-ui/checkbox';
99
import Card from '@leafygreen-ui/card';
10-
import Code, { Language } from '@leafygreen-ui/code';
10+
import Code, { Language, Panel as CodePanel } from '@leafygreen-ui/code';
1111
import ConfirmationModal from '@leafygreen-ui/confirmation-modal';
1212
import { default as LeafyGreenIcon } from '@leafygreen-ui/icon';
1313
import type { Size as LeafyGreenIconSize } from '@leafygreen-ui/icon';
@@ -165,6 +165,7 @@ export {
165165
Checkbox,
166166
Chip,
167167
Code,
168+
CodePanel,
168169
ConfirmationModal,
169170
ExpandedContent,
170171
HeaderCell,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,12 @@ function TabNavBar({
7373
className="test-tab-nav-bar-tabs"
7474
// https://jira.mongodb.org/browse/LG-4696 - i is a
7575
// React.Dispatch<React.SetStateAction<number>> type
76-
setSelected={(i) => {
76+
onValueChange={(i) => {
7777
if (typeof i === 'number') {
7878
return onTabClicked(i);
7979
}
8080
}}
81-
selected={activeTabIndex}
81+
value={activeTabIndex}
8282
>
8383
{tabs.map(({ name, title }, idx) => {
8484
return (

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
spacing,
99
openToast,
1010
closeToast,
11+
CodePanel,
1112
} from '@mongodb-js/compass-components';
1213
import type { ConnectionInfo } from '@mongodb-js/connection-info';
1314
import { getConnectionTitle } from '@mongodb-js/connection-info';
@@ -188,7 +189,7 @@ const openNotifyDeviceAuthModal = (
188189
<br></br>
189190
<Body>Enter the following code on that page:</Body>
190191
<Body as="div">
191-
<Code language="none" copyable>
192+
<Code language="none" panel={<CodePanel />}>
192193
{userCode}
193194
</Code>
194195
</Body>

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

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
css,
66
Label,
77
Code,
8+
CodePanel,
89
Checkbox,
910
Banner,
1011
spacing,
@@ -240,13 +241,16 @@ const ExportToLanguageModal: React.FunctionComponent<
240241
className={codeStyles}
241242
id="export-to-language-input"
242243
data-testid="export-to-language-input"
243-
languageOptions={shellLanguageOptions}
244-
onChange={() => {
245-
// There is only one language option and we don't allow to change
246-
// the value
247-
}}
248244
language="Shell"
249-
copyable={true}
245+
panel={
246+
<CodePanel
247+
languageOptions={shellLanguageOptions}
248+
onChange={() => {
249+
// There is only one language option and we don't allow to change
250+
// the value
251+
}}
252+
/>
253+
}
250254
>
251255
{prettyInput}
252256
</Code>
@@ -266,13 +270,18 @@ const ExportToLanguageModal: React.FunctionComponent<
266270
className={codeStyles}
267271
id="export-to-language-output"
268272
data-testid="export-to-language-output"
269-
languageOptions={languageOptions}
270-
onChange={(option: LanguageOption) =>
271-
setOutputLanguage(codeLanguageToOutputLanguage(option.language))
272-
}
273273
language={outputLanguageToCodeLanguage(outputLanguage)}
274-
copyable={true}
275274
onCopy={trackCopiedOutput}
275+
panel={
276+
<CodePanel
277+
languageOptions={languageOptions}
278+
onChange={(option: LanguageOption) =>
279+
setOutputLanguage(
280+
codeLanguageToOutputLanguage(option.language)
281+
)
282+
}
283+
/>
284+
}
276285
>
277286
{transpiledExpression || ''}
278287
</Code>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import React, { useMemo } from 'react';
22
import { connect } from 'react-redux';
3-
import { Body, Code, css, spacing } from '@mongodb-js/compass-components';
3+
import {
4+
Body,
5+
Code,
6+
CodePanel,
7+
css,
8+
spacing,
9+
} from '@mongodb-js/compass-components';
410

511
import type { FieldsToExportOption, FieldsToExport } from '../modules/export';
612
import type { RootExportState } from '../stores/export-store';
@@ -78,7 +84,7 @@ function ExportCodeView({
7884
data-testid="export-collection-code-preview-wrapper"
7985
id={codeElementId}
8086
language="javascript"
81-
copyable
87+
panel={<CodePanel />}
8288
>
8389
{code}
8490
</Code>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { Code, Link, css, spacing } from '@mongodb-js/compass-components';
1+
import {
2+
Code,
3+
CodePanel,
4+
Link,
5+
css,
6+
spacing,
7+
} from '@mongodb-js/compass-components';
28
import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
39
import React from 'react';
410

@@ -77,7 +83,7 @@ const MDBCodeViewer = ({
7783
<Code
7884
data-testid={dataTestId || 'mdb-code-viewer'}
7985
language="javascript"
80-
onCopy={onCopy}
86+
panel={<CodePanel onCopy={onCopy} />}
8187
>
8288
{GeneratedCode}
8389
</Code>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export const QueryItemContent: React.FunctionComponent<{
3030
className={queryCodeStyles}
3131
data-testid="query-history-query-code"
3232
language="javascript"
33-
copyable={false}
3433
>
3534
{formatQuery(value)}
3635
</Code>

packages/connection-form/src/components/advanced-options-tabs/advanced-options-tabs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,8 @@ function AdvancedOptionsTabs({
109109
return (
110110
<Tabs
111111
className={tabsStyles}
112-
setSelected={setActiveTab}
113-
selected={activeTab}
112+
onValueChange={setActiveTab}
113+
value={activeTab}
114114
aria-label="Advanced Options Tabs"
115115
>
116116
{tabs.map((tabObject: TabObject, idx: number) => {

0 commit comments

Comments
 (0)