feat(connections): adds form validation errors utility COMPASS-5268 (#2639)

Adds form validation errors utility functions

Co-authored-by: mcasimir <[email protected]>

Author: leorossi

.gitignore

@@ -18,6 +18,8 @@ expansions.yml
 lerna-debug.log
 packages/**/*.tgz
 packages/**/package-lock.json
+scripts/package-lock.json
+configs/**/package-lock.json
 tmp
 storage
 .nyc_output

package-lock.json

@@ -21,14 +21,6 @@ const formItemVerticalStyles = css`
   margin: 5px auto 20px;
 `;
 
-const formItemErrorStyles = css`
-  border: 1px solid ${redBaseColor};
-  border-radius: 5px;
-  &:focus {
-    border: 1px solid ${redBaseColor};
-  }
-`;
-
 const buttonStyles = css`
   width: 100%;
 `;
@@ -170,8 +162,7 @@ function FileInput({
       <div
         className={cx(
           { [formItemHorizontalStyles]: variant === Variant.Horizontal },
-          { [formItemVerticalStyles]: variant === Variant.Vertical },
-          { [formItemErrorStyles]: error }
+          { [formItemVerticalStyles]: variant === Variant.Vertical }
         )}
       >
         <label

packages/compass-components/src/components/file-input.tsx

@@ -10,7 +10,7 @@ import { ConnectionOptions } from 'mongodb-data-service';
 
 import AdvancedOptionsTabs from './advanced-options-tabs/advanced-options-tabs';
 import { UpdateConnectionFormField } from '../hooks/use-connect-form';
-import { ConnectionFormError } from '../utils/connect-form-errors';
+import { ConnectionFormError } from '../utils/validation';
 
 const disabledOverlayStyles = css({
   position: 'absolute',
@@ -32,14 +32,12 @@ function AdvancedConnectionOptions({
   disabled,
   errors,
   connectionStringUrl,
-  hideError,
   updateConnectionFormField,
   connectionOptions,
 }: {
   errors: ConnectionFormError[];
   disabled: boolean;
   connectionStringUrl: ConnectionStringUrl;
-  hideError: (errorIndex: number) => void;
   updateConnectionFormField: UpdateConnectionFormField;
   connectionOptions: ConnectionOptions;
 }): React.ReactElement {
@@ -54,7 +52,6 @@ function AdvancedConnectionOptions({
         )}
         <AdvancedOptionsTabs
           errors={errors}
-          hideError={hideError}
           connectionStringUrl={connectionStringUrl}
           updateConnectionFormField={updateConnectionFormField}
           connectionOptions={connectionOptions}

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

@@ -8,7 +8,7 @@ import SSHTunnelTab from './ssh-tunnel-tab/ssh-tunnel-tab';
 import TLSTab from './tls-ssl-tab/tls-ssl-tab';
 import AdvancedTab from './advanced-tab/advanced-tab';
 import { UpdateConnectionFormField } from '../../hooks/use-connect-form';
-import { ConnectionFormError } from '../../utils/connect-form-errors';
+import { ConnectionFormError } from '../../utils/validation';
 import { ConnectionOptions } from 'mongodb-data-service';
 
 const tabsStyles = css({
@@ -19,7 +19,6 @@ interface TabObject {
   component: React.FunctionComponent<{
     errors: ConnectionFormError[];
     connectionStringUrl: ConnectionStringUrl;
-    hideError: (errorIndex: number) => void;
     updateConnectionFormField: UpdateConnectionFormField;
     connectionOptions?: ConnectionOptions;
   }>;
@@ -28,13 +27,11 @@ interface TabObject {
 function AdvancedOptionsTabs({
   errors,
   connectionStringUrl,
-  hideError,
   updateConnectionFormField,
   connectionOptions,
 }: {
   errors: ConnectionFormError[];
   connectionStringUrl: ConnectionStringUrl;
-  hideError: (errorIndex: number) => void;
   updateConnectionFormField: UpdateConnectionFormField;
   connectionOptions: ConnectionOptions;
 }): React.ReactElement {
@@ -62,7 +59,6 @@ function AdvancedOptionsTabs({
           <Tab key={idx} name={tabObject.name} aria-label={tabObject.name}>
             <TabComponent
               errors={errors}
-              hideError={hideError}
               connectionStringUrl={connectionStringUrl}
               updateConnectionFormField={updateConnectionFormField}
               connectionOptions={connectionOptions}

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

@@ -21,7 +21,6 @@ describe('AdvancedTab', function () {
         <AdvancedTab
           errors={[]}
           // eslint-disable-next-line @typescript-eslint/no-empty-function
-          hideError={() => {}}
           updateConnectionFormField={updateConnectionFormFieldSpy}
           connectionStringUrl={connectionStringUrl}
         />
@@ -83,7 +82,6 @@ describe('AdvancedTab', function () {
         <AdvancedTab
           errors={[]}
           // eslint-disable-next-line @typescript-eslint/no-empty-function
-          hideError={() => {}}
           updateConnectionFormField={updateConnectionFormFieldSpy}
           connectionStringUrl={connectionStringUrl}
         />
@@ -114,7 +112,6 @@ describe('AdvancedTab', function () {
         <AdvancedTab
           errors={[]}
           // eslint-disable-next-line @typescript-eslint/no-empty-function
-          hideError={() => {}}
           updateConnectionFormField={updateConnectionFormFieldSpy}
           connectionStringUrl={connectionStringUrl}
         />

packages/connect-form/src/components/advanced-options-tabs/advanced-tab/advanced-tab.spec.tsx

@@ -15,10 +15,10 @@ import { MongoClientOptions } from 'mongodb';
 
 import FormFieldContainer from '../../form-field-container';
 import { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
-import { ConnectionFormError } from '../../../utils/connect-form-errors';
 import { readPreferences } from '../../../utils/read-preferences';
 
 import UrlOptions from './url-options';
+import { ConnectionFormError } from '../../../utils/validation';
 
 const infoButtonStyles = css({
   verticalAlign: 'middle',
@@ -39,7 +39,6 @@ function AdvancedTab({
 }: {
   errors: ConnectionFormError[];
   connectionStringUrl: ConnectionStringUrl;
-  hideError: (errorIndex: number) => void;
   updateConnectionFormField: UpdateConnectionFormField;
   connectionOptions?: ConnectionOptions;
 }): React.ReactElement {

packages/connect-form/src/components/advanced-options-tabs/advanced-tab/advanced-tab.tsx

@@ -247,11 +247,7 @@ function UrlOptionsTable({
         </Button>
       </div>
       {errorMessage && (
-        <Banner
-          variant={'warning'}
-          dismissible={true}
-          onClose={() => setErrorMessage('')}
-        >
+        <Banner variant={'warning'} onClose={() => setErrorMessage('')}>
           {errorMessage}
         </Banner>
       )}

packages/connect-form/src/components/advanced-options-tabs/advanced-tab/url-options-table.tsx

@@ -10,7 +10,7 @@ import ConnectionStringUrl from 'mongodb-connection-string-url';
 import { AuthMechanism } from 'mongodb';
 
 import { UpdateConnectionFormField } from '../../../hooks/use-connect-form';
-import { ConnectionFormError } from '../../../utils/connect-form-errors';
+import { ConnectionFormError } from '../../../utils/validation';
 import { ConnectionOptions } from 'mongodb-data-service';
 
 import AuthenticationDefault from './authentication-default';
@@ -75,7 +75,6 @@ function AuthenticationTab({
 }: {
   errors: ConnectionFormError[];
   connectionStringUrl: ConnectionStringUrl;
-  hideError: (errorIndex: number) => void;
   updateConnectionFormField: UpdateConnectionFormField;
   connectionOptions?: ConnectionOptions;
 }): React.ReactElement {

packages/connect-form/src/components/advanced-options-tabs/authentication-tab/authentication-tab.tsx

@@ -18,7 +18,6 @@ describe('GeneralTab', function () {
       render(
         <GeneralTab
           errors={[]}
-          hideError={noop}
           connectionStringUrl={connectionStringUrl}
           updateConnectionFormField={noop}
         />
@@ -46,7 +45,6 @@ describe('GeneralTab', function () {
       render(
         <GeneralTab
           errors={[]}
-          hideError={noop}
           connectionStringUrl={connectionStringUrl}
           updateConnectionFormField={noop}
         />
@@ -66,7 +64,6 @@ describe('GeneralTab', function () {
       render(
         <GeneralTab
           errors={[]}
-          hideError={noop}
           connectionStringUrl={connectionStringUrl}
           updateConnectionFormField={noop}
         />
@@ -86,7 +83,6 @@ describe('GeneralTab', function () {
       render(
         <GeneralTab
           errors={[]}
-          hideError={noop}
           connectionStringUrl={connectionStringUrl}
           updateConnectionFormField={noop}
         />