fix(KFLUXUI-194): update usage of build trigger

Add a tooltip for build trigger details page.
Remove two columns from the component activity page.

Author: CryptoRodeo

src/components/Components/ComponentBuildTrigger.tsx

@@ -0,0 +1,23 @@
+import { PACState } from '../../../../hooks/usePACState';
+import { getHelpPopoverText, getBuildTriggerText } from '../tabs/ComponentBuildSettings';
+
+describe('getHelpPopoverText', () => {
+  it('renders the correct help popover text for enabled PACState', () => {
+    expect(getHelpPopoverText(PACState.ready)).toBe(
+      'A new build pipeline run is automatically triggered with every commit to the source code.',
+    );
+  });
+
+  it('renders the correct help popover text for disabled PACState', () => {
+    expect(getHelpPopoverText(PACState.disabled)).toBe(
+      'Trigger a new build manually from the component’s action menu. To enable an automatic trigger with every commit, upgrade to the Custom build pipeline plan.',
+    );
+  });
+});
+
+describe('getBuildTriggerText', () => {
+  it('renders the correct build trigger text based on PACState value', () => {
+    expect(getBuildTriggerText(PACState.disabled)).toBe('Manual');
+    expect(getBuildTriggerText(PACState.ready)).toBe('Automatic');
+  });
+});

src/components/Components/ComponentDetails/__tests__/ComponentBuildSettings.spec.tsx

@@ -7,19 +7,31 @@ import {
   Flex,
   FlexItem,
 } from '@patternfly/react-core';
-import usePACState from '../../../../hooks/usePACState';
+import HelpPopover from '../../../../../src/components/HelpPopover';
+import usePACState, { PACState } from '../../../../hooks/usePACState';
 import { ComponentKind } from '../../../../types';
 import ComponentPACStateLabel from '../../../CustomizedPipeline/ComponentPACStateLabel';
-import ComponentBuildTrigger from '../../ComponentBuildTrigger';
 
 type ComponentBuildSettingsProps = {
   component: ComponentKind;
 };
 
+export const getHelpPopoverText = (pacState) => {
+  return pacState === PACState.disabled
+    ? 'Trigger a new build manually from the component’s action menu. To enable an automatic trigger with every commit, upgrade to the Custom build pipeline plan.'
+    : 'A new build pipeline run is automatically triggered with every commit to the source code.';
+};
+
+export const getBuildTriggerText = (pacState) => {
+  return pacState === PACState.disabled ? 'Manual' : 'Automatic';
+};
+
 const ComponentBuildSettings: React.FC<React.PropsWithChildren<ComponentBuildSettingsProps>> = ({
   component,
 }) => {
   const pacState = usePACState(component);
+  const helpPopoverText = getHelpPopoverText(pacState);
+  const buildTriggerText = getBuildTriggerText(pacState);
 
   return (
     <>
@@ -45,10 +57,10 @@ const ComponentBuildSettings: React.FC<React.PropsWithChildren<ComponentBuildSet
             }}
           >
             <DescriptionListGroup>
-              <DescriptionListTerm>Build trigger</DescriptionListTerm>
-              <DescriptionListDescription>
-                <ComponentBuildTrigger pacState={pacState} />
-              </DescriptionListDescription>
+              <DescriptionListTerm>
+                Build trigger <HelpPopover bodyContent={helpPopoverText} />
+              </DescriptionListTerm>
+              <DescriptionListDescription>{buildTriggerText}</DescriptionListDescription>
             </DescriptionListGroup>
           </DescriptionList>
         </FlexItem>

src/components/Components/ComponentDetails/tabs/ComponentBuildSettings.tsx

@@ -252,7 +252,6 @@ const ComponentListView: React.FC<React.PropsWithChildren<ComponentListViewProps
           Header={ComponentsListHeader}
           Row={ComponentsListRow}
           loaded={componentsLoaded && pipelineRunsLoaded}
