[Workspace] Refactor collaborators panel at workspace create (#8382) (#…

…8420)

* refactor collaborators panel



* Changeset file for PR #8382 created/updated

* update title style



* Modify panel and update title style



* update placeholder



* update placeholder



* Add comments for placeholder in permission setting panel



---------





(cherry picked from commit 4b56be5)

Signed-off-by: Kapian1234 <wanjinch@amazon.com>
Signed-off-by: Lin Wang <wonglam@amazon.com>
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>
Co-authored-by: Lin Wang <wonglam@amazon.com>

changelogs/fragments/8382.yml

@@ -0,0 +1,2 @@
+feat:
+- Refactor collaborators panel at workspace create ([#8382](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8382))

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

@@ -6,11 +6,11 @@
 import React, { useCallback, useRef } from 'react';
 import {
   EuiSpacer,
-  EuiTitle,
   EuiForm,
   EuiText,
   EuiFlexItem,
   EuiFlexGroup,
+  EuiDescribedFormGroup,
   EuiPanel,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
@@ -146,28 +146,44 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
             </>
           )}
           {permissionEnabled && (
-            <>
-              <EuiTitle
+            <EuiPanel>
+              <EuiText
                 {...generateRightSidebarScrollProps(RightSidebarScrollField.Collaborators)}
                 size="s"
               >
-                <h3>{usersAndPermissionsCreatePageTitle}</h3>
-              </EuiTitle>
+                <h2>{usersAndPermissionsCreatePageTitle}</h2>
+              </EuiText>
               <EuiText 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.',
+                  defaultMessage: 'Manage access and permissions',
                 })}
               </EuiText>
               <EuiSpacer size="m" />
-              <WorkspacePermissionSettingPanel
-                errors={formErrors.permissionSettings?.fields}
-                onChange={setPermissionSettings}
-                permissionSettings={formData.permissionSettings}
-                disabledUserOrGroupInputIds={disabledUserOrGroupInputIdsRef.current}
-                data-test-subj={`workspaceForm-permissionSettingPanel`}
-              />
-            </>
+              <EuiDescribedFormGroup
+                title={
+                  <h4 {...generateRightSidebarScrollProps(RightSidebarScrollField.Name)}>
+                    {i18n.translate('workspace.creator.collaborators.panel.fields.name.title', {
+                      defaultMessage: 'Workspace access',
+                    })}
+                  </h4>
+                }
+                description={i18n.translate(
+                  'workspace.creator.collaborators.panel.fields.name.description',
+                  {
+                    defaultMessage:
+                      'You will be added as an owner to the workspace. Select additional users and user groups as workspace collaborators with different access levels.',
+                  }
+                )}
+              >
+                <WorkspacePermissionSettingPanel
+                  errors={formErrors.permissionSettings?.fields}
+                  onChange={setPermissionSettings}
+                  permissionSettings={formData.permissionSettings}
+                  disabledUserOrGroupInputIds={disabledUserOrGroupInputIdsRef.current}
+                  data-test-subj={`workspaceForm-permissionSettingPanel`}
+                />
+              </EuiDescribedFormGroup>
+            </EuiPanel>
           )}
         </EuiForm>
       </EuiFlexItem>

src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx

@@ -144,7 +144,7 @@ export const WorkspacePermissionSettingInput = ({
           placeholder={
             type === WorkspacePermissionItemType.User
               ? i18n.translate('workspaceForm.permissionSetting.selectUser', {
-                  defaultMessage: 'Enter user name or uer ID',
+                  defaultMessage: 'Enter user name or user ID',
                 })
               : i18n.translate('workspaceForm.permissionSetting.selectUserGroup', {
                   defaultMessage: 'Enter group name or group ID',

src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx

@@ -11,6 +11,7 @@ import {
   EuiCompressedFormRow,
   EuiSpacer,
   EuiFormLabel,
+  EuiButtonIcon,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { WorkspaceFormError, WorkspacePermissionSetting } from './types';
@@ -135,31 +136,43 @@ export const WorkspacePermissionSettingPanel = ({
 
   return (
     <>
-      <EuiFlexGroup alignItems="center" gutterSize="s">
-        <EuiFlexItem style={{ maxWidth: 150 }}>
-          <EuiFormLabel id={PERMISSION_TYPE_LABEL_ID}>
-            {i18n.translate('workspaceForm.permissionSetting.typeLabel', {
-              defaultMessage: 'Type',
-            })}
-          </EuiFormLabel>
-        </EuiFlexItem>
-        <EuiFlexItem style={{ maxWidth: 400 }}>
-          <EuiFormLabel id={PERMISSION_COLLABORATOR_LABEL_ID}>
-            {i18n.translate('workspaceForm.permissionSetting.collaboratorLabel', {
-              defaultMessage: 'Collaborator',
-            })}
-          </EuiFormLabel>
-        </EuiFlexItem>
-        <EuiFlexItem style={{ maxWidth: 150 }}>
-          <EuiFormLabel id={PERMISSION_ACCESS_LEVEL_LABEL_ID}>
-            {i18n.translate('workspaceForm.permissionSetting.accessLevelLabel', {
-              defaultMessage: 'Access level',
-            })}
-          </EuiFormLabel>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false} style={{ width: 40 }} />
-      </EuiFlexGroup>
-      <EuiSpacer size="xs" />
+      {permissionSettings.length > 0 && (
+        <>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem style={{ maxWidth: 150 }}>
+              <EuiFormLabel id={PERMISSION_TYPE_LABEL_ID}>
+                {i18n.translate('workspaceForm.permissionSetting.typeLabel', {
+                  defaultMessage: 'Type',
+                })}
+              </EuiFormLabel>
+            </EuiFlexItem>
+            <EuiFlexItem style={{ maxWidth: 400 }}>
+              <EuiFormLabel id={PERMISSION_COLLABORATOR_LABEL_ID}>
+                {i18n.translate('workspaceForm.permissionSetting.collaboratorLabel', {
+                  defaultMessage: 'Collaborator',
+                })}
+              </EuiFormLabel>
+            </EuiFlexItem>
+            <EuiFlexItem style={{ maxWidth: 150 }}>
+              <EuiFormLabel id={PERMISSION_ACCESS_LEVEL_LABEL_ID}>
+                {i18n.translate('workspaceForm.permissionSetting.accessLevelLabel', {
+                  defaultMessage: 'Access level',
+                })}
+              </EuiFormLabel>
+            </EuiFlexItem>
+            {/* Placeholder to vertically align form labels with their respective inputs */}
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                color="text"
+                iconType="trash"
+                size="xs"
+                style={{ visibility: 'hidden' }}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="xs" />
+        </>
+      )}
       {permissionSettings.map((item, index) => (
         <React.Fragment key={item.id}>
           <EuiCompressedFormRow