[DataSource] Restrict to manage data source on the DSM UI

changelogs/fragments/7214.yml

@@ -0,0 +1,2 @@
+feat:
+- [DataSource] Restrict to edit data source on the DSM UI. ([#7214](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7214))

config/opensearch_dashboards.yml

@@ -321,6 +321,12 @@
 #   AWSSigV4:
 #     enabled: true
 
+# Optional setting that controls the permissions of data source to create, update and delete.
+# "read_only": The data source is readonly for all users including OSD admin.
+# "admin_only": The data source can only be edited by OSD admin.
+# "none": The data source can be edited by all users. Default to "none".
+# data_source.editMode: "none"
+
 # Set the value of this setting to false to hide the help menu link to the OpenSearch Dashboards user survey
 # opensearchDashboards.survey.url: "https://survey.opensearch.org"
 

src/plugins/data_source/common/data_sources/types.ts

@@ -60,3 +60,9 @@ export enum DataSourceEngineType {
   Elasticsearch = 'Elasticsearch',
   NA = 'No Engine Type Available',
 }
+
+export enum EditMode {
+  ReadOnly = 'read_only',
+  AdminOnly = 'admin_only',
+  None = 'none',
+}

src/plugins/data_source/config.ts

@@ -59,6 +59,10 @@ export const configSchema = schema.object({
       enabled: schema.boolean({ defaultValue: true }),
     }),
   }),
+  editMode: schema.oneOf(
+    [schema.literal('read_only'), schema.literal('admin_only'), schema.literal('none')],
+    { defaultValue: 'none' }
+  ),
 });
 
 export type DataSourcePluginConfigType = TypeOf<typeof configSchema>;

src/plugins/data_source/server/plugin.ts

@@ -33,6 +33,8 @@ import { registerTestConnectionRoute } from './routes/test_connection';
 import { registerFetchDataSourceMetaDataRoute } from './routes/fetch_data_source_metadata';
 import { AuthenticationMethodRegistry, IAuthenticationMethodRegistry } from './auth_registry';
 import { CustomApiSchemaRegistry } from './schema_registry';
+import { EditMode } from '../common/data_sources';
+import { getWorkspaceState } from '../../../../src/core/server/utils';
 
 export class DataSourcePlugin implements Plugin<DataSourcePluginSetup, DataSourcePluginStart> {
   private readonly logger: Logger;
@@ -81,6 +83,26 @@ export class DataSourcePlugin implements Plugin<DataSourcePluginSetup, DataSourc
       dataSourceSavedObjectsClientWrapper.wrapperFactory
     );
 
