Merge pull request #38 from CryptoRodeo/kfluxui-188

fix(KFLUXUI-188): disable pipeline actions for contributors

Author: CryptoRodeo

src/components/ApplicationDetails/ApplicationDetails.tsx

@@ -9,6 +9,7 @@ import { TrackEvents, useTrackEvent } from '../../utils/analytics';
 import { useApplicationBreadcrumbs } from '../../utils/breadcrumb-utils';
 import { useAccessReviewForModel } from '../../utils/rbac';
 import { useComponentRelationAction } from '../ComponentRelation/useComponentRelationAction';
+import { createCustomizeAllPipelinesModalLauncher } from '../CustomizedPipeline/CustomizePipelinesModal';
 import DetailsPage from '../DetailsPage/DetailsPage';
 import { useModalLauncher } from '../modal/ModalProvider';
 import { applicationDeleteModal } from '../modal/resource-modals';
@@ -22,6 +23,7 @@ export const ApplicationDetails: React.FC<React.PropsWithChildren> = () => {
   // const track = useTrackEvent();
   const { namespace, workspace } = useWorkspaceInfo();
   const [canCreateComponent] = useAccessReviewForModel(ComponentModel, 'create');
+  const [canPatchComponent] = useAccessReviewForModel(ComponentModel, 'patch');
   const [canCreateIntegrationTest] = useAccessReviewForModel(
     IntegrationTestScenarioModel,
     'create',
@@ -77,8 +79,10 @@ export const ApplicationDetails: React.FC<React.PropsWithChildren> = () => {
                 app_name: applicationName,
                 workspace,
               });
-              // showModal(createCustomizeAllPipelinesModalLauncher(applicationName, namespace));
+              showModal(createCustomizeAllPipelinesModalLauncher(applicationName, namespace));
             },
+            disabledTooltip: 'You do not have access to manage build pipelines',
+            isDisabled: !canPatchComponent,
             key: 'manage-build-pipelines',
             label: 'Manage build pipelines',
           },

src/components/Components/ComponentDetails/ComponentDetailsView.tsx

@@ -1,30 +1,24 @@
 import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import {
-  Bullseye,
-  Button,
-  ButtonVariant,
-  Spinner,
-  Text,
-  TextVariants,
-} from '@patternfly/react-core';
+import { Bullseye, ButtonVariant, Spinner, Text, TextVariants } from '@patternfly/react-core';
 import isFunction from 'lodash/isFunction';
 import isObject from 'lodash/isObject';
 import pipelineImg from '../../../assets/Pipeline.svg';
 import { useComponent } from '../../../hooks/useComponents';
 import { HttpError } from '../../../k8s/error';
-import { ComponentGroupVersionKind } from '../../../models';
+import { ComponentGroupVersionKind, ComponentModel } from '../../../models';
 import { RouterParams } from '../../../routes/utils';
 import ErrorEmptyState from '../../../shared/components/empty-state/ErrorEmptyState';
 import { useApplicationBreadcrumbs } from '../../../utils/breadcrumb-utils';
+import { useAccessReviewForModel } from '../../../utils/rbac';
+import { ButtonWithAccessTooltip } from '../../ButtonWithAccessTooltip';
 import { createCustomizeComponentPipelineModalLauncher } from '../../CustomizedPipeline/CustomizePipelinesModal';
 import { DetailsPage } from '../../DetailsPage';
 import { Action } from '../../DetailsPage/types';
 import { GettingStartedCard } from '../../GettingStartedCard/GettingStartedCard';
 import { useModalLauncher } from '../../modal/ModalProvider';
 import { useWorkspaceInfo } from '../../Workspace/useWorkspaceInfo';
 import { useComponentActions } from '../component-actions';
-
 import './ComponentDetailsView.scss';
 
 export const COMPONENTS_GS_LOCAL_STORAGE_KEY = 'components-getting-started-modal';
