From 1278a74e90fbcd8d304c9cef011f2218ad663044 Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Thu, 22 Aug 2024 21:10:39 +0800
Subject: [PATCH] Update layout and add title

Signed-off-by: Lin Wang <wonglam@amazon.com>
---
 .../public/components/forms/index.ts          |  1 +
 .../components/forms/workspace_use_case.tsx   |  2 -
 .../workspace_creator_form.tsx                | 57 +++++++++++++++----
 3 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/plugins/workspace/public/components/forms/index.ts b/src/plugins/workspace/public/components/forms/index.ts
index 333083fba88b..02f4d4f8d4f2 100644
--- a/src/plugins/workspace/public/components/forms/index.ts
+++ b/src/plugins/workspace/public/components/forms/index.ts
@@ -17,6 +17,7 @@ export {
   DetailTab,
   DetailTabTitles,
   WorkspacePermissionItemType,
+  usersAndPermissionsCreatePageTitle,
 } from './constants';
 export {
   convertPermissionsToPermissionSettings,
diff --git a/src/plugins/workspace/public/components/forms/workspace_use_case.tsx b/src/plugins/workspace/public/components/forms/workspace_use_case.tsx
index 24d1e7c80e64..65272ec4db30 100644
--- a/src/plugins/workspace/public/components/forms/workspace_use_case.tsx
+++ b/src/plugins/workspace/public/components/forms/workspace_use_case.tsx
@@ -80,7 +80,6 @@ const WorkspaceUseCaseCard = ({
     <EuiCheckableCard
       id={id}
       checkableType="radio"
-      style={{ height: '100%' }}
       label={title}
       checked={checked}
       className="workspace-use-case-item"
@@ -140,7 +139,6 @@ export const WorkspaceUseCase = ({
       })}
       isInvalid={!!formErrors.features}
       error={formErrors.features?.message}
-      fullWidth
     >
       <EuiFlexGroup direction="column">
         {availableUseCases.map(({ id, title, description, features, disabled }) => (
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 90a9fd20ae89..4873a61540a1 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
@@ -4,7 +4,8 @@
  */
 
 import React, { useCallback, useRef } from 'react';
-import { EuiSpacer, EuiForm, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiSpacer, EuiForm, EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
 
 import {
   useWorkspaceForm,
@@ -17,6 +18,7 @@ import {
   WorkspaceDescriptionField,
   WorkspacePermissionSettingPanel,
   WorkspaceColorField,
+  usersAndPermissionsCreatePageTitle,
 } from '../forms';
 import { WorkspaceFormSummaryPanel } from './workspace_form_summary_panel';
 import { WorkspaceFaqPanel } from './workspace_faq_panel';
@@ -24,8 +26,6 @@ import { generateRightSidebarScrollProps, RightSidebarScrollField } from './util
 import { WorkspaceCreateActionPanel } from './workspace_create_action_panel';
 import './workspace_creator_form.scss';
 
-import './workspace_creator_form.scss';
-
 interface WorkspaceCreatorFormProps extends WorkspaceBaseFormProps {
   isSubmitting: boolean;
 }
@@ -77,8 +77,8 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
   );
 
   return (
-    <EuiFlexGroup justifyContent="spaceBetween" className="workspaceCreateFormContainer">
-      <EuiFlexItem style={{ overflow: 'hidden' }}>
+    <EuiFlexGroup className="workspaceCreateFormContainer">
+      <EuiFlexItem style={{ maxWidth: 650 }}>
         <EuiForm id={formId} onSubmit={handleFormSubmit} component="form">
           {numberOfErrors > 0 && (
             <>
@@ -86,6 +86,13 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
               <EuiSpacer />
             </>
           )}
+          <EuiTitle size="xs">
+            <h5>
+              {i18n.translate('workspace.creator.form.customizeTitle', {
+                defaultMessage: 'Customize the workspace',
+              })}
+            </h5>
+          </EuiTitle>
           <WorkspaceUseCase
             value={formData.useCase}
             onChange={handleUseCaseChange}
@@ -116,7 +123,23 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
           <EuiSpacer />
           {/* SelectDataSourcePanel is only visible for dashboard admin and when data source is enabled*/}
           {isDashboardAdmin && isDataSourceEnabled && (
-            <div {...generateRightSidebarScrollProps(RightSidebarScrollField.DataSource)}>
+            <>
+              <EuiTitle
+                {...generateRightSidebarScrollProps(RightSidebarScrollField.DataSource)}
+                size="s"
+              >
+                <h3>
+                  {i18n.translate('workspace.creator.form.associateDataSourceTitle', {
+                    defaultMessage: 'Associate data sources',
+                  })}
+                </h3>
+              </EuiTitle>
+              <EuiText color="subdued" size="xs">
+                {i18n.translate('workspace.creator.form.associateDataSourceDescription', {
+                  defaultMessage:
+                    'Add data sources that will be available in the workspace. If a selected OpenSearch connection has embedded Direct Query connection, they will also be available in the workspace.',
+                })}
+              </EuiText>
               <SelectDataSourcePanel
                 errors={formErrors.selectedDataSources}
                 onChange={setSelectedDataSources}
@@ -124,11 +147,25 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
                 selectedDataSources={formData.selectedDataSources}
                 data-test-subj={`workspaceForm-dataSourcePanel`}
               />
-            </div>
+              <EuiSpacer size="s" />
+              <EuiSpacer size="s" />
+            </>
           )}
-
           {permissionEnabled && (
-            <div {...generateRightSidebarScrollProps(RightSidebarScrollField.Member)}>
+            <>
+              <EuiTitle
+                {...generateRightSidebarScrollProps(RightSidebarScrollField.Member)}
+                size="s"
+              >
+                <h3>{usersAndPermissionsCreatePageTitle}</h3>
+              </EuiTitle>
+              <EuiText color="subdued" size="xs">
+                {i18n.translate('workspace.creator.form.usersAndPermissionsDescription', {
+                  defaultMessage:
+                    'You will be added as an owner to the workspace. Select additional users and user groups as workspace collaborators with different access levels.',
+                })}
+              </EuiText>
+              <EuiSpacer size="m" />
               <WorkspacePermissionSettingPanel
                 errors={formErrors.permissionSettings?.fields}
                 onChange={setPermissionSettings}
@@ -136,7 +173,7 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
                 disabledUserOrGroupInputIds={disabledUserOrGroupInputIdsRef.current}
                 data-test-subj={`workspaceForm-permissionSettingPanel`}
               />
-            </div>
+            </>
           )}
           <EuiSpacer />
           <EuiSpacer />