chore(data-modeling): add most of the redux store logic and a basic UI for it (#6879)

* tmp: implement store and most of the business logic

* wip(data-modeling): add delete / rename logic and UI triggers

* fix(data-modeling): fix apply edits action

Author: gribnoysup

package-lock.json

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 // This file exports `@leafygreen-ui` components and wraps some of them.
 
@@ -67,7 +67,7 @@ export type {
 } from '@leafygreen-ui/table';
 import { Tabs, Tab } from '@leafygreen-ui/tabs';
 import TextArea from '@leafygreen-ui/text-area';
-import TextInput from '@leafygreen-ui/text-input';
+import LeafyGreenTextInput from '@leafygreen-ui/text-input';
 import { SearchInput } from '@leafygreen-ui/search-input';
 export type { ToastProps } from '@leafygreen-ui/toast';
 export { ToastProvider, useToast } from '@leafygreen-ui/toast';
@@ -112,6 +112,29 @@ delete (Checkbox as React.ComponentType<any>).propTypes;
 // all hrefs.
 export { Link, Button, IconButton } from './links/link';
 
+// Working around leafygreen lack of support for `defaultValue` property
+const TextInput: typeof LeafyGreenTextInput = React.forwardRef(
+  function TextInput({ defaultValue, value, onChange, ...props }, ref) {
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      String(defaultValue) ?? ''
+    );
+    const isControlled = typeof defaultValue === 'undefined';
+    return (
+      <LeafyGreenTextInput
+        {...props}
+        value={isControlled ? value : uncontrolledValue}
+        onChange={(e) => {
+          setUncontrolledValue(e.currentTarget.value);
+          onChange?.(e);
+        }}
+        ref={ref}
+      ></LeafyGreenTextInput>
+    );
+  }
+);
+
+TextInput.displayName = 'TextInput';
+
 // 3. Export the leafygreen components.
 export {
   AtlasNavGraphic,

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

@@ -1,3 +1,4 @@
+import React, { useCallback } from 'react';
 import {
   Cell,
   Checkbox,
@@ -7,8 +8,7 @@ import {
   Table,
   TableBody,
   TableHead,
-} from '@mongodb-js/compass-components';
-import React, { useCallback } from 'react';
+} from './leafygreen';
 
 type SelectItem = {
   id: string;

packages/compass-connection-import-export/src/components/select-table.spec.tsx renamed to packages/compass-components/src/components/select-table.spec.tsx

@@ -99,7 +99,7 @@ const darkThemeStyles = css({
 });
 
 type WorkspaceContainerProps = {
-  toolbar?: React.ReactNode;
+  toolbar?: React.ReactNode | (() => void);
   toolbarRef?: React.Ref<HTMLDivElement>;
   scrollableContainerRef?: React.Ref<HTMLDivElement>;
   initialTopInView?: boolean;
@@ -148,7 +148,7 @@ function WorkspaceContainer({
     >
       {toolbar && (
         <div ref={toolbarRef} className={toolbarStyles}>
-          {toolbar}
+          {typeof toolbar === 'function' ? toolbar() : toolbar}
         </div>
       )}
       <div className={scrollBoxStyles} ref={scrollContainer}>

packages/compass-connection-import-export/src/components/select-table.tsx renamed to packages/compass-components/src/components/select-table.tsx

@@ -9,6 +9,8 @@ import { Variant as ConfirmationModalVariant } from '@leafygreen-ui/confirmation
 import ConfirmationModal from '../components/modals/confirmation-modal';
 import { css } from '@leafygreen-ui/emotion';
 import type { ButtonProps } from '@leafygreen-ui/button';
+import FormFieldContainer from '../components/form-field-container';
+import { TextInput } from '../components/leafygreen';
 
 export { ConfirmationModalVariant };
 
@@ -207,3 +209,32 @@ export const ConfirmationModalArea: React.FunctionComponent = ({
     </ConfirmationModalAreaMountedContext.Provider>
   );
 };
+
+export async function showPrompt(
+  props: Omit<ConfirmationProperties, 'requiredInputText'> & {
+    label: string;
+    defaultValue?: string;
+  }
+): Promise<string | null> {
+  let userInput = props.defaultValue ?? '';
+  const submitted = await showConfirmation({
+    ...props,
+    description: (
+      <>
+        {props.description && <div>{props.description}</div>}
+        <div>
+          <FormFieldContainer>
+            <TextInput
+              label={props.label}
+              defaultValue={userInput}
+              onChange={(e) => {
+                userInput = e.currentTarget.value;
+              }}
+            ></TextInput>
+          </FormFieldContainer>
+        </div>
+      </>
+    ),
+  });
+  return submitted ? userInput : null;
+}

packages/compass-components/src/components/workspace-container.tsx

@@ -180,6 +180,7 @@ export {
   ConfirmationModalVariant,
   ConfirmationModalArea,
   showConfirmation,
+  showPrompt,
 } from './hooks/use-confirmation';
 export { showErrorDetails } from './hooks/use-error-details';
 export {
@@ -209,3 +210,4 @@ export {
   type VirtualListProps,
   type ItemRenderer as VirtualListItemRenderer,
 } from './components/virtual-list';
+export { SelectTable } from './components/select-table';

packages/compass-components/src/hooks/use-confirmation.tsx

@@ -72,7 +72,6 @@
     "chai": "^4.3.6",
     "depcheck": "^1.4.1",
     "gen-esm-wrapper": "^1.1.0",
-    "lodash": "^4.17.21",
     "mocha": "^10.2.0",
     "nyc": "^15.1.0",
     "sinon": "^9.2.3",

packages/compass-components/src/index.ts

@@ -6,10 +6,10 @@ import {
   FormFieldContainer,
   FormModal,
   openToast,
+  SelectTable,
 } from '@mongodb-js/compass-components';
 import { FileInput } from './file-input';
 import { Passphrase } from './passphrase';
-import { SelectTable } from './select-table';
 import type { ImportExportResult } from '../hooks/common';
 import { useOpenModalThroughIpc } from '../hooks/common';
 import { useExportConnections } from '../hooks/use-export-connections';

packages/compass-connection-import-export/package.json

@@ -7,10 +7,10 @@ import {
   FormModal,
   spacing,
   openToast,
+  SelectTable,
 } from '@mongodb-js/compass-components';
 import { FileInput } from './file-input';
 import { Passphrase } from './passphrase';
-import { SelectTable } from './select-table';
 import type { ImportExportResult } from '../hooks/common';
 import { useOpenModalThroughIpc } from '../hooks/common';
 import { useImportConnections } from '../hooks/use-import-connections';

packages/compass-connection-import-export/src/components/export-modal.tsx

@@ -1479,60 +1479,67 @@ const connectWithOptions = (
       return inflightConnection;
     }
     inflightConnection = (async () => {
-      const isAutoconnectAttempt = isAutoconnectInfo(
-        getState(),
-        connectionInfo.id
-      );
-
       const deviceAuthAbortController = new AbortController();
 
-      connectionInfo = cloneDeep(connectionInfo);
+      try {
+        if (
+          getCurrentConnectionStatus(getState(), connectionInfo.id) ===
+          'connected'
+        ) {
+          return;
+        }
 
-      const {
-        forceConnectionOptions,
-        browserCommandForOIDCAuth,
-        maximumNumberOfActiveConnections,
-        telemetryAnonymousId,
-      } = preferences.getPreferences();
+        const isAutoconnectAttempt = isAutoconnectInfo(
+          getState(),
+          connectionInfo.id
+        );
 
-      const connectionProgress = getNotificationTriggers();
+        connectionInfo = cloneDeep(connectionInfo);
 
-      if (
-        typeof maximumNumberOfActiveConnections !== 'undefined' &&
-        getActiveConnectionsCount(getState().connections) >=
-          maximumNumberOfActiveConnections
-      ) {
-        connectionProgress.openMaximumConnectionsReachedToast(
-          maximumNumberOfActiveConnections
-        );
-        return;
-      }
+        const {
+          forceConnectionOptions,
+          browserCommandForOIDCAuth,
+          maximumNumberOfActiveConnections,
+          telemetryAnonymousId,
+        } = preferences.getPreferences();
 
-      dispatch({
-        type: ActionTypes.ConnectionAttemptStart,
-        connectionInfo,
-        options: { forceSave: options.forceSave },
-      });
+        const connectionProgress = getNotificationTriggers();
 
-      track(
-        'Connection Attempt',
-        {
-          is_favorite: connectionInfo.savedConnectionType === 'favorite',
-          is_new: isNewConnection(getState(), connectionInfo.id),
-        },
-        connectionInfo
-      );
+        if (
+          typeof maximumNumberOfActiveConnections !== 'undefined' &&
+          getActiveConnectionsCount(getState().connections) >=
+            maximumNumberOfActiveConnections
+        ) {
+          connectionProgress.openMaximumConnectionsReachedToast(
+            maximumNumberOfActiveConnections
+          );
+          return;
+        }
 
-      debug('connecting with connectionInfo', connectionInfo);
+        dispatch({
+          type: ActionTypes.ConnectionAttemptStart,
+          connectionInfo,
+          options: { forceSave: options.forceSave },
+        });
 
-      log.info(
-        mongoLogId(1_001_000_004),
-        'Connection UI',
-        'Initiating connection attempt',
-        { isAutoconnectAttempt }
-      );
+        track(
+          'Connection Attempt',
+          {
+            is_favorite: connectionInfo.savedConnectionType === 'favorite',
+            is_new: isNewConnection(getState(), connectionInfo.id),
+          },
+          connectionInfo
+        );
+
+        debug('connecting with connectionInfo', connectionInfo);
+
+        log.info(
+          mongoLogId(1_001_000_004),
+          'Connection UI',
+          'Initiating connection attempt',
+          { isAutoconnectAttempt }
+        );
 
-      try {
         // Connection form allows to start connecting with invalid connection
         // strings, so throw fast if it's not valid before doing anything else
         ensureWellFormedConnectionString(

packages/compass-connection-import-export/src/components/import-modal.tsx

@@ -271,14 +271,15 @@ export function useConnectionIds(
 export function useConnectionsList(
   filter?: (connection: ConnectionState) => boolean
 ) {
-  return useSelector<ConnectionState[]>(
+  return useSelector<(ConnectionState & { title: string })[]>(
     (state) => {
       return state.connections.ids
         .filter((id) => {
           return filter?.(state.connections.byId[id]) ?? true;
         })
         .map((id) => {
-          return state.connections.byId[id];
+          const connection = state.connections.byId[id];
+          return { ...connection, title: getConnectionTitle(connection.info) };
         });
     },
     (a, b) => {