Add right sidebar to workspace creator

Signed-off-by: Lin Wang <[email protected]>

src/plugins/workspace/public/components/workspace_creator/utils.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const RIGHT_SIDEBAR_SCROLL_KEY = 'data-right-sidebar-scroll';
+
+export enum RightSidebarScrollField {
+  Name = 'name',
+  Description = 'description',
+  Color = 'color',
+  UseCase = 'useCase',
+  DataSource = 'dataSource',
+  Member = 'member',
+}
+
+export const generateRightSidebarScrollProps = (key: RightSidebarScrollField) => {
+  return { [RIGHT_SIDEBAR_SCROLL_KEY]: key };
+};

src/plugins/workspace/public/components/workspace_creator/workspace_create_action_panel.tsx

@@ -3,20 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiSmallButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiSmallButton, EuiFlexGroup, EuiFlexItem, EuiSmallButtonEmpty } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React, { useState, useCallback } from 'react';
 import type { ApplicationStart } from 'opensearch-dashboards/public';
-import type { WorkspaceFormSubmitData } from '../workspace_form';
-import { WorkspaceCancelModal } from '../workspace_form';
+import { WorkspaceFormDataState, WorkspaceCancelModal } from '../workspace_form';
 import {
   MAX_WORKSPACE_DESCRIPTION_LENGTH,
   MAX_WORKSPACE_NAME_LENGTH,
 } from '../../../common/constants';
 
 interface WorkspaceCreateActionPanelProps {
   formId: string;
-  formData: Partial<Pick<WorkspaceFormSubmitData, 'name' | 'description'>>;
+  formData: Pick<WorkspaceFormDataState, 'name' | 'description'>;
   application: ApplicationStart;
 }
 
@@ -34,26 +33,26 @@ export const WorkspaceCreateActionPanel = ({
 
   return (
     <>
-      <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+      <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
-          <EuiSmallButton
+          <EuiSmallButtonEmpty
             data-test-subj="workspaceForm-bottomBar-cancelButton"
             onClick={showCancelModal}
           >
-            {i18n.translate('workspace.form.bottomBar.cancel', {
+            {i18n.translate('workspace.form.right.sidebar.buttons.cancelText', {
               defaultMessage: 'Cancel',
             })}
-          </EuiSmallButton>
+          </EuiSmallButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiSmallButton
-            fill
             type="submit"
             form={formId}
             data-test-subj="workspaceForm-bottomBar-createButton"
+            fill
             disabled={createButtonDisabled}
           >
-            {i18n.translate('workspace.form.bottomBar.createWorkspace', {
+            {i18n.translate('workspace.form.right.sidebar.buttons.createWorkspaceText', {
               defaultMessage: 'Create workspace',
             })}
           </EuiSmallButton>

src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.scss

@@ -0,0 +1,31 @@
+$workspaceCreateRightSideBarTopOffset: 116px;
+$workspaceCreateRightSideBarBottomOffset: 100px;
+
+.workspaceCreateRightSidebar {
+  position: sticky;
+  top: $workspaceCreateRightSideBarTopOffset;
+  max-height: calc(100vh - $workspaceCreateRightSideBarTopOffset - $workspaceCreateRightSideBarBottomOffset);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+
+  @include ouiBreakpoint("xs","s") {
+    position: static;
+    width: 100%;
+  }
+}
+
+.workspaceCreateRightSideBarContentWrapper {
+  overflow-y: scroll;
+
+  @include ouiBreakpoint("xs","s") {
+    overflow: visible;
+  }
+}
+
+.workspaceCreateRightSideBarActionsWrapper {
+  padding: $ouiSizeM;
+  border-radius: $ouiSizeM;
+  background: $ouiColorEmptyShade;
+}

src/plugins/workspace/public/components/workspace_creator/workspace_creator_form.test.tsx

@@ -53,13 +53,13 @@ describe('WorkspaceForm', () => {
   it('should enable data source panel for dashboard admin and when data source is enabled', () => {
     const { getByText } = setup(true, mockDataSourceManagementSetup);
 
-    expect(getByText('Associate data source')).toBeInTheDocument();
+    expect(getByText('Associate data sources')).toBeInTheDocument();
   });
 
   it('should not display data source panel for non dashboard admin', () => {
     const { queryByText } = setup(false, mockDataSourceManagementSetup);
 
-    expect(queryByText('Associate data source')).not.toBeInTheDocument();
+    expect(queryByText('Associate data sources')).not.toBeInTheDocument();
   });
 
   it('should not display data source panel when data source is disabled', () => {