From 930ec5ef864b58e4409c7bb422c775e8b2f453d2 Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Fri, 23 Aug 2024 14:29:01 +0800
Subject: [PATCH] Address PR comments and fix use case scroll

Signed-off-by: Lin Wang <wonglam@amazon.com>
---
 .../workspace_creator_form.tsx                | 14 ++--
 .../workspace_form_summary_panel.tsx          | 64 ++++++++-----------
 2 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
index 4873a61540a1..c4b4045b75dd 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.tsx
@@ -93,12 +93,14 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
               })}
             </h5>
           </EuiTitle>
-          <WorkspaceUseCase
-            value={formData.useCase}
-            onChange={handleUseCaseChange}
-            formErrors={formErrors}
-            availableUseCases={availableUseCases}
-          />
+          <div {...generateRightSidebarScrollProps(RightSidebarScrollField.UseCase)}>
+            <WorkspaceUseCase
+              value={formData.useCase}
+              onChange={handleUseCaseChange}
+              formErrors={formErrors}
+              availableUseCases={availableUseCases}
+            />
+          </div>
           <EuiSpacer size="m" />
           <div {...generateRightSidebarScrollProps(RightSidebarScrollField.Name)} />
           <WorkspaceNameField
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx
index 661d49d41457..a16cad76ede7 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_form_summary_panel.tsx
@@ -19,6 +19,33 @@ import { WorkspaceFormDataState } from '../forms';
 import { WorkspaceUseCase } from '../../types';
 import { RightSidebarScrollField, RIGHT_SIDEBAR_SCROLL_KEY } from './utils';
 
+const SCROLL_FIELDS = {
+  [RightSidebarScrollField.UseCase]: i18n.translate('workspace.form.summary.panel.useCase.title', {
+    defaultMessage: 'Use case',
+  }),
+  [RightSidebarScrollField.Name]: i18n.translate('workspace.form.summary.panel.name.title', {
+    defaultMessage: 'Name',
+  }),
+  [RightSidebarScrollField.Description]: i18n.translate(
+    'workspace.form.summary.panel.description.title',
+    {
+      defaultMessage: 'Description',
+    }
+  ),
+  [RightSidebarScrollField.Color]: i18n.translate('workspace.form.summary.panel.color.title', {
+    defaultMessage: 'Accent color',
+  }),
+  [RightSidebarScrollField.DataSource]: i18n.translate(
+    'workspace.form.summary.panel.dataSources.title',
+    {
+      defaultMessage: 'Data sources',
+    }
+  ),
+  [RightSidebarScrollField.Member]: i18n.translate('workspace.form.summary.panel.members.title', {
+    defaultMessage: 'Members',
+  }),
+};
+
 export const FieldSummaryItem = ({
   field,
   children,
@@ -35,47 +62,12 @@ export const FieldSummaryItem = ({
     element?.scrollIntoView({ behavior: 'smooth', block: 'center' });
   }, [field]);
 
-  const renderTitle = () => {
-    return {
-      [RightSidebarScrollField.UseCase]: i18n.translate(
-        'workspace.form.summary.panel.useCase.title',
-        {
-          defaultMessage: 'Use case',
-        }
-      ),
-      [RightSidebarScrollField.Name]: i18n.translate('workspace.form.summary.panel.name.title', {
-        defaultMessage: 'Name',
-      }),
-      [RightSidebarScrollField.Description]: i18n.translate(
-        'workspace.form.summary.panel.description.title',
-        {
-          defaultMessage: 'Description',
-        }
-      ),
-      [RightSidebarScrollField.Color]: i18n.translate('workspace.form.summary.panel.color.title', {
-        defaultMessage: 'Accent color',
-      }),
-      [RightSidebarScrollField.DataSource]: i18n.translate(
-        'workspace.form.summary.panel.dataSources.title',
-        {
-          defaultMessage: 'Data sources',
-        }
-      ),
-      [RightSidebarScrollField.Member]: i18n.translate(
-        'workspace.form.summary.panel.members.title',
-        {
-          defaultMessage: 'Members',
-        }
-      ),
-    }[field];
-  };
-
   return (
     <>
       <EuiText size="xs">
         <h5>
           <EuiLink color="text" onClick={handleTitleClick}>
-            <u>{renderTitle()}</u>
+            <u>{SCROLL_FIELDS[field]}</u>
           </EuiLink>
         </h5>
       </EuiText>