Disable input in edit data source when data_source.manageableBy is none

changelogs/fragments/7307.yml

@@ -0,0 +1,2 @@
+feat:
+- Disable inputs in edit data source screen when data_source.manageableBy is none ([#7307](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7307))

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

@@ -586,6 +586,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
       <>
         <EuiButton
           onClick={this.onClickUpdatePassword}
+          disabled={!this.props.canManageDataSource}
           data-test-subj="editDatasourceUpdatePasswordBtn"
         >
           {
@@ -601,6 +602,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
             username={this.state.auth?.credentials?.username || ''}
             handleUpdatePassword={this.updatePassword}
             closeUpdatePasswordModal={this.closePasswordModal}
+            canManageDataSource={this.props.canManageDataSource}
           />
         ) : null}
       </>
@@ -613,6 +615,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
         <EuiButton
           onClick={this.onClickUpdateAwsCredential}
           data-test-subj="editDatasourceUpdateAwsCredentialBtn"
+          disabled={!this.props.canManageDataSource}
         >
           {
             <FormattedMessage
@@ -628,6 +631,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
             service={this.state.auth.credentials!.service}
             handleUpdateAwsCredential={this.updateAwsCredential}
             closeUpdateAwsCredentialModal={this.closeAwsCredentialModal}
+            canManageDataSource={this.props.canManageDataSource}
           />
         ) : null}
       </>
@@ -725,6 +729,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
               isInvalid={!!this.state.formErrorsByField.title.length}
               onChange={this.onChangeTitle}
               onBlur={this.validateTitle}
+              disabled={!this.props.canManageDataSource}
             />
           </EuiFormRow>
           {/* Description */}
@@ -745,6 +750,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
                 }
               )}
               onChange={this.onChangeDescription}
+              disabled={!this.props.canManageDataSource}
             />
           </EuiFormRow>
         </EuiDescribedFormGroup>
@@ -837,7 +843,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
             options={this.authOptions}
             valueOfSelected={this.state.auth.type}
             onChange={(value) => this.onChangeAuthType(value)}
-            disabled={this.authOptions.length <= 1}
+            disabled={this.authOptions.length <= 1 || !this.props.canManageDataSource}
             name="Credential"
             data-test-subj="editDataSourceSelectAuthType"
           />
@@ -883,6 +889,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
             value={this.state.auth.credentials?.region || ''}
             onChange={this.onChangeRegion}
             onBlur={this.validateRegion}
+            disabled={!this.props.canManageDataSource}
             data-test-subj="editDataSourceFormRegionField"
             name="dataSourceRegion"
           />
@@ -895,6 +902,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
           <EuiSuperSelect
             options={sigV4ServiceOptions}
             valueOfSelected={this.state.auth.credentials?.service}
+            disabled={!this.props.canManageDataSource}
             onChange={(value) => this.onChangeSigV4ServiceName(value)}
             name="ServiceName"
             data-test-subj="editDataSourceFormSigV4ServiceTypeSelect"
@@ -989,6 +997,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
             isInvalid={!!this.state.formErrorsByField.createCredential?.username?.length}
             onChange={this.onChangeUsername}
             onBlur={this.validateUsername}
+            disabled={!this.props.canManageDataSource}
           />
         </EuiFormRow>
 
@@ -1018,7 +1027,10 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
                 spellCheck={false}
                 onChange={this.onChangePassword}
                 onBlur={this.validatePassword}
-                disabled={this.props.existingDataSource.auth.type === AuthType.UsernamePasswordType}
+                disabled={
+                  this.props.existingDataSource.auth.type === AuthType.UsernamePasswordType ||
+                  !this.props.canManageDataSource
+                }
                 data-test-subj="updateDataSourceFormPasswordField"
               />
             </EuiFlexItem>

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

@@ -20,6 +20,7 @@ describe('UpdateAwsCredentialModal', () => {
     service: SigV4ServiceName.OpenSearch,
     handleUpdateAwsCredential: mockHandleUpdateAwsCredential,
     closeUpdateAwsCredentialModal: mockCloseUpdateAwsCredentialModal,
+    canManageDataSource: true,
   };
 
   it('updates new access key state on input change', () => {

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

@@ -28,13 +28,15 @@ export interface UpdateAwsCredentialModalProps {
   service: SigV4ServiceName;
   handleUpdateAwsCredential: (accessKey: string, secretKey: string) => void;
   closeUpdateAwsCredentialModal: () => void;
+  canManageDataSource: boolean;
 }
 
 export const UpdateAwsCredentialModal = ({
   region,
   service,
   handleUpdateAwsCredential,
   closeUpdateAwsCredentialModal,
+  canManageDataSource,
 }: UpdateAwsCredentialModalProps) => {
   /* State Variables */
   const [newAccessKey, setNewAccessKey] = useState<string>('');
@@ -134,6 +136,7 @@ export const UpdateAwsCredentialModal = ({
                 spellCheck={false}
                 onChange={(e) => setNewAccessKey(e.target.value)}
                 onBlur={validateNewAccessKey}
+                disabled={!canManageDataSource}
               />
             </EuiFormRow>
 
@@ -159,6 +162,7 @@ export const UpdateAwsCredentialModal = ({
                 spellCheck={false}
                 onChange={(e) => setNewSecretKey(e.target.value)}
                 onBlur={validateNewSecretKey}
+                disabled={!canManageDataSource}
               />
             </EuiFormRow>
           </EuiForm>

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

@@ -30,6 +30,7 @@ describe('Datasource Management: Update Stored Password Modal', () => {
           username={mockUserName}
           handleUpdatePassword={mockFn}
           closeUpdatePasswordModal={mockFn}
+          canManageDataSource={true}
         />
       ),
       {

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

@@ -25,12 +25,14 @@ export interface UpdatePasswordModalProps {
   username: string;
   handleUpdatePassword: (password: string) => void;
   closeUpdatePasswordModal: () => void;
+  canManageDataSource: boolean;
 }
 
 export const UpdatePasswordModal = ({
   username,
   handleUpdatePassword,
   closeUpdatePasswordModal,
+  canManageDataSource,
 }: UpdatePasswordModalProps) => {
   /* State Variables */
   const [newPassword, setNewPassword] = useState<string>('');
@@ -128,6 +130,7 @@ export const UpdatePasswordModal = ({
                 spellCheck={false}
                 onChange={(e) => setNewPassword(e.target.value)}
                 onBlur={validateNewPassword}
+                disabled={!canManageDataSource}
               />
             </EuiFormRow>
             {/* Password */}
@@ -153,6 +156,7 @@ export const UpdatePasswordModal = ({
                 spellCheck={false}
                 onChange={(e) => setConfirmNewPassword(e.target.value)}
                 onBlur={validateConfirmNewPassword}
+                disabled={!canManageDataSource}
               />
             </EuiFormRow>
           </EuiForm>