[Workspace] Disable select data source panel for non dashboard admin in workspace create/edit page

changelogs/fragments/7213.yml

@@ -0,0 +1,2 @@
+feat:
+- Hide select data source panel for non dashboard admin in workspace create/edit page ([#7213](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7213))

src/plugins/workspace/opensearch_dashboards.json

@@ -7,6 +7,6 @@
     "savedObjects",
     "opensearchDashboardsReact"
   ],
-  "optionalPlugins": ["savedObjectsManagement","management"],
+  "optionalPlugins": ["savedObjectsManagement","management","dataSourceManagement"],
   "requiredBundles": ["opensearchDashboardsReact"]
 }

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

@@ -43,7 +43,7 @@ const dataSourcesList = [
 
 const mockCoreStart = coreMock.createStart();
 
-const WorkspaceCreator = (props: any) => {
+const WorkspaceCreator = (props: any, isDashboardAdmin = false) => {
   const { Provider } = createOpenSearchDashboardsReactContext({
     ...mockCoreStart,
     ...{
@@ -54,6 +54,9 @@ const WorkspaceCreator = (props: any) => {
           workspaces: {
             permissionEnabled: true,
           },
+          dashboards: {
+            isDashboardAdmin,
+          },
         },
         navigateToApp,
         getUrlForApp: jest.fn(() => '/app/workspace_overview'),
@@ -80,6 +83,7 @@ const WorkspaceCreator = (props: any) => {
           }),
         },
       },
+      dataSourceManagement: {},
     },
   });
 
@@ -292,6 +296,7 @@ describe('WorkspaceCreator', () => {
     const { getByTestId, getByTitle, getByText } = render(
       <WorkspaceCreator
         workspaceConfigurableApps$={new BehaviorSubject([...PublicAPPInfoMap.values()])}
+        isDashboardAdmin={true}
       />
     );
     const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');

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

@@ -17,15 +17,26 @@ import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 import { WorkspaceClient } from '../../workspace_client';
 import { convertPermissionSettingsToPermissions } from '../workspace_form';
 import { DataSource } from '../../../common/types';
+import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 
 export interface WorkspaceCreatorProps {
   workspaceConfigurableApps$?: BehaviorSubject<PublicAppInfo[]>;
 }
 
 export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
   const {
-    services: { application, notifications, http, workspaceClient, savedObjects },
-  } = useOpenSearchDashboards<{ workspaceClient: WorkspaceClient }>();
+    services: {
+      application,
+      notifications,
+      http,
+      workspaceClient,
+      savedObjects,
+      dataSourceManagement,
+    },
+  } = useOpenSearchDashboards<{
+    workspaceClient: WorkspaceClient;
+    dataSourceManagement?: DataSourceManagementPluginSetup;
+  }>();
   const workspaceConfigurableApps = useObservable(
     props.workspaceConfigurableApps$ ?? of(undefined)
   );
@@ -99,6 +110,7 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
               workspaceConfigurableApps={workspaceConfigurableApps}
               permissionEnabled={isPermissionEnabled}
               permissionLastAdminItemDeletable
+              dataSourceManagement={dataSourceManagement}
             />
           )}
         </EuiPageContent>

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

