[risk=low][no ticket] Post-release RStudio UI updates (#8413)

* compute suspended tooltip: Jupyter Cloud Environment * New Jupyter Notebook as modal title * shift open or create right when there's no delete
all-of-us · Mar 5, 2024 · 93c4ecb · 93c4ecb
1 parent 8ff2795
commit 93c4ecb
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 11 deletions.
diff --git a/ui/src/app/components/apps-panel/expanded-app.tsx b/ui/src/app/components/apps-panel/expanded-app.tsx
@@ -49,7 +49,7 @@ import {
 
 import { AppBanner } from './app-banner';
 import { AppsPanelButton } from './apps-panel-button';
-import { NewNotebookButton } from './new-notebook-button';
+import { NewJupyterNotebookButton } from './new-jupyter-notebook-button';
 import { PauseResumeButton } from './pause-resume-button';
 import { RuntimeCost } from './runtime-cost';
 import {
@@ -122,7 +122,7 @@ const JupyterButtonRow = (props: {
     <FlexRow>
       <SettingsButton onClick={onClickRuntimeConf} />
       <PauseRuntimeButton {...{ workspace }} />
-      <NewNotebookButton {...{ workspace }} />
+      <NewJupyterNotebookButton {...{ workspace }} />
     </FlexRow>
   );
 };

diff --git a/...onents/apps-panel/new-notebook-button.tsx → ...pps-panel/new-jupyter-notebook-button.tsx b/...onents/apps-panel/new-notebook-button.tsx → ...pps-panel/new-jupyter-notebook-button.tsx
@@ -10,7 +10,7 @@ import { notebooksApi } from 'app/services/swagger-fetch-clients';
 
 import { AppsPanelButton } from './apps-panel-button';
 
-export const NewNotebookButton = (props: { workspace: Workspace }) => {
+export const NewJupyterNotebookButton = (props: { workspace: Workspace }) => {
   const { workspace } = props;
 
   const [showModal, setShowModal] = useState(false);

diff --git a/ui/src/app/components/gke-app-configuration-panels/create-gke-app-button.tsx b/ui/src/app/components/gke-app-configuration-panels/create-gke-app-button.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { CSSProperties, useState } from 'react';
 
 import {
   AppType,
@@ -24,6 +24,7 @@ export interface CreateGKEAppButtonProps {
   onDismiss: () => void;
   username: string;
   billingStatus: BillingStatus;
+  style?: CSSProperties;
 }
 
 export function CreateGkeAppButton({
@@ -33,6 +34,7 @@ export function CreateGkeAppButton({
   onDismiss,
   username,
   billingStatus,
+  style,
 }: CreateGKEAppButtonProps) {
   const [creatingApp, setCreatingApp] = useState(false);
   const createEnabled =
@@ -83,7 +85,7 @@ export function CreateGkeAppButton({
   return (
     <TooltipTrigger disabled={createEnabled} content={tooltip}>
       {/* tooltip trigger needs a div for some reason */}
-      <div>
+      <div {...{ style }}>
         <Button
           id={`${appTypeString}-cloud-environment-create-button`}
           aria-label={`${appTypeString} cloud environment create button`}

diff --git a/ui/src/app/components/gke-app-configuration-panels/create-gke-app.tsx b/ui/src/app/components/gke-app-configuration-panels/create-gke-app.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { CSSProperties } from 'react';
 import { Dropdown } from 'primereact/dropdown';
 
 import {
@@ -166,6 +167,20 @@ export const CreateGkeApp = ({
     </div>
   );
 
+  const showDeleteDiskButton = unattachedDiskExists(app, disk);
+  const showDeleteAppButton = canDeleteApp(app);
+
+  // when there is a delete button, FlexRow aligns the open/create button to the right
+  // for consistency of location when there is no delete button, we shift it to the right with `margin-left: auto`
+
+  const shiftOpenOrCreateButtonRight =
+    !showDeleteDiskButton && !showDeleteAppButton;
+  const openOrCreateButtonStyle: CSSProperties = shiftOpenOrCreateButtonRight
+    ? {
+        marginLeft: 'auto',
+      }
+    : {};
+
   return (
     <FlexColumn
       id={`${appTypeToString[appType]}-configuration-panel`}
@@ -274,13 +289,13 @@ export const CreateGkeApp = ({
           gap: '2rem',
         }}
       >
-        {unattachedDiskExists(app, disk) && (
+        {showDeleteDiskButton && (
           <DeletePersistentDiskButton
             onClick={onClickDeleteUnattachedPersistentDisk}
             style={{ flexShrink: 0 }}
           />
         )}
-        {canDeleteApp(app) && (
+        {showDeleteAppButton && (
           <LinkButton
             style={{ ...styles.deleteLink, flexShrink: 0 }}
             aria-label='Delete Environment'
@@ -295,13 +310,15 @@ export const CreateGkeApp = ({
           <OpenGkeAppButton
             {...{ billingStatus, workspace, onClose }}
             userApp={app}
+            style={openOrCreateButtonStyle}
           />
         ) : (
           <CreateGkeAppButton
             {...{ billingStatus, createAppRequest, onDismiss }}
             existingApp={app}
             workspaceNamespace={workspace.namespace}
             username={profile.username}
+            style={openOrCreateButtonStyle}
           />
         )}
       </FlexRow>

diff --git a/ui/src/app/components/gke-app-configuration-panels/open-gke-app-button.tsx b/ui/src/app/components/gke-app-configuration-panels/open-gke-app-button.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { CSSProperties } from 'react';
 
 import { BillingStatus, UserAppEnvironment, Workspace } from 'generated/fetch';
 
@@ -12,12 +13,14 @@ export interface OpenGkeAppButtonProps {
   billingStatus: BillingStatus;
   workspace: Workspace;
   onClose: () => void;
+  style?: CSSProperties;
 }
 export function OpenGkeAppButton({
   userApp,
   billingStatus,
   workspace: { namespace, id },
   onClose,
+  style,
 }: OpenGkeAppButtonProps) {
   const [navigate] = useNavigation();
 
@@ -31,7 +34,7 @@ export function OpenGkeAppButton({
   return (
     <TooltipTrigger disabled={openEnabled} content={tooltip}>
       {/* tooltip trigger needs a div for some reason */}
-      <div>
+      <div {...{ style }}>
         <Button
           id={`${appTypeString}-cloud-environment-open-button`}
           aria-label={`${appTypeString} cloud environment open button`}

diff --git a/ui/src/app/components/help-sidebar-icons.tsx b/ui/src/app/components/help-sidebar-icons.tsx
@@ -611,7 +611,7 @@ const iconConfig = (props: IconConfigProps): IconConfig => {
       showIcon: () => true,
       style: { width: '36px' },
       tooltip: runtimeTooltip(
-        'Cloud Analysis Environment',
+        'Jupyter Cloud Environment',
         loadingError,
         userSuspended
       ),

diff --git a/ui/src/app/pages/analysis/new-jupyter-notebook-modal.tsx b/ui/src/app/pages/analysis/new-jupyter-notebook-modal.tsx
@@ -85,7 +85,7 @@ export const NewJupyterNotebookModal = (props: Props) => {
         label: 'New Notebook Modal',
       }}
     >
-      <ModalTitle>New Notebook</ModalTitle>
+      <ModalTitle>New Jupyter Notebook</ModalTitle>
       <ModalBody>
         <div style={headerStyles.formLabel}>Name:</div>
         <TextInput

diff --git a/ui/src/app/pages/appAnalysis/app-selector.spec.tsx b/ui/src/app/pages/appAnalysis/app-selector.spec.tsx
@@ -114,7 +114,7 @@ describe('App Selector', () => {
         screen.queryByText('Select an application')
       ).not.toBeInTheDocument();
       // the Jupyter modal is visible
-      expect(screen.queryByText('New Notebook')).toBeInTheDocument();
+      expect(screen.queryByText('New Jupyter Notebook')).toBeInTheDocument();
     });
   });