Update layout and add title

Signed-off-by: Lin Wang <[email protected]>
opensearch-project · Aug 22, 2024 · 1278a74 · 1278a74
1 parent 3e1d330
commit 1278a74
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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,15 +18,14 @@ import {
   WorkspaceDescriptionField,
   WorkspacePermissionSettingPanel,
   WorkspaceColorField,
+  usersAndPermissionsCreatePageTitle,
 } from '../forms';
 import { WorkspaceFormSummaryPanel } from './workspace_form_summary_panel';
 import { WorkspaceFaqPanel } from './workspace_faq_panel';
 import { generateRightSidebarScrollProps, RightSidebarScrollField } from './utils';
 import { WorkspaceCreateActionPanel } from './workspace_create_action_panel';
 import './workspace_creator_form.scss';
 
-import './workspace_creator_form.scss';
-
 interface WorkspaceCreatorFormProps extends WorkspaceBaseFormProps {
   isSubmitting: boolean;
 }
@@ -77,15 +77,22 @@ 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 && (
             <>
               <WorkspaceFormErrorCallout errors={formErrors} />
               <EuiSpacer />
             </>
           )}
+          <EuiTitle size="xs">
+            <h5>
+              {i18n.translate('workspace.creator.form.customizeTitle', {
+                defaultMessage: 'Customize the workspace',
+              })}
+            </h5>
+          </EuiTitle>
           <WorkspaceUseCase
             value={formData.useCase}
             onChange={handleUseCaseChange}
@@ -116,27 +123,57 @@ 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}
                 savedObjects={savedObjects}
                 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}
                 permissionSettings={formData.permissionSettings}
                 disabledUserOrGroupInputIds={disabledUserOrGroupInputIdsRef.current}
                 data-test-subj={`workspaceForm-permissionSettingPanel`}
               />
-            </div>
+            </>
           )}
           <EuiSpacer />
           <EuiSpacer />