feat(connections): add general tab contents to connect form COMPASS-5231

packages/compass-components/package.json

@@ -48,6 +48,7 @@
     "@leafygreen-ui/modal": "^7.0.0",
     "@leafygreen-ui/palette": "^3.2.2",
     "@leafygreen-ui/portal": "^3.1.3",
+    "@leafygreen-ui/radio-box-group": "^6.1.4",
     "@leafygreen-ui/select": "^3.0.4",
     "@leafygreen-ui/tabs": "^5.1.3",
     "@leafygreen-ui/text-area": "^4.0.3",

packages/compass-components/src/compass-ui-colors.tsx

@@ -1,2 +1,3 @@
 export const gray8 = '#f5f6f7';
 export const transparentGray = 'rgba(180, 180, 180, 0.5)';
+export const transparentWhite = 'rgba(255, 255, 255, 0.5)';

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

@@ -27,9 +27,9 @@ const containerStyles = css({
   marginTop: spacing[3],
   display: 'flex',
   alignItems: 'center',
-  '&:hover': {
-    cursor: 'pointer',
-  },
+});
+const buttonIconStyles = css({
+  marginRight: spacing[1],
 });
 interface AccordionProps {
   dataTestId?: string;
@@ -54,7 +54,10 @@ function Accordion(
               setOpen((currentOpen) => !currentOpen);
             }}
           >
-            <Icon glyph={open ? 'ChevronDown' : 'ChevronRight'} />
+            <Icon
+              className={buttonIconStyles}
+              glyph={open ? 'ChevronDown' : 'ChevronRight'}
+            />
             {props.text}
           </button>
         </p>

packages/compass-components/src/index.ts

@@ -32,6 +32,7 @@ export { default as Modal } from '@leafygreen-ui/modal';
 export { uiColors } from '@leafygreen-ui/palette';
 export * as compassUIColors from './compass-ui-colors';
 export { default as Portal } from '@leafygreen-ui/portal';
+export { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';
 export { Select, Option, Size as SelectSize } from '@leafygreen-ui/select';
 export { Tabs, Tab } from '@leafygreen-ui/tabs';
 export { default as TextArea } from '@leafygreen-ui/text-area';

packages/connect-form/package.json

@@ -65,6 +65,7 @@
     "@mongodb-js/prettier-config-compass": "^0.3.0",
     "@mongodb-js/tsconfig-compass": "^0.3.0",
     "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.5.0",
     "@types/chai": "^4.2.21",
     "@types/chai-dom": "^0.0.10",
     "@types/mocha": "^9.0.0",

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

@@ -0,0 +1,63 @@
+import { css } from '@emotion/css';
+import React from 'react';
+import {
+  Accordion,
+  compassUIColors,
+  spacing,
+} from '@mongodb-js/compass-components';
+import ConnectionStringUrl from 'mongodb-connection-string-url';
+
+import AdvancedOptionsTabs from './advanced-options-tabs/advanced-options-tabs';
+import { UpdateConnectionFormField } from '../hooks/use-connect-form';
+import { ConnectionFormError } from '../utils/connect-form-errors';
+
+const disabledOverlayStyles = css({
+  position: 'absolute',
+  top: 0,
+  // Space around it to ensure added focus borders are covered.
+  bottom: -spacing[1],
+  left: -spacing[1],
+  right: -spacing[1],
+  backgroundColor: compassUIColors.transparentWhite,
+  zIndex: 1,
+  cursor: 'not-allowed',
+});
+
+const connectionTabsContainer = css({
+  position: 'relative',
+});
+
+function AdvancedConnectionOptions({
+  disabled,
+  errors,
+  connectionStringUrl,
+  hideError,
+  updateConnectionFormField,
+}: {
+  errors: ConnectionFormError[];
+  disabled: boolean;
+  connectionStringUrl: ConnectionStringUrl;
+  hideError: (errorIndex: number) => void;
+  updateConnectionFormField: UpdateConnectionFormField;
+}): React.ReactElement {
+  return (
+    <Accordion text="Advanced Connection Options">
+      <div className={connectionTabsContainer}>
+        {disabled && (
+          <div
+            className={disabledOverlayStyles}
+            title="The connection form is disabled when the connection string cannot be parsed."
+          />
+        )}
+        <AdvancedOptionsTabs
+          errors={errors}
+          hideError={hideError}
+          connectionStringUrl={connectionStringUrl}
+          updateConnectionFormField={updateConnectionFormField}
+        />
+      </div>
+    </Accordion>
+  );
+}
+
+export default AdvancedConnectionOptions;