[Workspace] Set the default color to first color from the palette

changelogs/fragments/7627.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Set default color for workspace create form ([#7627](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7627))

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

@@ -4,7 +4,13 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiPage, EuiPageBody, EuiPageHeader, EuiPageContent } from '@elastic/eui';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageContent,
+  euiPaletteColorBlind,
+} from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { useObservable } from 'react-use';
 import { BehaviorSubject } from 'rxjs';
@@ -18,6 +24,7 @@ import { convertPermissionSettingsToPermissions } from '../workspace_form';
 import { DataSource } from '../../../common/types';
 import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 import { WorkspaceUseCase } from '../../types';
+import { WorkspaceFormData } from '../workspace_form/types';
 
 export interface WorkspaceCreatorProps {
   registeredUseCases$: BehaviorSubject<WorkspaceUseCase[]>;
@@ -37,6 +44,11 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
     workspaceClient: WorkspaceClient;
     dataSourceManagement?: DataSourceManagementPluginSetup;
   }>();
+
+  const defaultWorkspaceFormValues: Partial<WorkspaceFormData> = {
+    color: euiPaletteColorBlind()[0],
+  };
+
   const isPermissionEnabled = application?.capabilities.workspaces.permissionEnabled;
   const availableUseCases = useObservable(props.registeredUseCases$, []);
 
@@ -107,6 +119,7 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
               permissionEnabled={isPermissionEnabled}
               dataSourceManagement={dataSourceManagement}
               availableUseCases={availableUseCases}
+              defaultValues={defaultWorkspaceFormValues}
             />
           )}
         </EuiPageContent>

src/plugins/workspace/public/components/workspace_form/types.ts

@@ -79,10 +79,14 @@ export interface WorkspaceFormProps {
   application: ApplicationStart;
   savedObjects: SavedObjectsStart;
   onSubmit?: (formData: WorkspaceFormSubmitData) => void;
-  defaultValues?: WorkspaceFormData;
+  defaultValues?: Partial<WorkspaceFormData>;
   operationType: WorkspaceOperationType;
   permissionEnabled?: boolean;
   detailTab?: DetailTab;
   dataSourceManagement?: DataSourceManagementPluginSetup;
   availableUseCases: WorkspaceUseCase[];
 }
+
+export interface WorkspaceDetailedFormProps extends WorkspaceFormProps {
+  defaultValues?: WorkspaceFormData;
+}

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

@@ -454,7 +454,7 @@ export const getNumberOfChanges = (
       Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>
     >;
   },
-  initialFormData: Omit<WorkspaceFormData, 'id'>
+  initialFormData: Omit<Partial<WorkspaceFormData>, 'id'>
 ) => {
   let count = 0;
   if (newFormData.name !== initialFormData.name) {

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

@@ -8,7 +8,7 @@ import React, { useRef } from 'react';
 import { EuiPanel, EuiSpacer, EuiForm, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 
 import { WorkspaceBottomBar } from './workspace_bottom_bar';
-import { WorkspaceFormProps } from './types';
+import { WorkspaceDetailedFormProps } from './types';
 import { useWorkspaceForm } from './use_workspace_form';
 import { WorkspaceUseCase } from './workspace_use_case';
 import { WorkspacePermissionSettingPanel } from './workspace_permission_setting_panel';
@@ -41,7 +41,7 @@ const FormGroup = ({ title, children }: FormGroupProps) => (
   </EuiFlexGroup>
 );
 
-export const WorkspaceDetailForm = (props: WorkspaceFormProps) => {
+export const WorkspaceDetailForm = (props: WorkspaceDetailedFormProps) => {
   const {
     detailTab,
     application,