[Workspace] Refactor summary panel in workspace create page (opensear…

…ch-project#8381) (opensearch-project#8388) * Refactor summary panel in workspace create page * Changeset file for PR opensearch-project#8381 created/updated * add description --------- (cherry picked from commit f9b8c8a) Signed-off-by: yubonluo <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
SuZhou-Joe · Oct 3, 2024 · c904389 · c904389
1 parent 17f08f8
commit c904389
Show file tree

Hide file tree

Showing 15 changed files with 247 additions and 294 deletions.
diff --git a/changelogs/fragments/8381.yml b/changelogs/fragments/8381.yml
@@ -0,0 +1,2 @@
+refactor:
+- [Workspace] Refactor summary panel in workspace create page. ([#8381](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8381))
diff --git a/...space/public/components/workspace_creator/__snapshots__/workspace_faq_panel.test.tsx.snap b/...space/public/components/workspace_creator/__snapshots__/workspace_faq_panel.test.tsx.snap
diff --git a/src/plugins/workspace/public/components/workspace_creator/utils.ts b/src/plugins/workspace/public/components/workspace_creator/utils.ts
@@ -11,7 +11,7 @@ export enum RightSidebarScrollField {
   Color = 'color',
   UseCase = 'useCase',
   DataSource = 'dataSource',
-  Member = 'member',
+  Collaborators = 'collaborators',
 }
 
 export const generateRightSidebarScrollProps = (key: RightSidebarScrollField) => {

diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_create_action_panel.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_create_action_panel.tsx
@@ -3,7 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiSmallButton, EuiFlexGroup, EuiFlexItem, EuiSmallButtonEmpty } from '@elastic/eui';
+import {
+  EuiSmallButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSmallButtonEmpty,
+  EuiHorizontalRule,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React, { useState, useCallback } from 'react';
 import type { ApplicationStart } from 'opensearch-dashboards/public';
@@ -35,12 +41,15 @@ export const WorkspaceCreateActionPanel = ({
 
   return (
     <>
+      <EuiHorizontalRule margin="s" />
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiSmallButtonEmpty
             data-test-subj="workspaceForm-bottomBar-cancelButton"
             onClick={showCancelModal}
             disabled={isSubmitting}
+            iconType="cross"
+            flush="left"
           >
             {i18n.translate('workspace.form.right.sidebar.buttons.cancelText', {
               defaultMessage: 'Cancel',

diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.scss b/src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.scss
@@ -8,7 +8,7 @@ $workspaceCreateRightSideBarBottomOffset: 100px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  width: 280px;
+  width: 360px;
 
   @include ouiBreakpoint("xs","s") {
     position: static;

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
@@ -27,8 +27,6 @@ import {
   WorkspaceDescriptionField,
 } from '../workspace_form';
 
-import { WorkspaceCreateActionPanel } from './workspace_create_action_panel';
-import { WorkspaceFaqPanel } from './workspace_faq_panel';
 import { WorkspaceFormSummaryPanel } from './workspace_form_summary_panel';
 import { generateRightSidebarScrollProps, RightSidebarScrollField } from './utils';
 
@@ -182,7 +180,7 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
           {permissionEnabled && (
             <>
               <EuiTitle
-                {...generateRightSidebarScrollProps(RightSidebarScrollField.Member)}
+                {...generateRightSidebarScrollProps(RightSidebarScrollField.Collaborators)}
                 size="s"
               >
                 <h3>{usersAndPermissionsCreatePageTitle}</h3>
@@ -208,18 +206,10 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
       <EuiFlexItem grow={false}>
         <div className="workspaceCreateRightSidebar">
           <div className="workspaceCreateRightSideBarContentWrapper">
-            <WorkspaceFaqPanel />
-            <EuiSpacer size="m" />
             <WorkspaceFormSummaryPanel
               formData={formData}
               availableUseCases={availableUseCases}
               permissionEnabled={permissionEnabled}
-            />
-          </div>
-          <EuiSpacer size="m" />
-          <div className="workspaceCreateRightSideBarActionsWrapper">
-            <WorkspaceCreateActionPanel
-              formData={formData}
               formId={formId}
               application={application}
               isSubmitting={props.isSubmitting}

diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_faq_panel.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_faq_panel.test.tsx
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_faq_panel.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_faq_panel.tsx
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		refactor:
		- [Workspace] Refactor summary panel in workspace create page. ([#8381](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8381))