Merge remote-tracking branch 'origin/dev' into eric/updateErrorViewCo…

…lors

package.json

@@ -51,7 +51,6 @@
     "react-notifications-component": "^4.0.1",
     "react-oidc-context": "^2.1.0",
     "react-paginating": "^1.4.0",
-    "react-select": "^5.7.4",
     "react-simplemde-editor": "^5.0.2",
     "react-textarea-autosize": "^8.5.2",
     "react-transition-group": "^4.4.5",

packages/components/src/index.ts

@@ -18,3 +18,4 @@ export * from './Spinner';
 export * from './Switch';
 export * from './theme';
 export * from './TooltipTrigger';
+export * from './useModalHandler';

src/components/useModalHandler.test.ts → packages/components/src/useModalHandler.test.tsx

@@ -1,11 +1,11 @@
-import { Modal } from '@terra-ui-packages/components';
 import { fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ReactNode } from 'react';
-import { div, h, span } from 'react-hyperscript-helpers';
-import { ButtonPrimary } from 'src/components/common';
-import { useModalHandler } from 'src/components/useModalHandler';
-import { renderWithAppContexts as render } from 'src/testing/test-utils';
+
+import { ButtonPrimary } from './buttons';
+import { renderWithTheme as render } from './internal/test-utils';
+import { Modal } from './Modal';
+import { useModalHandler } from './useModalHandler';
 
 describe('useModalHandler helper hook', () => {
   interface TestComponentProps {
@@ -17,52 +17,37 @@ describe('useModalHandler helper hook', () => {
     /* in most cases, usage will leverage a custom variant of Modal that
        streamlines the hook usage a bit, but we are using raw Modal since
        it is sufficient for testing */
-    const myModal = useModalHandler((args: string, close: () => void) =>
-      h(
-        Modal,
-        {
-          title: `Modal for ${args}.`,
-          onDismiss: () => {
+    const myModal = useModalHandler((args: string, close: () => void) => {
+      return (
+        <Modal
+          title={`Modal for ${args}.`}
+          onDismiss={() => {
             close();
             onCloseThing(args);
-          },
-          okButton: () => {
+          }}
+          okButton={() => {
             close();
             onSuccess(args);
-          },
-        },
-        [span([`content for ${args}`])]
-      )
+          }}
+        >
+          <span>content for {args} </span>
+        </Modal>
+      );
+    });
+    return (
+      <div>
+        <ButtonPrimary onClick={() => myModal.open('ThingOne')}>Open One</ButtonPrimary>
+        <ButtonPrimary onClick={() => myModal.open('ThingTwo')}>Open Two</ButtonPrimary>
+        {myModal.maybeRender()}
+      </div>
     );
-    return div([
-      h(
-        ButtonPrimary,
-        {
-          onClick: () => myModal.open('ThingOne'),
-        },
-        ['Open One']
-      ),
-      h(
-        ButtonPrimary,
-        {
-          onClick: () => myModal.open('ThingTwo'),
-        },
-        ['Open Two']
-      ),
-      myModal.maybeRender(),
-    ]);
   };
 
   it('renders no modal initially', () => {
     // Arrange
 
     // Act
-    render(
-      h(TestComponent, {
-        onCloseThing: () => {},
-        onSuccess: () => {},
-      })
-    );
+    render(<TestComponent onCloseThing={() => {}} onSuccess={() => {}} />);
 
     // Assert
     expect(screen.queryAllByText('Modal for ThingOne.').length).toBe(0);
@@ -71,12 +56,7 @@ describe('useModalHandler helper hook', () => {
 
   it('opens modal with correct args flow', () => {
     // Arrange
-    render(
-      h(TestComponent, {
-        onCloseThing: () => {},
-        onSuccess: () => {},
-      })
-    );
+    render(<TestComponent onCloseThing={() => {}} onSuccess={() => {}} />);
 
     // Act
     const button = screen.getByText('Open One');
@@ -89,12 +69,7 @@ describe('useModalHandler helper hook', () => {
 
   it('opens modal with correct args flow - 2nd item', () => {
     // Arrange
-    render(
-      h(TestComponent, {
-        onCloseThing: () => {},
-        onSuccess: () => {},
-      })
-    );
+    render(<TestComponent onCloseThing={() => {}} onSuccess={() => {}} />);
 
     // Act
     const button = screen.getByText('Open Two');
@@ -110,12 +85,7 @@ describe('useModalHandler helper hook', () => {
     const user = userEvent.setup();
     const onSuccessWatcher = jest.fn();
 
-    render(
-      h(TestComponent, {
-        onCloseThing: () => {},
-        onSuccess: onSuccessWatcher,
-      })
-    );
+    render(<TestComponent onCloseThing={() => {}} onSuccess={onSuccessWatcher} />);
 
     const button = screen.getByText('Open One');
     fireEvent.click(button);
@@ -136,12 +106,7 @@ describe('useModalHandler helper hook', () => {
     const user = userEvent.setup();
     const onCloseWatcher = jest.fn();
 
-    render(
-      h(TestComponent, {
-        onCloseThing: onCloseWatcher,
-        onSuccess: () => {},
-      })
-    );
+    render(<TestComponent onCloseThing={onCloseWatcher} onSuccess={() => {}} />);
 
     const button = screen.getByText('Open One');
     fireEvent.click(button);

src/analysis/Environments/Environments.ts

@@ -1,4 +1,4 @@
-import { PopupTrigger, TooltipTrigger, useThemeFromContext } from '@terra-ui-packages/components';
+import { PopupTrigger, TooltipTrigger, useModalHandler, useThemeFromContext } from '@terra-ui-packages/components';
 import { formatDatetime, Mutate, NavLinkProvider } from '@terra-ui-packages/core-utils';
 import _ from 'lodash/fp';
 import { Fragment, ReactNode, useEffect, useState } from 'react';
@@ -21,7 +21,6 @@ import { icon } from 'src/components/icons';
 import { makeMenuIcon } from 'src/components/PopupTrigger';
 import SupportRequestWrapper from 'src/components/SupportRequest';
 import { SimpleFlexTable, Sortable } from 'src/components/table';
-import { useModalHandler } from 'src/components/useModalHandler';
 import { App, isApp } from 'src/libs/ajax/leonardo/models/app-models';
 import { PersistentDisk } from 'src/libs/ajax/leonardo/models/disk-models';
 import { AzureConfig, GceWithPdConfig, getRegionFromZone } from 'src/libs/ajax/leonardo/models/runtime-config-models';

src/analysis/modals/ComputeModal/AzureComputeModal/AzurePersistentDiskSection.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { div } from 'react-hyperscript-helpers';
-import { SingleValue } from 'react-select';
 import { AboutPersistentDiskSection } from 'src/analysis/modals/ComputeModal/AboutPersistentDiskSection';
 import { AzurePersistentDiskSizeSelectInput } from 'src/analysis/modals/ComputeModal/AzureComputeModal/AzurePersistentDiskSizeSelectInput';
 import { PersistentDiskTypeInputContainer } from 'src/analysis/modals/ComputeModal/PersistentDiskTypeInputContainer';
@@ -12,7 +11,7 @@ export interface AzurePersistentDiskSectionProps {
   persistentDiskSize: number;
   persistentDiskType: AzurePdType;
   onChangePersistentDiskType: (type: SharedPdType) => void;
-  onChangePersistentDiskSize: (size: SingleValue<number | undefined>) => void;
+  onChangePersistentDiskSize: (size: number | null | undefined) => void;
   onClickAbout: () => void;
 }
 

src/analysis/modals/ComputeModal/AzureComputeModal/AzurePersistentDiskSizeSelectInput.ts

@@ -1,7 +1,6 @@
 import { useUniqueId } from '@terra-ui-packages/components';
 import React from 'react';
 import { div, h, label } from 'react-hyperscript-helpers';
-import { SingleValue } from 'react-select';
 import { IComputeConfig } from 'src/analysis/modal-utils';
 import { computeStyles } from 'src/analysis/modals/modalStyles';
 import { Select } from 'src/components/common';
@@ -10,7 +9,7 @@ import { defaultAzureDiskSize } from 'src/libs/azure-utils';
 
 export interface AzurePersistentDiskSizeSelectInputProps {
   persistentDiskSize: number;
-  onChangePersistentDiskSize: (e: SingleValue<number | undefined>) => void;
+  onChangePersistentDiskSize: (e: number | null | undefined) => void;
   persistentDiskExists: boolean;
 }
 

src/analysis/modals/ComputeModal/GcpComputeModal/GcpComputeImageSelect.ts

@@ -1,7 +1,6 @@
 import _ from 'lodash/fp';
 import React from 'react';
 import { h } from 'react-hyperscript-helpers';
-import { SingleValue } from 'react-select';
 import { ComputeImage } from 'src/analysis/useComputeImages';
 import { GroupedSelect } from 'src/components/common';
 
@@ -66,7 +65,7 @@ export const GcpComputeImageSelect: React.FC<GcpComputeImageSelectProps> = (prop
   return h(GroupedSelect, {
     ...restProps,
     value: selectedComputeImageUrl,
-    onChange: ({ value }: SingleValue<any>) => {
+    onChange: ({ value }: any) => {
       setSelectedComputeImageUrl(value);
     },
     isSearchable: true,

src/analysis/modals/ComputeModal/PersistentDiskTypeInput.ts

@@ -1,15 +1,14 @@
 import { useUniqueId } from '@terra-ui-packages/components';
 import React from 'react';
 import { div, h, label } from 'react-hyperscript-helpers';
-import { SingleValue } from 'react-select';
 import { IComputeConfig } from 'src/analysis/modal-utils';
 import { computeStyles } from 'src/analysis/modals/modalStyles';
 import { Select } from 'src/components/common';
 import { PdSelectOption, SharedPdType } from 'src/libs/ajax/leonardo/models/disk-models';
 
 export interface PersistentDiskTypeInputProps {
   value: SharedPdType;
-  onChange: (e: SingleValue<{ value: SharedPdType; label: string | undefined }>) => void;
+  onChange: (e: { value: SharedPdType; label: string | undefined } | null) => void;
   isDisabled?: boolean;
   options: PdSelectOption[];
 }