fix(plugins): show Configure/View on legacy plugin depending on project access (#90881)

Unlike integrations, plugins (legacy integrations) have project level
access. This PR adjusts UI to reflect that considering team level roles
as well.

Affects two views:
- projectPlugins:
http://localhost:8000/settings/abc/projects/python-flask/plugins/
- pluginDetailedView:
http://localhost:8000/settings/abc/plugins/redmine/?tab=configurations

This is not a security fix but a frontend bug fix.

# Example
A member has these team-level roles:
<img width="656" alt="image"
src="https://github.com/user-attachments/assets/b2f439d4-c51d-4b7b-a7a2-342fb480cfd1"
/>

## projectPlugins
**Before.** There is no link on "Configure plugin".
<img width="897" alt="image"
src="https://github.com/user-attachments/assets/1abfb051-4cea-4b6e-a272-fe2c579bf554"
/>
**After.** Team contributor has read project-level access to
`python-flask` project, hence "View plugin":
<img width="897" alt="image"
src="https://github.com/user-attachments/assets/82be309f-6d12-4731-a81b-65a7cfdadfee"
/>

## pluginDetailedView
**Before.** Both "Configure" button links are unavailable:
<img width="897" alt="image"
src="https://github.com/user-attachments/assets/171d1f33-d919-48c8-9086-68e74713a12e"
/>

**After.** "Configure" is shown as the user has write permissions on
`go` project, and "View" because of the read permissions on
`python-flask` project.
<img width="897" alt="image"
src="https://github.com/user-attachments/assets/5417cdae-562a-4d2c-93f7-9c5dde45594d"
/>

Author: oioki

static/app/views/settings/organizationIntegrations/installedPlugin.tsx

@@ -7,7 +7,6 @@ import {
   addSuccessMessage,
 } from 'sentry/actionCreators/indicator';
 import type {Client} from 'sentry/api';
-import Access from 'sentry/components/acl/access';
 import Confirm from 'sentry/components/confirm';
 import {Alert} from 'sentry/components/core/alert';
 import {Button, LinkButton} from 'sentry/components/core/button';
@@ -31,6 +30,7 @@ type Props = {
   projectItem: PluginProjectItem;
   trackIntegrationAnalytics: (eventKey: IntegrationAnalyticsKey) => void; // analytics callback
   className?: string;
+  hasAccess?: boolean;
 };
 
 class InstalledPlugin extends Component<Props> {
@@ -120,55 +120,50 @@ class InstalledPlugin extends Component<Props> {
   }
 
   render() {
-    const {className, plugin, organization, projectItem} = this.props;
+    const {className, plugin, organization, hasAccess, projectItem} = this.props;
     return (
       <Container data-test-id="installed-plugin">
-        <Access access={['org:integrations']}>
-          {({hasAccess}) => (
-            <IntegrationFlex className={className}>
-              <IntegrationItemBox>
-                <ProjectBadge project={this.projectForBadge} />
-              </IntegrationItemBox>
-              <div>
-                <StyledLinkButton
-                  borderless
-                  icon={<IconSettings />}
-                  disabled={!hasAccess}
-                  to={`/settings/${organization.slug}/projects/${projectItem.projectSlug}/plugins/${plugin.id}/`}
-                  data-test-id="integration-configure-button"
-                >
-                  {t('Configure')}
-                </StyledLinkButton>
-              </div>
-              <div>
-                <Confirm
-                  priority="danger"
-                  onConfirming={this.handleUninstallClick}
-                  disabled={!hasAccess}
-                  confirmText="Delete Installation"
-                  onConfirm={() => this.handleReset()}
-                  message={this.getConfirmMessage()}
-                >
-                  <StyledButton
-                    disabled={!hasAccess}
-                    borderless
-                    icon={<IconDelete />}
-                    data-test-id="integration-remove-button"
-                  >
-                    {t('Uninstall')}
-                  </StyledButton>
-                </Confirm>
-              </div>
-              <Switch
-                checked={projectItem.enabled}
-                onChange={() =>
-                  this.toggleEnablePlugin(projectItem.projectId, !projectItem.enabled)
-                }
+        <IntegrationFlex className={className}>
+          <IntegrationItemBox>
+            <ProjectBadge project={this.projectForBadge} />
+          </IntegrationItemBox>
+          <div>
+            <StyledLinkButton
+              borderless
+              icon={<IconSettings />}
+              to={`/settings/${organization.slug}/projects/${projectItem.projectSlug}/plugins/${plugin.id}/`}
+              data-test-id="integration-configure-button"
+            >
+              {hasAccess ? t('Configure') : t('View')}
+            </StyledLinkButton>
+          </div>
+          <div>
+            <Confirm
+              priority="danger"
+              onConfirming={this.handleUninstallClick}
+              disabled={!hasAccess}
+              confirmText="Delete Installation"
+              onConfirm={() => this.handleReset()}
+              message={this.getConfirmMessage()}
+            >
+              <StyledButton
                 disabled={!hasAccess}
-              />
-            </IntegrationFlex>
-          )}
-        </Access>
+                borderless
+                icon={<IconDelete />}
+                data-test-id="integration-remove-button"
+              >
+                {t('Uninstall')}
+              </StyledButton>
+            </Confirm>
+          </div>
+          <Switch
+            checked={projectItem.enabled}
+            onChange={() =>
+              this.toggleEnablePlugin(projectItem.projectId, !projectItem.enabled)
+            }
+            disabled={!hasAccess}
+          />
+        </IntegrationFlex>
       </Container>
     );
   }

static/app/views/settings/organizationIntegrations/pluginDetailedView.tsx

@@ -2,6 +2,7 @@ import {Fragment, useCallback, useEffect, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {openModal} from 'sentry/actionCreators/modal';
+import {hasEveryAccess} from 'sentry/components/acl/access';
 import ContextPickerModal from 'sentry/components/contextPickerModal';
 import {Button} from 'sentry/components/core/button';
 import LoadingError from 'sentry/components/loadingError';
@@ -25,6 +26,7 @@ import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
+import useProjects from 'sentry/utils/useProjects';
 import withOrganization from 'sentry/utils/withOrganization';
 import {
   INSTALLED,
@@ -58,6 +60,8 @@ function PluginDetailedView() {
   const navigate = useNavigate();
   const {integrationSlug} = useParams<{integrationSlug: string}>();
 
+  const {projects} = useProjects();
+
   const {data: plugins, isPending} = useApiQuery<PluginWithProjectList[]>(
     makePluginQueryKey({orgSlug: organization.slug, pluginSlug: integrationSlug}),
     {staleTime: Infinity, retry: false}
@@ -248,6 +252,10 @@ function PluginDetailedView() {
                 key={projectItem.projectId}
                 organization={organization}
                 plugin={plugin}
+                hasAccess={hasEveryAccess(['project:write'], {
+                  organization,
+                  project: projects.find(p => p.id === projectItem.projectId.toString()),
+                })}
                 projectItem={projectItem}
                 onResetConfiguration={handleResetConfiguration}
                 onPluginEnableStatusChange={handlePluginEnableStatus}
@@ -288,6 +296,7 @@ function PluginDetailedView() {
     organization,
     plugin,
     renderTopButton,
+    projects,
   ]);
 
   if (isPending) {

static/app/views/settings/projectPlugins/projectPluginRow.tsx

@@ -58,8 +58,6 @@ class ProjectPluginRow extends PureComponent<Props> {
     return (
       <Access access={['project:write']} project={project}>
         {({hasAccess}) => {
-          const LinkOrSpan = hasAccess ? Link : 'span';
-
           return (
             <PluginItem key={id} className={slug}>
               <PluginInfo>
@@ -84,9 +82,9 @@ class ProjectPluginRow extends PureComponent<Props> {
                       <span>
                         {' '}
                         &middot;{' '}
-                        <LinkOrSpan css={grayText} to={configureUrl}>
-                          {t('Configure plugin')}
-                        </LinkOrSpan>
+                        <Link css={grayText} to={configureUrl}>
+                          {hasAccess ? t('Configure plugin') : t('View plugin')}
+                        </Link>
                       </span>
                     )}
                   </div>