From 93c4ecbd8b0aea27b1fdb3e9ab447422a3ba0f01 Mon Sep 17 00:00:00 2001
From: Joel Thibault <2701406+jmthibault79@users.noreply.github.com>
Date: Tue, 5 Mar 2024 13:09:27 -0500
Subject: [PATCH] [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
---
 .../components/apps-panel/expanded-app.tsx    |  4 ++--
 ...on.tsx => new-jupyter-notebook-button.tsx} |  2 +-
 .../create-gke-app-button.tsx                 |  6 ++++--
 .../create-gke-app.tsx                        | 21 +++++++++++++++++--
 .../open-gke-app-button.tsx                   |  5 ++++-
 ui/src/app/components/help-sidebar-icons.tsx  |  2 +-
 .../analysis/new-jupyter-notebook-modal.tsx   |  2 +-
 .../pages/appAnalysis/app-selector.spec.tsx   |  2 +-
 8 files changed, 33 insertions(+), 11 deletions(-)
 rename ui/src/app/components/apps-panel/{new-notebook-button.tsx => new-jupyter-notebook-button.tsx} (94%)

diff --git a/ui/src/app/components/apps-panel/expanded-app.tsx b/ui/src/app/components/apps-panel/expanded-app.tsx
index aa8db210f53..3b58dfb4379 100644
--- 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/ui/src/app/components/apps-panel/new-notebook-button.tsx b/ui/src/app/components/apps-panel/new-jupyter-notebook-button.tsx
similarity index 94%
rename from ui/src/app/components/apps-panel/new-notebook-button.tsx
rename to ui/src/app/components/apps-panel/new-jupyter-notebook-button.tsx
index fe207233fa4..8e4fcb6f758 100644
--- a/ui/src/app/components/apps-panel/new-notebook-button.tsx
+++ b/ui/src/app/components/apps-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
index b45efcebbe7..daef7419b6b 100644
--- 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
index 05777794775..34abab8e5c5 100644
--- 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,6 +310,7 @@ export const CreateGkeApp = ({
           <OpenGkeAppButton
             {...{ billingStatus, workspace, onClose }}
             userApp={app}
+            style={openOrCreateButtonStyle}
           />
         ) : (
           <CreateGkeAppButton
@@ -302,6 +318,7 @@ export const CreateGkeApp = ({
             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
index c613d14d13a..16aa62179a2 100644
--- 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
index 039d86bd8df..6290ca177c1 100644
--- 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
index c46cf50229f..e59bc54078c 100644
--- 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
index a21cb1238aa..a5679bfae28 100644
--- 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();
     });
   });