Merge branch 'es/dc-875-debounce-year-of-birth-slider' of https://git…

…hub.com/DataBiosphere/terra-ui into es/dc-875-debounce-year-of-birth-slider

.circleci/config.yml

@@ -30,7 +30,9 @@ anchors:
   filter-pr-branch: &filter-pr-branch
     filters:
       branches:
-        ignore: dev
+        ignore:
+          - dev
+          - /gh-readonly-queue\/.*/
 
   filter-dev-branch: &filter-dev-branch
     filters:

.github/CODEOWNERS

@@ -22,12 +22,12 @@
 /src/pages/LandingPage* @DataBiosphere/terra-cobranding
 /src/pages/billing/ @DataBiosphere/broadworkspaces-terra-ui
 /src/pages/workspaces/* @DataBiosphere/broadworkspaces-terra-ui
+/src/profile/notification-settings/* @DataBiosphere/broadworkspaces-terra-ui
 /src/workflows-app/ @DataBiosphere/broad-workflow-management @DataBiosphere/broad-workflow-execution
 /src/workspace-data/ @DataBiosphere/analysisjourneys
 /src/workspaces/ @DataBiosphere/broadworkspaces-terra-ui
 /integration-tests/tests/billing-projects.js @DataBiosphere/broadworkspaces-terra-ui
 /integration-tests/tests/delete-orphaned-workspaces.js @DataBiosphere/broadworkspaces-terra-ui
-/integration-tests/tests/workspace-dashboard.js @DataBiosphere/broadworkspaces-terra-ui
 /integration-tests/tests/run-analysis.js @DataBiosphere/broad-interactive-analysis
 /integration-tests/tests/run-analysis-azure.js @DataBiosphere/broad-interactive-analysis
 /integration-tests/tests/run-rstudio.js @DataBiosphere/broad-interactive-analysis

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/Analyses.ts

@@ -836,6 +836,20 @@ export const BaseAnalyses = (
                     onDismiss: () => setDeletingAnalysisName(undefined),
                   }),
               ]),
+              isAzureWorkspace(workspace) &&
+                div({ style: { marginBottom: '1rem' } }, [
+                  h(
+                    Link,
+                    {
+                      ...Utils.newTabLinkProps,
+                      href: 'https://support.terra.bio/hc/en-us/articles/22950635210395-Add-Python-3-10-to-access-DRS-URIs-in-JupyterLab',
+                    },
+                    [
+                      'See instructions for accessing DRS URIs in JupyterLab',
+                      icon('pop-out', { style: { marginLeft: '1ch' } }),
+                    ]
+                  ),
+                ]),
               renderAnalyses(),
             ]),
           (loadedState.status === 'Loading' || busy) && spinnerOverlay,

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/Environments/UnsupportedWorkspaceCell.test.tsx

@@ -0,0 +1,20 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+import { renderWithAppContexts as render } from 'src/testing/test-utils';
+
+import { UnsupportedWorkspaceCell } from './UnsupportedWorkspaceCell';
+
+describe('UnsupportedWorkspaceCell', () => {
+  it('renders UnsupportedWorkspaceCell with status and message', () => {
+    // Arrange
+    const testStatus = 'Test Status';
+    const testMessage = 'Test Message';
+
+    // Act
+    render(<UnsupportedWorkspaceCell status={testStatus} message={testMessage} />);
+
+    // Assert
+    expect(screen.getByText(testStatus)).toBeInTheDocument();
+    expect(screen.getByText(testMessage)).toBeInTheDocument();
+  });
+});

src/analysis/Environments/UnsupportedWorkspaceCell.ts → src/analysis/Environments/UnsupportedWorkspaceCell.tsx

@@ -1,18 +1,26 @@
-import { TooltipTrigger } from '@terra-ui-packages/components';
-import { div, h } from 'react-hyperscript-helpers';
+import { TooltipTrigger, useThemeFromContext } from '@terra-ui-packages/components';
+import React from 'react';
 import { icon } from 'src/components/icons';
-import colors from 'src/libs/colors';
 
 // These are for calling attention to resources that are most likely linked to GCP v1 workspaces.
 // Rawls will no longer return v1 workspaces, but Leo does not have a way to filter out disks/cloud environments related to them.
 export const unsupportedDiskMessage =
   'This disk is not associated with a supported workspace. It is recommended that you delete it to avoid additional cloud costs.';
 export const unsupportedCloudEnvironmentMessage =
   'This cloud environment is not associated with a supported workspace. It is recommended that you delete it to avoid additional cloud costs.';
-export const UnsupportedWorkspaceCell = ({ status, message }) =>
-  div(
-    {
-      style: {
+
+export interface UnsupportedWorkspaceCellProps {
+  status: string;
+  message: string;
+}
+
+export const UnsupportedWorkspaceCell = (props: UnsupportedWorkspaceCellProps) => {
+  const { status, message } = props;
+  const { colors } = useThemeFromContext();
+
+  return (
+    <div
+      style={{
         display: 'flex',
         flex: 1,
         flexDirection: 'column',
@@ -23,14 +31,14 @@ export const UnsupportedWorkspaceCell = ({ status, message }) =>
         paddingLeft: '1rem',
         backgroundColor: colors.danger(0.15),
         justifyContent: 'center',
-      },
-    },
-    [
-      h(TooltipTrigger, { content: message }, [
-        div({ 'aria-label': message }, [
-          `${status}`,
-          icon('warning-standard', { style: { marginLeft: '0.25rem', color: colors.danger() } }),
-        ]),
-      ]),
-    ]
+      }}
+    >
+      <TooltipTrigger content={message}>
+        <div aria-label={message}>
+          {status}
+          {icon('warning-standard', { style: { marginLeft: '0.25rem', color: colors.danger() } })}
+        </div>
+      </TooltipTrigger>
+    </div>
   );
+};

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