EPMRPP-81141 || addition to fix for EPMRPP-81141: form buttons are hidden too

app/src/components/integrations/elements/integrationSettings/connectionSection/connectionSection.jsx

@@ -25,8 +25,6 @@ import Parser from 'html-react-parser';
 import { showModalAction } from 'controllers/modal';
 import { PLUGIN_NAME_TITLES } from 'components/integrations/constants';
 import { namedProjectIntegrationsSelector } from 'controllers/plugins';
-import { activeProjectRoleSelector, userAccountRoleSelector } from 'controllers/user';
-import { canUpdateSettings } from 'common/utils/permissions';
 import { PLUGINS_PAGE_EVENTS, SETTINGS_PAGE_EVENTS } from 'components/main/analytics/events';
 import { SystemMessage } from 'componentLibrary/systemMessage';
 import PencilIcon from 'common/img/newIcons/pencil-inline.svg';
@@ -79,8 +77,6 @@ const messages = defineMessages({
 @connect(
   (state) => ({
     projectIntegrations: namedProjectIntegrationsSelector(state),
-    accountRole: userAccountRoleSelector(state),
-    userRole: activeProjectRoleSelector(state),
   }),
   {
     showModalAction,
@@ -93,8 +89,6 @@ export class ConnectionSection extends Component {
     intl: PropTypes.object.isRequired,
     showModalAction: PropTypes.func.isRequired,
     projectIntegrations: PropTypes.object.isRequired,
-    accountRole: PropTypes.string.isRequired,
-    userRole: PropTypes.string.isRequired,
     onRemoveIntegration: PropTypes.func.isRequired,
     testConnection: PropTypes.func,
     blocked: PropTypes.bool,
@@ -105,6 +99,7 @@ export class ConnectionSection extends Component {
       trackEvent: PropTypes.func,
       getTrackingData: PropTypes.func,
     }).isRequired,
+    isAbleToEditByRole: PropTypes.bool.isRequired,
     isGlobal: PropTypes.bool,
     data: PropTypes.shape({
       creationDate: PropTypes.number,
@@ -169,13 +164,11 @@ export class ConnectionSection extends Component {
       connected,
       projectIntegrations,
       pluginName,
-      accountRole,
-      userRole,
+      isAbleToEditByRole,
       data: { name, creator, creationDate },
     } = this.props;
 
     const availableProjectIntegrations = projectIntegrations[pluginName] || [];
-    const isAbleToEdit = canUpdateSettings(accountRole, userRole);
 
     return (
       <>
@@ -232,7 +225,7 @@ export class ConnectionSection extends Component {
             </p>
             {editAuthConfig && editAuthConfig.content}
           </div>
-          {isAbleToEdit && (
+          {isAbleToEditByRole && (
             <div className={cx('buttons-block')}>
               {editAuthConfig && !blocked && (
                 <button onClick={this.onEditAuth} className={cx('action-button')}>

app/src/components/integrations/elements/integrationSettings/integrationForm/integrationForm.jsx

@@ -60,6 +60,7 @@ export class IntegrationForm extends Component {
     connected: PropTypes.bool.isRequired,
     isEmptyConfiguration: PropTypes.bool.isRequired,
     pluginName: PropTypes.string.isRequired,
+    isAbleToEditByRole: PropTypes.bool.isRequired,
     isGlobal: PropTypes.bool,
     tracking: PropTypes.shape({
       trackEvent: PropTypes.func,
@@ -122,6 +123,7 @@ export class IntegrationForm extends Component {
       isEmptyConfiguration,
       isGlobal,
       pluginName,
+      isAbleToEditByRole,
     } = this.props;
     const isSupportsMultipleInstances = isIntegrationSupportsMultipleInstances(pluginName);
 
@@ -155,7 +157,7 @@ export class IntegrationForm extends Component {
                 )}
               </div>
             )}
-            {!blocked && (
+            {!blocked && isAbleToEditByRole && (
               <div className={cx('controls-block')}>
                 {disabled ? (
                   <Button onClick={this.toggleDisabled} disabled={shouldFieldsBeHidden}>

app/src/components/integrations/elements/integrationSettings/integrationSettings.jsx

@@ -23,7 +23,12 @@ import { fetch } from 'common/utils';
 import { URLS } from 'common/urls';
 import { projectIdSelector, querySelector, PROJECT_SETTINGS_TAB_PAGE } from 'controllers/pages';
 import { omit } from 'common/utils/omit';
-import { activeProjectSelector } from 'controllers/user';
+import {
+  activeProjectSelector,
+  activeProjectRoleSelector,
+  userAccountRoleSelector,
+} from 'controllers/user';
+import { canUpdateSettings } from 'common/utils/permissions';
 import {
   removeIntegrationAction,
   namedGlobalIntegrationsSelector,
@@ -47,6 +52,9 @@ export const IntegrationSettings = (props) => {
   const projectIntegrations = useSelector(namedProjectIntegrationsSelector);
   const projectId = useSelector(projectIdSelector);
   const activeProject = useSelector(activeProjectSelector);
+  const accountRole = useSelector(userAccountRoleSelector);
+  const userRole = useSelector(activeProjectRoleSelector);
+  const isAbleToEditByRole = canUpdateSettings(accountRole, userRole);
   const query = useSelector(querySelector);
   const dispatch = useDispatch();
   const { trackEvent } = useTracking();
@@ -130,6 +138,7 @@ export const IntegrationSettings = (props) => {
             pluginName={pluginName}
             data={data}
             isGlobal={isGlobal}
+            isAbleToEditByRole={isAbleToEditByRole}
           />
           <IntegrationForm
             form={formKey}
@@ -140,6 +149,7 @@ export const IntegrationSettings = (props) => {
             onSubmit={onUpdate}
             formFieldsComponent={formFieldsComponent}
             isEmptyConfiguration={isEmptyConfiguration}
+            isAbleToEditByRole={isAbleToEditByRole}
           />
         </>
       )}