@@ -36,6 +30,7 @@ const ComponentDetailsView: React.FC = () => {
   const applicationBreadcrumbs = useApplicationBreadcrumbs();
   const showModal = useModalLauncher();
   const [component, loaded, componentError] = useComponent(namespace, workspace, componentName);
+  const [canPatchComponent] = useAccessReviewForModel(ComponentModel, 'patch');
 
   const componentActions = useComponentActions(loaded ? component : undefined, componentName);
   const actions: Action[] = React.useMemo(
@@ -96,9 +91,11 @@ const ComponentDetailsView: React.FC = () => {
               Using the Advanced or Custom build pipeline, you can enable all additional tasks for
               added security.
             </div>
-            <Button
+            <ButtonWithAccessTooltip
               className="pf-u-mt-xl"
               variant={ButtonVariant.secondary}
+              isDisabled={!canPatchComponent}
+              tooltip="You don't have access to edit the build pipeline plan"
               onClick={() =>
                 showModal(
                   createCustomizeComponentPipelineModalLauncher(
@@ -109,7 +106,7 @@ const ComponentDetailsView: React.FC = () => {
               }
             >
               Edit build pipeline plan
-            </Button>
+            </ButtonWithAccessTooltip>
           </GettingStartedCard>
         }
         breadcrumbs={[

src/components/Components/ComponentsListView/ComponentListView.tsx

@@ -5,7 +5,6 @@ import {
   AlertActionCloseButton,
   AlertActionLink,
   AlertVariant,
-  Button,
   ButtonVariant,
   EmptyStateBody,
   Flex,
@@ -65,6 +64,7 @@ const ComponentListView: React.FC<React.PropsWithChildren<ComponentListViewProps
     true,
   );
   const [canCreateComponent] = useAccessReviewForModel(ComponentModel, 'create');
+  const [canPatchComponent] = useAccessReviewForModel(ComponentModel, 'patch');
 
   const showModal = useModalLauncher();
 
@@ -178,20 +178,22 @@ const ComponentListView: React.FC<React.PropsWithChildren<ComponentListViewProps
             complete control over them.
           </FlexItem>
           <FlexItem>
-            <Button
+            <ButtonWithAccessTooltip
               className="pf-u-mr-2xl"
               variant={ButtonVariant.secondary}
+              isDisabled={!canPatchComponent}
+              tooltip="You don't have access to edit the build pipeline plans"
               onClick={() =>
                 showModal(createCustomizeAllPipelinesModalLauncher(applicationName, namespace))
               }
             >
               Edit build pipeline plans
-            </Button>
+            </ButtonWithAccessTooltip>
           </FlexItem>
         </Flex>
       </GettingStartedCard>
     ),
-    [applicationName, namespace, showModal],
+    [applicationName, namespace, showModal, canPatchComponent],
   );
 
   return (

src/components/Components/component-actions.tsx

@@ -31,6 +31,8 @@ export const useComponentActions = (component: ComponentKind, name: string): Act
           ),
         id: 'manage-build-pipeline',
         label: 'Edit build pipeline plan',
+        disabled: !canPatchComponent,
+        disabledTooltip: "You don't have access to edit the build pipeline plan",
         analytics: {
           link_name: 'manage-build-pipeline',
           link_location: 'component-list',

src/components/WhatsNext/useWhatsNextItems.ts

@@ -17,6 +17,7 @@ export const useWhatsNextItems = (applicationName: string) => {
   const { workspace, namespace } = useWorkspaceInfo();
   const { url: githubAppURL } = useApplicationPipelineGitHubApp();
   const [canCreateComponent] = useAccessReviewForModel(ComponentModel, 'create');
+  const [canPatchComponent] = useAccessReviewForModel(ComponentModel, 'patch');
   const [canCreateIntegrationTest] = useAccessReviewForModel(
     IntegrationTestScenarioModel,
     'create',
@@ -122,6 +123,8 @@ export const useWhatsNextItems = (applicationName: string) => {
         'Add some automation by upgrading your default build pipelines to custom build pipelines.',
       icon: pipelineIcon,
       cta: {
+        disabled: !canPatchComponent,
+        disabledTooltip: "You don't have access to manage build pipelines",
         label: 'Manage build pipelines',
         onClick: () =>
           showModal(createCustomizeAllPipelinesModalLauncher(applicationName, namespace)),