[Backport 2.x] [Workspace]Restrict at least one data source in workspace creation page

changelogs/fragments/8461.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace]Restrict at least one data source in workspace creation page ([#8461](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8461))

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

@@ -9,6 +9,7 @@ import {
   MAX_WORKSPACE_DESCRIPTION_LENGTH,
   MAX_WORKSPACE_NAME_LENGTH,
 } from '../../../common/constants';
+import { DataSourceConnectionType } from '../../../common/types';
 import { WorkspaceCreateActionPanel } from './workspace_create_action_panel';
 
 const mockApplication = applicationServiceMock.createStartContract();
@@ -18,16 +19,28 @@ describe('WorkspaceCreateActionPanel', () => {
   const formData = {
     name: 'Test Workspace',
     description: 'This is a test workspace',
+    selectedDataSourceConnections: [
+      {
+        id: 'data-source-1',
+        name: 'Data Source 1',
+        type: '',
+        connectionType: DataSourceConnectionType.OpenSearchConnection,
+      },
+    ],
   };
 
   it('should disable the "Create Workspace" button when name exceeds the maximum length', () => {
     const longName = 'a'.repeat(MAX_WORKSPACE_NAME_LENGTH + 1);
     render(
       <WorkspaceCreateActionPanel
         formId={formId}
-        formData={{ name: longName, description: formData.description }}
+        formData={{
+          ...formData,
+          name: longName,
+        }}
         application={mockApplication}
         isSubmitting={false}
+        dataSourceEnabled
       />
     );
     const createButton = screen.getByText('Create workspace');
@@ -39,22 +52,61 @@ describe('WorkspaceCreateActionPanel', () => {
     render(
       <WorkspaceCreateActionPanel
         formId={formId}
-        formData={{ name: formData.name, description: longDescription }}
+        formData={{
+          ...formData,
+          description: longDescription,
+        }}
         application={mockApplication}
         isSubmitting={false}
+        dataSourceEnabled
       />
     );
     const createButton = screen.getByText('Create workspace');
     expect(createButton.closest('button')).toBeDisabled();
   });
 
+  it('should disable the "Create Workspace" button when data source enabled and no data sources selected', () => {
+    render(
+      <WorkspaceCreateActionPanel
+        formId={formId}
+        formData={{
+          ...formData,
+          selectedDataSourceConnections: [],
+        }}
+        application={mockApplication}
+        isSubmitting={false}
+        dataSourceEnabled
+      />
+    );
+    const createButton = screen.getByText('Create workspace');
+    expect(createButton.closest('button')).toBeDisabled();
+  });
+
+  it('should enable the "Create Workspace" button when no data sources selected but no data source enabled', () => {
+    render(
+      <WorkspaceCreateActionPanel
+        formId={formId}
+        formData={{
+          ...formData,
+          selectedDataSourceConnections: [],
+        }}
+        application={mockApplication}
+        isSubmitting={false}
+        dataSourceEnabled={false}
+      />
+    );
+    const createButton = screen.getByText('Create workspace');
+    expect(createButton.closest('button')).not.toBeDisabled();
+  });
+
   it('should enable the "Create Workspace" button when name and description are within the maximum length', () => {
     render(
       <WorkspaceCreateActionPanel
         formId={formId}
         formData={formData}
         application={mockApplication}
         isSubmitting={false}
+        dataSourceEnabled
       />
     );
     const createButton = screen.getByText('Create workspace');
@@ -65,9 +117,10 @@ describe('WorkspaceCreateActionPanel', () => {
     render(
       <WorkspaceCreateActionPanel
         formId={formId}
-        formData={{ name: 'test' }}
+        formData={formData}
         application={mockApplication}
         isSubmitting
+        dataSourceEnabled
       />
     );
     expect(screen.getByText('Create workspace').closest('button')).toBeDisabled();

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

@@ -21,23 +21,26 @@ import {
 
 interface WorkspaceCreateActionPanelProps {
   formId: string;
-  formData: Pick<WorkspaceFormDataState, 'name' | 'description'>;
+  formData: Pick<WorkspaceFormDataState, 'name' | 'description' | 'selectedDataSourceConnections'>;
   application: ApplicationStart;
   isSubmitting: boolean;
+  dataSourceEnabled: boolean;
 }
 
 export const WorkspaceCreateActionPanel = ({
   formId,
   formData,
   application,
   isSubmitting,
+  dataSourceEnabled,
 }: WorkspaceCreateActionPanelProps) => {
   const [isCancelModalVisible, setIsCancelModalVisible] = useState(false);
   const closeCancelModal = useCallback(() => setIsCancelModalVisible(false), []);
   const showCancelModal = useCallback(() => setIsCancelModalVisible(true), []);
   const createButtonDisabled =
     (formData.name?.length ?? 0) > MAX_WORKSPACE_NAME_LENGTH ||
-    (formData.description?.length ?? 0) > MAX_WORKSPACE_DESCRIPTION_LENGTH;
+    (formData.description?.length ?? 0) > MAX_WORKSPACE_DESCRIPTION_LENGTH ||
+    (dataSourceEnabled && formData.selectedDataSourceConnections.length === 0);
 
   return (
     <>

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

@@ -112,8 +112,9 @@ jest.spyOn(utils, 'fetchDataSourceConnections').mockImplementation(async (passed
 
 const WorkspaceCreator = ({
   isDashboardAdmin = false,
+  dataSourceEnabled = false,
   ...props
-}: Partial<WorkspaceCreatorProps & { isDashboardAdmin: boolean }>) => {
+}: Partial<WorkspaceCreatorProps & { isDashboardAdmin: boolean; dataSourceEnabled?: boolean }>) => {
   const { Provider } = createOpenSearchDashboardsReactContext({
     ...mockCoreStart,
     ...{
@@ -153,7 +154,7 @@ const WorkspaceCreator = ({
           }),
         },
       },
-      dataSourceManagement: {},
+      dataSourceManagement: dataSourceEnabled ? {} : undefined,
       navigationUI: {
         HeaderControl: () => null,
       },
@@ -374,7 +375,7 @@ describe('WorkspaceCreator', () => {
       value: 600,
     });
     const { getByTestId, getAllByText, getByText } = render(
-      <WorkspaceCreator isDashboardAdmin={true} />
+      <WorkspaceCreator isDashboardAdmin={true} dataSourceEnabled />
     );
 
     // Ensure workspace create form rendered
@@ -432,7 +433,7 @@ describe('WorkspaceCreator', () => {
       value: 600,
     });
     const { getByTestId, getAllByText, getByText } = render(
-      <WorkspaceCreator isDashboardAdmin={true} />
+      <WorkspaceCreator isDashboardAdmin={true} dataSourceEnabled />
     );
 
     // Ensure workspace create form rendered
@@ -492,6 +493,10 @@ describe('WorkspaceCreator', () => {
     await waitFor(() => {
       expect(getByTestId('workspaceForm-bottomBar-createButton')).toBeInTheDocument();
     });
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
     fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
     expect(workspaceClientCreate).toHaveBeenCalledTimes(1);
 
@@ -512,6 +517,10 @@ describe('WorkspaceCreator', () => {
     await waitFor(() => {
       expect(getByTestId('workspaceForm-bottomBar-createButton')).toBeInTheDocument();
     });
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
     fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
     jest.useFakeTimers();
     jest.runAllTimers();

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

@@ -70,7 +70,6 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
       color: euiPaletteColorBlind()[0],
       ...(defaultSelectedUseCase
         ? {
-            name: defaultSelectedUseCase.title,
             features: [getUseCaseFeatureConfig(defaultSelectedUseCase.id)],
           }
         : {}),

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

@@ -197,6 +197,7 @@ export const WorkspaceCreatorForm = (props: WorkspaceCreatorFormProps) => {
               formId={formId}
               application={application}
               isSubmitting={props.isSubmitting}
+              dataSourceEnabled={!!isDataSourceEnabled}
             />
           </div>
         </div>

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

@@ -9,6 +9,8 @@ import { WorkspaceFormSummaryPanel, FieldSummaryItem } from './workspace_form_su
 import { RightSidebarScrollField } from './utils';
 import { WorkspacePermissionItemType } from '../workspace_form';
 import { applicationServiceMock } from '../../../../../../src/core/public/mocks';
+import { DataSourceConnectionType } from '../../../common/types';
+import { WorkspacePermissionMode } from '../../../common/constants';
 
 describe('WorkspaceFormSummaryPanel', () => {
   const formData = {
@@ -18,28 +20,43 @@ describe('WorkspaceFormSummaryPanel', () => {
     description: 'This is a test workspace',
     color: '#000000',
     selectedDataSourceConnections: [
-      { id: 'data-source-1', name: 'Data Source 1' },
-      { id: 'data-source-2', name: 'Data Source 2' },
-      { id: 'data-source-3', name: 'Data Source 3' },
+      {
+        id: 'data-source-1',
+        name: 'Data Source 1',
+        type: '',
+        connectionType: DataSourceConnectionType.OpenSearchConnection,
+      },
+      {
+        id: 'data-source-2',
+        name: 'Data Source 2',
+        type: '',
+        connectionType: DataSourceConnectionType.OpenSearchConnection,
+      },
+      {
+        id: 'data-source-3',
+        name: 'Data Source 3',
+        type: '',
+        connectionType: DataSourceConnectionType.OpenSearchConnection,
+      },
     ],
     permissionSettings: [
       {
         id: 1,
         type: WorkspacePermissionItemType.User,
         userId: 'user1',
-        modes: ['library_write', 'write'],
+        modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
       },
       {
         id: 2,
         type: WorkspacePermissionItemType.Group,
         group: 'group1',
-        modes: ['library_read', 'read'],
+        modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
       },
       {
         id: 3,
         type: WorkspacePermissionItemType.User,
         userId: 'user2',
-        modes: ['library_write', 'read'],
+        modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read],
       },
     ],
   };
@@ -71,6 +88,7 @@ describe('WorkspaceFormSummaryPanel', () => {
         formId="id"
         application={applicationMock}
         isSubmitting={false}
+        dataSourceEnabled
       />
     );
 
@@ -107,6 +125,7 @@ describe('WorkspaceFormSummaryPanel', () => {
         formId="id"
         application={applicationMock}
         isSubmitting={false}
+        dataSourceEnabled
       />
     );
 
@@ -148,6 +167,7 @@ describe('WorkspaceFormSummaryPanel', () => {
         formId="id"
         application={applicationMock}
         isSubmitting={false}
+        dataSourceEnabled
       />
     );
     expect(screen.getByText('user1')).toBeInTheDocument();
@@ -161,6 +181,21 @@ describe('WorkspaceFormSummaryPanel', () => {
     fireEvent.click(screen.getByText('Show less'));
     expect(screen.queryByText('user2')).toBeNull();
   });
+
+  it('should hide "Data sources" if data source not enabled', () => {
+    render(
+      <WorkspaceFormSummaryPanel
+        formData={formData}
+        availableUseCases={availableUseCases}
+        permissionEnabled
+        formId="id"
+        application={applicationMock}
+        isSubmitting={false}
+        dataSourceEnabled={false}
+      />
+    );
+    expect(screen.queryByText('Data sources')).toBeNull();
+  });
 });
 
 describe('FieldSummaryItem', () => {

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

@@ -165,6 +165,7 @@ interface WorkspaceFormSummaryPanelProps {
   formId: string;
   application: ApplicationStart;
   isSubmitting: boolean;
+  dataSourceEnabled: boolean;
 }
 
 export const WorkspaceFormSummaryPanel = ({
@@ -174,6 +175,7 @@ export const WorkspaceFormSummaryPanel = ({
   formId,
   application,
   isSubmitting,
+  dataSourceEnabled,
 }: WorkspaceFormSummaryPanelProps) => {
   const useCase = availableUseCases.find((item) => item.id === formData.useCase);
   const userAndGroups: UserAndGroups[] = formData.permissionSettings.flatMap((setting) => {
@@ -213,18 +215,20 @@ export const WorkspaceFormSummaryPanel = ({
       <FieldSummaryItem field={RightSidebarScrollField.UseCase}>
         {useCase && <EuiText size="xs">{useCase.title}</EuiText>}
       </FieldSummaryItem>
-      <FieldSummaryItem field={RightSidebarScrollField.DataSource}>
-        {formData.selectedDataSourceConnections.length > 0 && (
-          <ExpandableTextList
-            items={formData.selectedDataSourceConnections.map((connection) => (
-              <ul key={connection.id} style={{ marginBottom: 0 }}>
-                <li>{connection.name}</li>
-              </ul>
-            ))}
-            collapseDisplayCount={3}
-          />
-        )}
-      </FieldSummaryItem>
+      {dataSourceEnabled && (
+        <FieldSummaryItem field={RightSidebarScrollField.DataSource}>
+          {formData.selectedDataSourceConnections.length > 0 && (
+            <ExpandableTextList
+              items={formData.selectedDataSourceConnections.map((connection) => (
+                <ul key={connection.id} style={{ marginBottom: 0 }}>
+                  <li>{connection.name}</li>
+                </ul>
+              ))}
+              collapseDisplayCount={3}
+            />
+          )}
+        </FieldSummaryItem>
+      )}
       {permissionEnabled && (
         <FieldSummaryItem bottomGap={false} field={RightSidebarScrollField.Collaborators}>
           {userAndGroups.length > 0 && (
@@ -240,6 +244,7 @@ export const WorkspaceFormSummaryPanel = ({
         formId={formId}
         application={application}
         isSubmitting={isSubmitting}
+        dataSourceEnabled={dataSourceEnabled}
       />
     </EuiCard>
   );

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

@@ -34,7 +34,10 @@ interface DataSourceConnectionTableProps {
   onUnlinkDataSource: (dataSources: DataSourceConnection) => void;
   onSelectionChange: (selections: DataSourceConnection[]) => void;
   dataSourceConnections: DataSourceConnection[];
-  tableProps?: Pick<EuiInMemoryTableProps<DataSourceConnection>, 'pagination' | 'search'>;
+  tableProps?: Pick<
+    EuiInMemoryTableProps<DataSourceConnection>,
+    'pagination' | 'search' | 'message'
+  >;
 }
 
 export const DataSourceConnectionTable = forwardRef<