-          customData={{ componentPACStates }}
           getRowProps={(obj: ComponentKind) => ({
             id: `${obj.metadata.name}-component-list-item`,
             'aria-label': obj.metadata.name,

src/components/Components/ComponentsListView/ComponentListView.tsx

@@ -1,9 +1,7 @@
 export const componentsTableColumnClasses = {
-  component: 'pf-m-width-30 wrap-column',
-  buildPipeline: 'pf-m-width-15',
-  buildTrigger: 'pf-m-width-15',
-  latestBuild: 'pf-m-width-30',
-  kebab: 'pf-m-width-10 component-list-view__actions',
+  component: 'pf-m-width-40 wrap-column',
+  latestBuild: 'pf-m-width-40',
+  kebab: 'pf-m-width-20 component-list-view__actions',
 };
 
 const ComponentsListHeader = () => {
@@ -12,14 +10,6 @@ const ComponentsListHeader = () => {
       title: 'Component',
       props: { className: componentsTableColumnClasses.component },
     },
-    {
-      title: 'Build pipeline plan',
-      props: { className: componentsTableColumnClasses.buildPipeline },
-    },
-    {
-      title: 'Build trigger',
-      props: { className: componentsTableColumnClasses.buildTrigger },
-    },
     {
       title: 'Latest build',
       props: { className: componentsTableColumnClasses.latestBuild },

src/components/Components/ComponentsListView/ComponentsListHeader.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { Button, Flex, FlexItem } from '@patternfly/react-core';
-import { PACState } from '../../../hooks/usePACState';
 import { PacStatesForComponents } from '../../../hooks/usePACStatesForComponents';
 import { RowFunctionArgs, TableData } from '../../../shared';
 import ActionMenu from '../../../shared/components/action-menu/ActionMenu';
@@ -10,13 +9,11 @@ import { ComponentKind, PipelineRunKind } from '../../../types';
 import { getCommitsFromPLRs } from '../../../utils/commits-utils';
 import CommitLabel from '../../Commits/commit-label/CommitLabel';
 import { ComponentRelationStatusIcon } from '../../ComponentRelation/details-page/ComponentRelationStatusIcon';
-import ComponentPACStateLabel from '../../CustomizedPipeline/ComponentPACStateLabel';
 import GitRepoLink from '../../GitLink/GitRepoLink';
 import { useBuildLogViewerModal } from '../../LogViewer/BuildLogViewer';
 import PipelineRunStatus from '../../PipelineRun/PipelineRunStatus';
 import { useWorkspaceInfo } from '../../Workspace/useWorkspaceInfo';
 import { useComponentActions } from '../component-actions';
-import ComponentBuildTrigger from '../ComponentBuildTrigger';
 import { componentsTableColumnClasses } from './ComponentsListHeader';
 
 type ComponentWithLatestBuildPipeline = ComponentKind & {
@@ -30,14 +27,12 @@ export const getContainerImageLink = (url: string) => {
 
 const ComponentsListRow: React.FC<
   RowFunctionArgs<ComponentWithLatestBuildPipeline, PacStatesForComponents>
-> = ({ obj: component, customData }) => {
+> = ({ obj: component }) => {
   const { workspace } = useWorkspaceInfo();
   const applicationName = component.spec.application;
   const name = component.metadata.name;
   const actions = useComponentActions(component, name);
-  const { componentPACStates } = customData;
   const buildLogsModal = useBuildLogViewerModal(component);
-  const pacState = componentPACStates[name] ?? PACState.loading;
 
   const commit = React.useMemo(
     () =>
@@ -84,12 +79,6 @@ const ComponentsListRow: React.FC<
           )}
         </Flex>
       </TableData>
-      <TableData className={componentsTableColumnClasses.buildPipeline}>
-        <ComponentPACStateLabel component={component} pacState={pacState} enableAction />
-      </TableData>
-      <TableData className={componentsTableColumnClasses.buildTrigger}>
-        <ComponentBuildTrigger pacState={pacState} />
-      </TableData>
       <TableData className={componentsTableColumnClasses.latestBuild}>
         <div className="component-list-view__build-completion">
           <PipelineRunStatus pipelineRun={component.latestBuildPipelineRun} />