@@ -97,9 +97,14 @@ export const SelectDataSourcePanel = ({
       </EuiText>
       <EuiSpacer size="s" />
       {selectedDataSources.map(({ id, title }, index) => (
-        <EuiFormRow key={index} isInvalid={!!errors?.[index]} error={errors?.[index].message}>
-          <EuiFlexGroup gutterSize="l">
-            <EuiFlexItem grow={false}>
+        <EuiFormRow
+          key={index}
+          isInvalid={!!errors?.[index]}
+          error={errors?.[index]?.message}
+          fullWidth
+        >
+          <EuiFlexGroup alignItems="flexEnd" gutterSize="m">
+            <EuiFlexItem style={{ maxWidth: 400 }}>
               <EuiComboBox
                 data-test-subj="workspaceForm-select-dataSource-comboBox"
                 singleSelection
@@ -116,10 +121,9 @@ export const SelectDataSourcePanel = ({
                 }
                 onChange={(selectedOptions) => handleSelect(selectedOptions, index)}
                 placeholder="Select"
-                style={{ width: 200 }}
               />
             </EuiFlexItem>
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem style={{ maxWidth: 332 }}>
               <EuiButtonIcon
                 color="danger"
                 aria-label="Delete data source"

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

@@ -11,6 +11,7 @@ import type {
 import type { WorkspacePermissionMode } from '../../../common/constants';
 import type { WorkspaceOperationType, WorkspacePermissionItemType } from './constants';
 import { DataSource } from '../../../common/types';
+import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 
 export interface WorkspaceUserPermissionSetting {
   id: number;
@@ -85,4 +86,5 @@ export interface WorkspaceFormProps {
   operationType: WorkspaceOperationType;
   workspaceConfigurableApps?: PublicAppInfo[];
   permissionEnabled?: boolean;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
 }

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

@@ -0,0 +1,65 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { WorkspaceForm } from './workspace_form';
+import { coreMock } from '../../../../../core/public/mocks';
+import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
+
+const mockCoreStart = coreMock.createStart();
+
+const setup = (
+  isDashboardAdmin: boolean,
+  dataSourceManagement: DataSourceManagementPluginSetup | undefined
+) => {
+  const application = {
+    ...mockCoreStart.application,
+    capabilities: {
+      ...mockCoreStart.application.capabilities,
+      dashboards: {
+        isDashboardAdmin,
+      },
+    },
+  };
+  const savedObjects = {
+    ...mockCoreStart.savedObjects,
+    client: {
+      ...mockCoreStart.savedObjects.client,
+      find: jest.fn().mockImplementation(() => {
+        return new Promise(() => {});
+      }),
+    },
+  };
+
+  return render(
+    <WorkspaceForm
+      application={application}
+      savedObjects={savedObjects}
+      dataSourceManagement={dataSourceManagement}
+    />
+  );
+};
+
+const mockDataSourceManagementSetup = ({} as unknown) as DataSourceManagementPluginSetup;
+
+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();
+  });
+
+  it('should not display data source panel for non dashboard admin', () => {
+    const { queryByText } = setup(false, mockDataSourceManagementSetup);
+
+    expect(queryByText('Associate data source')).not.toBeInTheDocument();
+  });
+  it('should not display data source panel when data source is disabled', () => {
+    const { queryByText } = setup(true, undefined);
+
+    expect(queryByText('Associate data source')).not.toBeInTheDocument();
+  });
+});

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

@@ -35,6 +35,7 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
     operationType,
     permissionEnabled,
     workspaceConfigurableApps,
+    dataSourceManagement: isDataSourceEnabled,
   } = props;
   const {
     formId,
@@ -56,6 +57,7 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
   const disabledUserOrGroupInputIdsRef = useRef(
     defaultValues?.permissionSettings?.map((item) => item.id) ?? []
   );
+  const isDashboardAdmin = application?.capabilities?.dashboards?.isDashboardAdmin ?? false;
 
   return (
     <EuiForm id={formId} onSubmit={handleFormSubmit} component="form">
@@ -188,22 +190,26 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
         </EuiPanel>
       )}
       <EuiSpacer />
-      <EuiPanel>
-        <EuiTitle size="s">
-          <h2>
-            {i18n.translate('workspace.form.selectDataSource.title', {
-              defaultMessage: 'Associate data source',
-            })}
-          </h2>
-        </EuiTitle>
-        <SelectDataSourcePanel
-          errors={formErrors.selectedDataSources}
-          onChange={setSelectedDataSources}
-          savedObjects={savedObjects}
-          selectedDataSources={formData.selectedDataSources}
-          data-test-subj={`workspaceForm-dataSourcePanel`}
-        />
-      </EuiPanel>
+
+      {/* SelectDataSourcePanel is only visible for dashboard admin and when data source is enabled*/}
+      {isDashboardAdmin && isDataSourceEnabled && (
+        <EuiPanel>
+          <EuiTitle size="s">
+            <h2>
+              {i18n.translate('workspace.form.selectDataSource.title', {
+                defaultMessage: 'Associate data source',
+              })}
+            </h2>
+          </EuiTitle>
+          <SelectDataSourcePanel
+            errors={formErrors.selectedDataSources}
+            onChange={setSelectedDataSources}
+            savedObjects={savedObjects}
+            selectedDataSources={formData.selectedDataSources}
+            data-test-subj={`workspaceForm-dataSourcePanel`}
+          />
+        </EuiPanel>
+      )}
       <EuiSpacer />
       {operationType === WorkspaceOperationType.Create && (
         <WorkspaceCreateActionPanel formId={formId} application={application} />

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

@@ -81,6 +81,9 @@ const WorkspaceUpdater = (props: any) => {
           workspaces: {
             permissionEnabled: true,
           },
+          dashboards: {
+            isDashboardAdmin: true,
+          },
         },
         navigateToApp,
         getUrlForApp: jest.fn(() => '/app/workspace_overview'),
@@ -108,6 +111,7 @@ const WorkspaceUpdater = (props: any) => {
           }),
         },
       },
+      dataSourceManagement: {},
     },
   });
 

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

