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';