From cb31a27a06b2de11c17b05ae63e93faed46a8acc Mon Sep 17 00:00:00 2001 From: Anna Henningsen Date: Tue, 28 Jun 2022 11:08:24 +0200 Subject: [PATCH 1/2] fix(connection-form): align advanced tab and input field widths Instead of having inconsistent width specifications for the individual tabs, remove tab content width specifications and instead set a shared, pre-specified width for the `FormFieldContainer` component. --- .../advanced-options-tabs/advanced-tab/advanced-tab.tsx | 6 ------ .../advanced-options-tabs/advanced-tab/url-options.tsx | 1 - .../authentication-tab/authentication-tab.tsx | 1 - .../ssh-tunnel-tab/proxy-and-ssh-tunnel-tab.tsx | 2 -- .../tls-ssl-tab/tls-certificate-authority.tsx | 6 +----- .../tls-ssl-tab/tls-client-certificate.tsx | 7 +------ .../src/components/form-field-container.tsx | 1 + 7 files changed, 3 insertions(+), 21 deletions(-) diff --git a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/advanced-tab.tsx b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/advanced-tab.tsx index 00034334d4c..eeab3ebe77f 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/advanced-tab.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/advanced-tab.tsx @@ -53,10 +53,6 @@ const containerStyles = css({ marginTop: spacing[3], }); -const fieldStyles = css({ - width: '50%', -}); - function AdvancedTab({ updateConnectionFormField, connectionStringUrl, @@ -144,7 +140,6 @@ function AdvancedTab({ ) => { handleFieldChanged('replicaSet', value); }} @@ -161,7 +156,6 @@ function AdvancedTab({ ) => { handlePathChanged(value); }} diff --git a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx index 7ddc078e854..c31eb7178a2 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx @@ -14,7 +14,6 @@ import UrlOptionsTable from './url-options-table'; const urlOptionsContainerStyles = css({ marginTop: spacing[3], - width: spacing[6] * 7, }); const urlOptionsTableDescriptionStyles = css({ diff --git a/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-tab.tsx b/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-tab.tsx index c348f4164d7..84eecf4ebcf 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-tab.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-tab.tsx @@ -79,7 +79,6 @@ const containerStyles = css({ const contentStyles = css({ marginTop: spacing[3], - width: spacing[7] * 5, }); function getSelectedAuthTabForConnectionString( diff --git a/packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/proxy-and-ssh-tunnel-tab.tsx b/packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/proxy-and-ssh-tunnel-tab.tsx index 1b0f5c11810..ec4cf163a5e 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/proxy-and-ssh-tunnel-tab.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/proxy-and-ssh-tunnel-tab.tsx @@ -69,8 +69,6 @@ const containerStyles = css({ const contentStyles = css({ marginTop: spacing[3], - width: '50%', - minWidth: 400, }); const getSelectedTunnelType = ( diff --git a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx index 3582945b60e..06f91e64120 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx @@ -14,10 +14,6 @@ import { import FormFieldContainer from '../../form-field-container'; -const caFieldsContainer = css({ - width: '80%', -}); - function TLSCertificateAuthority({ tlsCAFile, useSystemCA, @@ -37,7 +33,7 @@ function TLSCertificateAuthority({ ) => void; }): React.ReactElement { return ( - + - + ) => { diff --git a/packages/connection-form/src/components/form-field-container.tsx b/packages/connection-form/src/components/form-field-container.tsx index e333f0563bc..f1d036e16d0 100644 --- a/packages/connection-form/src/components/form-field-container.tsx +++ b/packages/connection-form/src/components/form-field-container.tsx @@ -3,6 +3,7 @@ import React from 'react'; const formFieldContainerStyles = css({ marginTop: spacing[3], + width: spacing[7] * 6, }); function FormFieldContainer({ From c05cd84928d47841465bc3b3d6d2f7398240c0ab Mon Sep 17 00:00:00 2001 From: Anna Henningsen Date: Tue, 28 Jun 2022 12:43:17 +0200 Subject: [PATCH 2/2] fixup: import lint --- .../tls-ssl-tab/tls-certificate-authority.tsx | 1 - .../tls-ssl-tab/tls-client-certificate.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx index 06f91e64120..d7f0d9c0036 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx @@ -4,7 +4,6 @@ import { Description, Label, FileInput, - css, cx, } from '@mongodb-js/compass-components'; import { diff --git a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx index f0b02459264..68899f711be 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { FileInput, TextInput, css } from '@mongodb-js/compass-components'; +import { FileInput, TextInput } from '@mongodb-js/compass-components'; import FormFieldContainer from '../../form-field-container';