Update to PF topology package with styles

frontend/package.json

@@ -155,7 +155,7 @@
  "axios": "^0.21.2",
  "classnames": "2.x",
  "codemirror-promql": "^0.19.0",
- "d3": "^5.9.2",
+ "d3": "^5.16.0",
  "file-saver": "1.3.x",
  "focus-trap-react": "^6.0.0",
  "formik": "2.0.3",
@@ -179,7 +179,7 @@
  "openshift-logos-icon": "1.7.1",
  "pluralize": "^8.0.0",
  "point-in-svg-path": "1.0.1",
- "popper.js": "^1.15.0",
+ "popper.js": "^1.16.1",
  "prop-types": "15.7.x",
  "react": "^17.0.1",
  "react-copy-to-clipboard": "5.x",

frontend/packages/console-dynamic-plugin-sdk/src/extensions/topology-types.ts

@@ -8,7 +8,8 @@ import {
  EventListener,
  ModelKind,
  GraphElement,
-} from '@patternfly/react-topology';
+ TopologyQuadrant,
+} from '@patternfly/react-topology/dist/esm/types';
 import { PrometheusAlert } from '../api/common-types';
 import { K8sResourceCommon, K8sResourceKindReference, WatchK8sResults } from './console-types';
 
@@ -91,13 +92,6 @@ export type DisplayFilters = TopologyDisplayOption[];
 // Applies the filters on the model and returns the ids of filters that were relevant
 export type TopologyApplyDisplayOptions = (model: Model, filters: DisplayFilters) => string[];
 
