Combine Cromwell Settings and Launch buttons (#7479)

Author: Peter-Lavigne

ui/src/app/components/apps-panel/expanded-app.spec.tsx

@@ -356,19 +356,6 @@ describe('ExpandedApp', () => {
     );
   });
 
-  it('should not be possible to configure a Cromwell app', async () => {
-    const wrapper = await component(UIAppType.CROMWELL, {
-      appName: 'my-app',
-      googleProject,
-      status: AppStatus.RUNNING,
-    });
-    expect(
-      wrapper
-        .find({ 'data-test-id': 'Cromwell-settings-button' })
-        .prop('disabled')
-    ).toBeTruthy();
-  });
-
   it('should allow launching RStudio when the RStudio app status is RUNNING', async () => {
     const appName = 'my-app';
     const wrapper = await component(UIAppType.RSTUDIO, {

ui/src/app/components/apps-panel/expanded-app.tsx

@@ -51,7 +51,6 @@ const styles = reactStyles({
     marginLeft: '1em',
     marginBottom: '1em',
     padding: '1em',
-    width: 'fit-content',
   },
   enabledTrashButton: {
     alignSelf: 'center',
@@ -129,34 +128,11 @@ const CromwellButtonRow = (props: {
 
   return (
     <FlexRow>
-      <TooltipTrigger
-        disabled={false}
-        content='Support for configuring Cromwell is not yet available'
-      >
-        {/* tooltip trigger needs a div for some reason */}
-        <div>
-          <SettingsButton
-            disabled={true}
-            onClick={() => {}}
-            data-test-id='Cromwell-settings-button'
-          />
-        </div>
-      </TooltipTrigger>
+      <SettingsButton
+        onClick={() => setSidebarActiveIconStore.next('cromwellConfig')}
+        data-test-id='Cromwell-settings-button'
+      />
       <PauseUserAppButton {...{ userApp }} />
-      <TooltipTrigger
-        disabled={canCreateApp(userApp)}
-        content='A Cromwell app exists or is being created'
-      >
-        {/* tooltip trigger needs a div for some reason */}
-        <div>
-          <AppsPanelButton
-            disabled={!canCreateApp(userApp)}
-            onClick={() => setSidebarActiveIconStore.next('cromwellConfig')}
-            icon={faPlay}
-            buttonText='Launch'
-          />
-        </div>
-      </TooltipTrigger>
     </FlexRow>
   );
 };
@@ -304,9 +280,9 @@ export const ExpandedApp = (props: ExpandedAppProps) => {
       {appType === UIAppType.JUPYTER ? (
         <JupyterButtonRow {...{ workspace, onClickRuntimeConf }} />
       ) : (
-        <FlexColumn style={{ alignItems: 'center' }}>
+        <FlexColumn>
           {/* TODO: keep status updated internally */}
-          <div>
+          <div style={{ textAlign: 'center' }}>
             status: {fromUserAppStatusWithFallback(initialUserAppInfo?.status)}{' '}
             (refresh to update)
           </div>

ui/src/app/components/help-sidebar.spec.tsx

@@ -3,6 +3,7 @@ import { act } from 'react-dom/test-utils';
 
 import {
   AppsApi,
+  AppStatus,
   CdrVersionsApi,
   CohortAnnotationDefinitionApi,
   CohortReviewApi,
@@ -47,7 +48,10 @@ import {
   waitForFakeTimersAndUpdate,
   waitOneTickAndUpdate,
 } from 'testing/react-test-helpers';
-import { AppsApiStub } from 'testing/stubs/apps-api-stub';
+import {
+  AppsApiStub,
+  createListAppsCromwellResponse,
+} from 'testing/stubs/apps-api-stub';
 import {
   CdrVersionsApiStub,
   cdrVersionTiersResponse,
@@ -127,6 +131,7 @@ const COMPUTE_SUSPENDED_RESPONSE_STUB = () =>
 describe('HelpSidebar', () => {
   let dataSetStub: DataSetApiStub;
   let runtimeStub: RuntimeApiStub;
+  let appsStub: AppsApiStub;
   let props: {};
 
   const component = async () => {
@@ -186,6 +191,7 @@ describe('HelpSidebar', () => {
     props = {};
     dataSetStub = new DataSetApiStub();
     runtimeStub = new RuntimeApiStub();
+    appsStub = new AppsApiStub();
     registerApiClient(CdrVersionsApi, new CdrVersionsApiStub());
     registerApiClient(CohortReviewApi, new CohortReviewServiceStub());
     registerApiClient(
@@ -195,7 +201,7 @@ describe('HelpSidebar', () => {
     registerApiClient(DataSetApi, dataSetStub);
     registerApiClient(RuntimeApi, runtimeStub);
     registerApiClient(WorkspacesApi, new WorkspacesApiStub());
-    registerApiClient(AppsApi, new AppsApiStub());
+    registerApiClient(AppsApi, appsStub);
     registerApiClient(NotebooksApi, new NotebooksApiStub());
     currentWorkspaceStore.next(workspaceDataStub);
     currentCohortReviewStore.next(cohortReviewStubs[0]);
@@ -614,4 +620,28 @@ describe('HelpSidebar', () => {
     expect(wrapper.find(AppsPanel).exists()).toBeFalsy();
     expect(wrapper.find(CromwellConfigurationPanel).exists()).toBeTruthy();
   });
+
+  it('should open the Cromwell config panel after clicking the Cromwell settings button', async () => {
+    appsStub.listAppsResponse = [
+      createListAppsCromwellResponse({ status: AppStatus.RUNNING }),
+    ];
+
+    const wrapper = await component();
+    wrapper
+      .find({ 'data-test-id': 'help-sidebar-icon-apps' })
+      .simulate('click');
+    await waitOneTickAndUpdate(wrapper);
+
+    expect(wrapper.find(AppsPanel).exists()).toBeTruthy();
+    expect(wrapper.find(CromwellConfigurationPanel).exists()).toBeFalsy();
+
+    wrapper
+      .find({ 'data-test-id': `Cromwell-expanded` })
+      .find({ 'data-test-id': 'Cromwell-settings-button' })
+      .simulate('click');
+    await waitOneTickAndUpdate(wrapper);
+
+    expect(wrapper.find(AppsPanel).exists()).toBeFalsy();
+    expect(wrapper.find(CromwellConfigurationPanel).exists()).toBeTruthy();
+  });
 });

ui/src/testing/stubs/apps-api-stub.ts

@@ -9,31 +9,57 @@ import {
 
 import { stubNotImplementedError } from 'testing/stubs/stub-utils';
 
-const createRStudioListAppsResponseDefaults: UserAppEnvironment = {
-  googleProject: 'terra-vpc-sc-dev-1234',
-  appName: 'all-of-us-2-rstudio-1234',
-  appType: AppType.RSTUDIO,
-  createdDate: '2023-02-28T21:10:28.723328Z',
+const listAppsAppResponseSharedDefaults = {
+  googleProject: 'terra-vpc-sc-dev-42c21469',
+  createdDate: '2023-03-13T18:16:49.481854Z',
   status: AppStatus.RUNNING,
   autopauseThreshold: null,
   kubernetesRuntimeConfig: {
     numNodes: 1,
     machineType: 'n1-standard-4',
     autoscalingEnabled: false,
   },
+  dateAccessed: '2023-03-13T18:16:49.481854Z',
+  errors: [],
+};
+
+const createCromwellListAppsResponseDefaults: UserAppEnvironment = {
+  ...listAppsAppResponseSharedDefaults,
+  appName: 'all-of-us-2-cromwell-1234',
+  appType: AppType.CROMWELL,
+  creator: '[email protected]',
+  proxyUrls: {
+    'cromwell-service':
+      'https://leonardo.dsde-dev.broadinstitute.org/proxy/google/v1/apps/terra-vpc-sc-dev-1234/all-of-us-2-cromwell-1234/cromwell-service',
+  },
+  diskName: 'all-of-us-pd-2-cromwell-1234',
+  labels: {
+    'created-by': '[email protected]',
+    'aou-app-type': 'cromwell',
+  },
+};
+
+const createRStudioListAppsResponseDefaults: UserAppEnvironment = {
+  ...listAppsAppResponseSharedDefaults,
+  appName: 'all-of-us-2-rstudio-1234',
+  appType: AppType.RSTUDIO,
   proxyUrls: {
     rstudio:
       'https://leonardo.dsde-dev.broadinstitute.org/proxy/google/v1/apps/terra-vpc-sc-dev-1234/all-of-us-2-rstudio-1234/rstudio',
   },
   diskName: 'all-of-us-pd-2-rstudio-1234',
-  dateAccessed: '2023-02-28T21:10:28.723328Z',
-  errors: [],
   labels: {
     'created-by': '[email protected]',
     'aou-app-type': 'rstudio',
   },
 };
 
+export const createListAppsCromwellResponse = (
+  overrides: Partial<UserAppEnvironment> = {}
+): UserAppEnvironment => {
+  return { ...createCromwellListAppsResponseDefaults, ...overrides };
+};
+
 export const createListAppsRStudioResponse = (
   overrides: Partial<UserAppEnvironment> = {}
 ): UserAppEnvironment => {