@@ -23,6 +23,7 @@ import {
 } from '../workspace_form';
 import { getDataSourcesList } from '../../utils';
 import { DataSource } from '../../../common/types';
+import { DataSourceManagementPluginSetup } from '../../../../../plugins/data_source_management/public';
 
 export interface WorkspaceUpdaterProps {
   workspaceConfigurableApps$?: BehaviorSubject<PublicAppInfo[]>;
@@ -50,8 +51,19 @@ type FormDataFromWorkspace = ReturnType<typeof getFormDataFromWorkspace> & {
 
 export const WorkspaceUpdater = (props: WorkspaceUpdaterProps) => {
   const {
-    services: { application, workspaces, notifications, http, workspaceClient, savedObjects },
-  } = useOpenSearchDashboards<{ workspaceClient: WorkspaceClient }>();
+    services: {
+      application,
+      workspaces,
+      notifications,
+      http,
+      workspaceClient,
+      savedObjects,
+      dataSourceManagement,
+    },
+  } = useOpenSearchDashboards<{
+    workspaceClient: WorkspaceClient;
+    dataSourceManagement?: DataSourceManagementPluginSetup;
+  }>();
   const isPermissionEnabled = application?.capabilities.workspaces.permissionEnabled;
 
   const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
@@ -153,6 +165,7 @@ export const WorkspaceUpdater = (props: WorkspaceUpdaterProps) => {
               workspaceConfigurableApps={workspaceConfigurableApps}
               permissionEnabled={isPermissionEnabled}
               savedObjects={savedObjects}
+              dataSourceManagement={dataSourceManagement}
             />
           )}
         </EuiPageContent>

src/plugins/workspace/public/plugin.ts

@@ -35,6 +35,7 @@ import { SavedObjectsManagementPluginSetup } from '../../../plugins/saved_object
 import { ManagementSetup } from '../../../plugins/management/public';
 import { WorkspaceMenu } from './components/workspace_menu/workspace_menu';
 import { getWorkspaceColumn } from './components/workspace_column';
+import { DataSourceManagementPluginSetup } from '../../../plugins/data_source_management/public';
 import {
   filterWorkspaceConfigurableApps,
   isAppAccessibleInWorkspace,
@@ -50,6 +51,7 @@ type WorkspaceAppType = (
 interface WorkspacePluginSetupDeps {
   savedObjectsManagement?: SavedObjectsManagementPluginSetup;
   management?: ManagementSetup;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
 }
 
 export class WorkspacePlugin implements Plugin<{}, {}, WorkspacePluginSetupDeps> {
@@ -181,7 +183,7 @@ export class WorkspacePlugin implements Plugin<{}, {}, WorkspacePluginSetupDeps>
 
   public async setup(
     core: CoreSetup,
-    { savedObjectsManagement, management }: WorkspacePluginSetupDeps
+    { savedObjectsManagement, management, dataSourceManagement }: WorkspacePluginSetupDeps
   ) {
     const workspaceClient = new WorkspaceClient(core.http, core.workspaces);
     await workspaceClient.init();
@@ -242,6 +244,7 @@ export class WorkspacePlugin implements Plugin<{}, {}, WorkspacePluginSetupDeps>
       const services = {
         ...coreStart,
         workspaceClient,
+        dataSourceManagement,
       };
 
       return renderApp(params, services, {

src/plugins/workspace/public/types.ts

@@ -5,5 +5,9 @@
 
 import { CoreStart } from '../../../core/public';
 import { WorkspaceClient } from './workspace_client';
+import { DataSourceManagementPluginSetup } from '../../../plugins/data_source_management/public';
 
-export type Services = CoreStart & { workspaceClient: WorkspaceClient };
+export type Services = CoreStart & {
+  workspaceClient: WorkspaceClient;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
+};