+    const { editMode } = config;
+    core.capabilities.registerProvider(() => ({
+      dataSource: {
+        canEdit: false,
+        canAssign: false,
+      },
+    }));
+
+    core.capabilities.registerSwitcher((request) => {
+      const { requestWorkspaceId, isDashboardAdmin } = getWorkspaceState(request);
+      // User can not edit data source in the workspace.
+      const canEdit =
+        (editMode === EditMode.None && !requestWorkspaceId) ||
+        (editMode === EditMode.AdminOnly && isDashboardAdmin !== false && !requestWorkspaceId);
+      // Only OSD admin user can assign data source in the workspace.
+      const canAssign = !!requestWorkspaceId && isDashboardAdmin !== false;
+
+      return { dataSource: { canEdit, canAssign } };
+    });
+
     core.logging.configure(
       this.config$.pipe<LoggerContextConfigInput>(
         map((dataSourceConfig) => ({

src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx

@@ -41,6 +41,7 @@ describe('DataSourceHomePanel', () => {
       http: {},
       savedObjects: {},
       uiSettings: {},
+      application: { capabilities: { dataSource: { canEdit: true } } },
     },
   };
 

src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx

@@ -30,11 +30,17 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
   featureFlagStatus,
   ...props
 }) => {
-  const { setBreadcrumbs, notifications, http, savedObjects, uiSettings } = useOpenSearchDashboards<
-    DataSourceManagementContext
-  >().services;
+  const {
+    setBreadcrumbs,
+    notifications,
+    http,
+    savedObjects,
+    uiSettings,
+    application,
+  } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
   const [selectedTabId, setSelectedTabId] = useState('manageDirectQueryDataSources');
+  const canEditDataSource = !!application.capabilities?.dataSource?.canEdit;
 
   useEffect(() => {
     setBreadcrumbs(getListBreadcrumbs());
@@ -80,9 +86,11 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
               <EuiFlexItem grow={false}>
                 <DataSourceHeader history={props.history} />
               </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <CreateButton history={props.history} dataTestSubj="createDataSourceButton" />
-              </EuiFlexItem>
+              {canEditDataSource ? (
+                <EuiFlexItem grow={false}>
+                  <CreateButton history={props.history} dataTestSubj="createDataSourceButton" />
+                </EuiFlexItem>
+              ) : null}
             </EuiFlexGroup>
           </EuiPageHeader>
         </EuiFlexItem>

src/plugins/data_source_management/public/components/data_source_table/data_source_table.test.tsx

@@ -24,7 +24,10 @@ const tableColumnHeaderButtonIdentifier = 'EuiTableHeaderCell .euiTableHeaderBut
 const emptyStateIdentifier = '[data-test-subj="datasourceTableEmptyState"]';
 
 describe('DataSourceTable', () => {
-  const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+  const mockedContext = {
+    ...mockManagementPlugin.createDataSourceManagementContext(),
+    application: { capabilities: { dataSource: { canEdit: true } } },
+  };
   const uiSettings = mockedContext.uiSettings;
   let component: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
   const history = (scopedHistoryMock.create() as unknown) as ScopedHistory;

src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx

@@ -53,6 +53,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
     savedObjects,
     notifications: { toasts },
     uiSettings,
+    application,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
   /* Component state variables */
@@ -61,6 +62,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
   const [isDeleting, setIsDeleting] = React.useState<boolean>(false);
   const [confirmDeleteVisible, setConfirmDeleteVisible] = React.useState(false);
+  const canEditDataSource = !!application.capabilities?.dataSource?.canEdit;
 
   /* useEffectOnce hook to avoid these methods called multiple times when state is updated. */
   useEffectOnce(() => {
@@ -111,11 +113,11 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
   };
 
   const renderToolsRight = () => {
-    return (
+    return canEditDataSource ? (
       <EuiFlexItem key="delete" grow={false}>
         {renderDeleteButton()}
       </EuiFlexItem>
-    );
+    ) : null;
   };
 
   const search = {
@@ -323,7 +325,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
             />
           </EuiText>
           <EuiSpacer />
-          {createButtonEmptyState}
+          {canEditDataSource ? createButtonEmptyState : null}
         </EuiPanel>
         <EuiSpacer size="l" />
       </>

src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.test.tsx

@@ -90,6 +90,7 @@ describe('Datasource Management: Edit Datasource Form', () => {
             onSetDefaultDataSource={mockFn}
             handleTestConnection={mockFn}
             displayToastMessage={mockFn}
+            canEditDataSource={true}
           />
         ),
         {
@@ -261,6 +262,7 @@ describe('Datasource Management: Edit Datasource Form', () => {
             handleSubmit={mockFn}
             handleTestConnection={mockFn}
             displayToastMessage={mockFn}
+            canEditDataSource={true}
           />
         ),
         {
@@ -373,6 +375,7 @@ describe('Datasource Management: Edit Datasource Form', () => {
             onSetDefaultDataSource={mockFn}
             handleTestConnection={mockFn}
             displayToastMessage={mockFn}
+            canEditDataSource={true}
           />
         ),
         {
@@ -593,6 +596,7 @@ describe('With Registered Authentication', () => {
           onSetDefaultDataSource={jest.fn()}
           handleTestConnection={jest.fn()}
           displayToastMessage={jest.fn()}
+          canEditDataSource={true}
         />
       ),
       {
@@ -634,6 +638,7 @@ describe('With Registered Authentication', () => {
           onSetDefaultDataSource={jest.fn()}
           handleTestConnection={jest.fn()}
           displayToastMessage={jest.fn()}
+          canEditDataSource={true}
         />
       ),
       {

src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx

@@ -56,6 +56,7 @@ export interface EditDataSourceProps {
   onDeleteDataSource?: () => Promise<void>;
   onSetDefaultDataSource: () => Promise<void>;
   displayToastMessage: (info: ToastMessageItem) => void;
+  canEditDataSource: boolean;
 }
 export interface EditDataSourceState {
   formErrorsByField: CreateEditDataSourceValidation;
@@ -644,6 +645,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
         onClickTestConnection={this.onClickTestConnection}
         onClickSetDefault={this.setDefaultDataSource}
         isDefault={this.props.isDefault}
+        canEditDataSource={this.props.canEditDataSource}
       />
     );
   };
@@ -1119,24 +1121,26 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
               />
             </EuiButtonEmpty>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              className="mgtAdvancedSettingsForm__button"
-              disabled={!this.isFormValid()}
-              color="secondary"
-              fill
-              size="s"
-              iconType="check"
-              isLoading={this.state.isLoading}
-              onClick={this.onClickUpdateDataSource}
-              data-test-subj="datasource-edit-saveButton"
-            >
-              <FormattedMessage
-                id="dataSourcesManagement.editDataSource.saveButtonLabel"
-                defaultMessage="Save changes"
-              />
-            </EuiButton>
-          </EuiFlexItem>
+          {this.props.canEditDataSource ? (
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                className="mgtAdvancedSettingsForm__button"
+                disabled={!this.isFormValid()}
+                color="secondary"
+                fill
+                size="s"
+                iconType="check"
+                isLoading={this.state.isLoading}
+                onClick={this.onClickUpdateDataSource}
+                data-test-subj="datasource-edit-saveButton"
+              >
+                <FormattedMessage
+                  id="dataSourcesManagement.editDataSource.saveButtonLabel"
+                  defaultMessage="Save changes"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+          ) : null}
         </EuiFlexGroup>
       </EuiBottomBar>
     );

src/plugins/data_source_management/public/components/edit_data_source/components/header/header.test.tsx

@@ -34,6 +34,7 @@ describe('Datasource Management: Edit Datasource Header', () => {
             dataSourceName={dataSourceName}
             onClickSetDefault={mockFn}
             isDefault={false}
+            canEditDataSource={true}
           />
         ),
         {
@@ -87,6 +88,7 @@ describe('Datasource Management: Edit Datasource Header', () => {
             dataSourceName={dataSourceName}
             onClickSetDefault={mockFn}
             isDefault={false}
+            canEditDataSource={true}
           />
         ),
         {
@@ -116,6 +118,7 @@ describe('Datasource Management: Edit Datasource Header', () => {
             dataSourceName={dataSourceName}
             onClickSetDefault={onClickSetDefault}
             isDefault={isDefaultDataSourceState}
+            canEditDataSource={true}
           />
         ),
         {
@@ -152,6 +155,7 @@ describe('Datasource Management: Edit Datasource Header', () => {
             dataSourceName={dataSourceName}
             onClickSetDefault={onClickSetDefault}
             isDefault={isDefaultDataSourceState}
+            canEditDataSource={true}
           />
         ),
         {

src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx

@@ -29,6 +29,7 @@ export const Header = ({
   onClickSetDefault,
   dataSourceName,
   isDefault,
+  canEditDataSource,
 }: {
   showDeleteIcon: boolean;
   isFormValid: boolean;
@@ -37,6 +38,7 @@ export const Header = ({
   onClickSetDefault: () => void;
   dataSourceName: string;
   isDefault: boolean;
+  canEditDataSource: boolean;
 }) => {
   /* State Variables */
   const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
@@ -175,11 +177,13 @@ export const Header = ({
       <EuiFlexItem grow={false}>
         <EuiFlexGroup alignItems="baseline" gutterSize="m" responsive={false}>
           {/* Test default button */}
-          <EuiFlexItem grow={false}>{renderDefaultIcon()}</EuiFlexItem>
+          {canEditDataSource ? <EuiFlexItem grow={false}>{renderDefaultIcon()}</EuiFlexItem> : null}
           {/* Test connection button */}
           <EuiFlexItem grow={false}>{renderTestConnectionButton()}</EuiFlexItem>
           {/* Delete icon button */}
-          <EuiFlexItem grow={false}>{showDeleteIcon ? renderDeleteButton() : null}</EuiFlexItem>
+          {canEditDataSource ? (
+            <EuiFlexItem grow={false}>{showDeleteIcon ? renderDeleteButton() : null}</EuiFlexItem>
+          ) : null}
         </EuiFlexGroup>
       </EuiFlexItem>
     </EuiFlexGroup>

src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx

@@ -28,7 +28,10 @@ const formIdentifier = 'EditDataSourceForm';
 const notFoundIdentifier = '[data-test-subj="dataSourceNotFound"]';
 
 describe('Datasource Management: Edit Datasource Wizard', () => {
-  const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+  const mockedContext = {
+    ...mockManagementPlugin.createDataSourceManagementContext(),
+    application: { capabilities: { dataSource: { canEdit: true } } },
+  };
   const uiSettings = mockedContext.uiSettings;
   mockedContext.authenticationMethodRegistry.registerAuthenticationMethod(
     noAuthCredentialAuthMethod

src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx

@@ -46,6 +46,7 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
     setBreadcrumbs,
     http,
     notifications: { toasts },
+    application,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
   const dataSourceID: string = props.match.params.id;
 
@@ -162,6 +163,7 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
             handleSubmit={handleSubmit}
             displayToastMessage={handleDisplayToastMessage}
             handleTestConnection={handleTestConnection}
+            canEditDataSource={!!application.capabilities?.dataSource?.canEdit}
           />
         ) : null}
         {isLoading || !dataSource?.endpoint ? <LoadingMask /> : null}