-export enum TopologyDecoratorQuadrant {
- upperLeft = 'upperLeft',
- upperRight = 'upperRight',
- lowerLeft = 'lowerLeft',
- lowerRight = 'lowerRight',
-}
-
 export type TopologyDecoratorGetter = (
  element: Node,
  radius: number,
@@ -108,7 +102,7 @@ export type TopologyDecoratorGetter = (
 export type TopologyDecorator = {
  id: string;
  priority: number;
- quadrant: TopologyDecoratorQuadrant;
+ quadrant: TopologyQuadrant;
  decorator: TopologyDecoratorGetter;
 };
 

frontend/packages/console-dynamic-plugin-sdk/src/extensions/topology.ts

@@ -1,3 +1,4 @@
+import { TopologyQuadrant } from '@patternfly/react-topology/dist/esm/types';
 import { Extension, ExtensionDeclaration, CodeRef } from '../types';
 import { WatchK8sResourcesGeneric } from './console-types';
 import {
@@ -9,7 +10,6 @@ import {
  TopologyDataModelGetter,
  TopologyDataModelReconciler,
  TopologyDecoratorGetter,
- TopologyDecoratorQuadrant,
  TopologyDisplayOption,
  ViewComponentFactory,
 } from './topology-types';
@@ -73,7 +73,7 @@ export type TopologyDecoratorProvider = ExtensionDeclaration<
  // priority for topology decorator specific to the extension
  priority: number;
  // quadrant for topology decorator specific to the extension
- quadrant: TopologyDecoratorQuadrant;
+ quadrant: TopologyQuadrant;
  // decorator specific to the extension
  decorator: CodeRef<TopologyDecoratorGetter>;
  }

frontend/packages/console-shared/src/components/pod/PodStatus.tsx

@@ -95,7 +95,7 @@ const PodStatus: React.FC<PodStatusProps> = ({
  <ChartDonut
  ariaTitle={`${title}${subTitle && ` ${subTitle}`}`}
  animate={{
- duration: ANIMATION_DURATION,
+ duration: prevVData.current ? ANIMATION_DURATION : 0,
  onEnd: updateOnEnd ? forceUpdate : undefined,
  }}
  standalone={standalone}

frontend/packages/dev-console/src/components/topology/bindable-services/data-transformer.ts

@@ -1,4 +1,4 @@
-import { EdgeModel, Model, NodeModel } from '@patternfly/react-topology';
+import { EdgeModel, Model, NodeModel, NodeShape } from '@patternfly/react-topology';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import { ClusterServiceVersionKind } from '@console/operator-lifecycle-manager';
 import {
@@ -51,7 +51,15 @@ const getTopologyBindableServiceNodes = (
  icon: getImageForCSVIcon(csvData?.spec?.icon?.[0]) || getDefaultOperatorIcon(),
  },
  };
- return getTopologyNodeItem(obj, TYPE_BINDABLE_NODE, data, BINDABLE_PROPS);
+ return getTopologyNodeItem(
+ obj,
+ TYPE_BINDABLE_NODE,
+ data,
+ BINDABLE_PROPS,
+ undefined,
+ undefined,
+ NodeShape.trapezoid,
+ );
  });
 
  return nodes;

frontend/packages/dev-console/src/components/topology/components/devConsoleComponetFactory.ts

@@ -12,7 +12,7 @@ import {
  withContextMenu,
  CreateConnector,
 } from '@console/topology/src/components/graph-view';
-import BindableNode from '@console/topology/src/components/graph-view/components/nodes/trapezoidNode/BindableNode';
+import BindableNode from '@console/topology/src/components/graph-view/components/nodes/BindableNode';
 import { withEditReviewAccess } from '@console/topology/src/utils';
 import { TYPE_BINDABLE_NODE } from '../const';
 

frontend/packages/helm-plugin/integration-tests/support/step-definitions/helm/helm-release.ts

@@ -26,7 +26,7 @@ Given('user has installed helm release {string}', (helmReleaseName: string) => {
 When(
  'user right clicks on the helm release {string} to open the context menu',
  (helmReleaseName: string) => {
- topologyPage.rightClickOnNode(helmReleaseName);
+ topologyPage.rightClickOnGroup(helmReleaseName);
  },
 );
 
@@ -47,7 +47,7 @@ Then('user is able to see the context menu with actions Upgrade and Uninstall He
 });
 
 Given('user is on the topology sidebar of the helm release {string}', (helmReleaseName: string) => {
- topologyPage.clickOnNode(helmReleaseName);
+ topologyPage.clickOnGroup(helmReleaseName);
  topologySidePane.verify();
 });
 
@@ -137,7 +137,7 @@ Then('user will be redirected to Topology page', () => {
  topologyPage.verifyTopologyPage();
 });
 When('user clicks on the helm release {string}', (helmReleaseName: string) => {
- topologyPage.clickOnNode(helmReleaseName);
+ topologyPage.clickOnGroup(helmReleaseName);
 });
 
 Then('user will see the sidebar for the helm release', () => {
@@ -149,7 +149,7 @@ Then('user will see the Details, Resources, Release notes tabs', () => {
 });
 
 Given('user is on the topology sidebar of the helm release {string}', (helmReleaseName: string) => {
- topologyPage.clickOnNode(helmReleaseName);
+ topologyPage.clickOnGroup(helmReleaseName);
  topologySidePane.verify();
 });
 

frontend/packages/helm-plugin/src/topology/components/HelmRelease.scss

@@ -22,7 +22,7 @@
  stroke-dasharray: none;
  }
 
- &.is-selected &__bg {
+ &.pf-m-selected &__bg {
  stroke: $selected-stroke-color;
  fill: $selected-fill-color;
  stroke-width: $group-node-selected-stroke-width;
@@ -34,7 +34,7 @@
 .odc-m-filter-active {
  .odc-helm-release {
  opacity: $de-emphasize-opacity;
- &.is-dragging,
+ &.pf-m-dragging,
  &.is-filtered {
  opacity: 1;
  }

frontend/packages/helm-plugin/src/topology/components/HelmRelease.tsx

@@ -5,19 +5,23 @@ import {
  WithSelectionProps,
  WithDndDropProps,
  WithContextMenuProps,
+ WithDragNodeProps,
 } from '@patternfly/react-topology';
+import * as classNames from 'classnames';
 import { useAccessReview } from '@console/internal/components/utils';
 import { modelFor, referenceFor } from '@console/internal/module/k8s';
+import GroupNode from '@console/topology/src/components/graph-view/components/groups/GroupNode';
+import { getKindStringAndAbbreviation } from '@console/topology/src/components/graph-view/components/nodes/nodeUtils';
 import { getResource } from '@console/topology/src/utils/topology-utils';
 import HelmReleaseGroup from './HelmReleaseGroup';
-import HelmReleaseNode from './HelmReleaseNode';
 
 import './HelmRelease.scss';
 
 type HelmReleaseProps = {
  element: Node;
 } & WithSelectionProps &
  WithContextMenuProps &
+ WithDragNodeProps &
  WithDndDropProps;
 
 const HelmRelease: React.FC<HelmReleaseProps> = (props) => {
@@ -30,8 +34,22 @@ const HelmRelease: React.FC<HelmReleaseProps> = (props) => {
  name: secretObj?.metadata.name,
  namespace: secretObj?.metadata.namespace,
  });
+ const { kindAbbr, kindStr, kindColor } = getKindStringAndAbbreviation('HelmRelease');
+ const badgeClassName = classNames('odc-resource-icon', {
+ [`odc-resource-icon-${kindStr.toLowerCase()}`]: !kindColor,
+ });
+
  if (props.element.isCollapsed()) {
- return <HelmReleaseNode editAccess={editAccess} {...props} />;
+ return (
+ <GroupNode
+ {...props}
+ onContextMenu={editAccess ? props.onContextMenu : null}
+ bgClassName="odc-helm-release__bg"
+ badge={kindAbbr}
+ badgeColor={kindColor}
+ badgeClassName={badgeClassName}
+ />
+ );
  }
 
  return <HelmReleaseGroup editAccess={editAccess} {...props} />;

frontend/packages/helm-plugin/src/topology/components/HelmReleaseGroup.tsx

@@ -7,61 +7,67 @@ import {
  useDragNode,
  WithSelectionProps,
  WithDndDropProps,
+ WithDragNodeProps,
  WithContextMenuProps,
  observer,
  useCombineRefs,
+ NodeLabel,
 } from '@patternfly/react-topology';
 import * as classNames from 'classnames';
+import { getImageForIconClass } from '@console/internal/components/catalog/catalog-item-icon';
 import {
  NodeShadows,
  NODE_SHADOW_FILTER_ID_HOVER,
  NODE_SHADOW_FILTER_ID,
  noRegroupDragSourceSpec,
 } from '@console/topology/src/components/graph-view';
-import SvgBoxedText from '@console/topology/src/components/svg/SvgBoxedText';
-import {
- getFilterById,
- useDisplayFilters,
- useSearchFilter,
- SHOW_LABELS_FILTER_ID,
-} from '@console/topology/src/filters';
+import { useSearchFilter } from '@console/topology/src/filters';
+import { useShowLabel } from '@console/topology/src/filters/useShowLabel';
 import { getResource } from '@console/topology/src/utils';
 
 type HelmReleaseGroupProps = {
  element: Node;
+ badge?: string;
+ badgeColor?: string;
+ badgeClassName?: string;
  editAccess: boolean;
+ dragging?: boolean;
 } & WithSelectionProps &
  WithContextMenuProps &
+ WithDragNodeProps &
  WithDndDropProps;
 
 const HelmReleaseGroup: React.FC<HelmReleaseGroupProps> = ({
  element,
+ badge,
+ badgeColor,
+ badgeClassName,
  editAccess,
  selected,
  onSelect,
  onContextMenu,
  contextMenuOpen,
  dndDropRef,
+ dragging,
+ dragNodeRef,
 }) => {
  const [hover, hoverRef] = useHover();
  const [innerHover, innerHoverRef] = useHover();
- const [{ dragging }, dragNodeRef] = useDragNode(noRegroupDragSourceSpec);
  const [{ dragging: labelDragging }, dragLabelRef] = useDragNode(noRegroupDragSourceSpec);
  const nodeRefs = useCombineRefs(innerHoverRef, dragNodeRef);
  const [filtered] = useSearchFilter(element.getLabel(), getResource(element)?.metadata?.labels);
- const displayFilters = useDisplayFilters();
- const showLabelsFilter = getFilterById(SHOW_LABELS_FILTER_ID, displayFilters);
- const showLabels = showLabelsFilter?.value || hover || innerHover;
+ const showLabel = useShowLabel(hover);
  const hasChildren = element.getChildren()?.length > 0;
  const { x, y, width, height } = element.getBounds();
+ const typeIconClass = element.getData().data.chartIcon || 'icon-helm';
 
  return (
  <g
  ref={hoverRef}
  onClick={onSelect}
  onContextMenu={editAccess ? onContextMenu : null}
- className={classNames('odc-helm-release', {
- 'is-dragging': dragging || labelDragging,
+ className={classNames('pf-topology__group odc-helm-release', {
+ 'pf-m-dragging': dragging || labelDragging,
  'is-filtered': filtered,
  })}
  >
@@ -70,8 +76,8 @@ const HelmReleaseGroup: React.FC<HelmReleaseGroupProps> = ({
  <g
  ref={nodeRefs}
  className={classNames('odc-helm-release', {
- 'is-selected': selected,
- 'is-dragging': dragging || labelDragging,
+ 'pf-m-selected': selected,
+ 'pf-m-dragging': dragging || labelDragging,
  'is-filtered': filtered,
  })}
  >
@@ -102,19 +108,23 @@ const HelmReleaseGroup: React.FC<HelmReleaseGroupProps> = ({
  )}
  </g>
  </Layer>
- {showLabels && element.getLabel() && (
- <SvgBoxedText
- className="odc-base-node__label"
+ {showLabel && element.getLabel() && (
+ <NodeLabel
+ className="pf-topology__group__label odc-base-node__label"
+ onContextMenu={onContextMenu}
+ contextMenuOpen={contextMenuOpen}
  x={x + width / 2}
  y={y + height + 20}
  paddingX={8}
  paddingY={4}
- kind="HelmRelease"
+ labelIconClass={getImageForIconClass(typeIconClass) || typeIconClass}
+ badge={badge}
+ badgeColor={badgeColor}
+ badgeClassName={badgeClassName}
  dragRef={dragLabelRef}
- typeIconClass={element.getData().data.chartIcon || 'icon-helm'}
  >
  {element.getLabel()}
- </SvgBoxedText>
+ </NodeLabel>
  )}
  </g>
  );