Chore: Rewrite grafana-flamegraph css using object styles (#86816)

.betterer.results

@@ -454,46 +454,6 @@ exports[`better eslint`] = {
     "packages/grafana-data/test/__mocks__/pluginMocks.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "packages/grafana-flamegraph/src/FlameGraph/FlameGraph.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"]
-    ],
-    "packages/grafana-flamegraph/src/FlameGraph/FlameGraphMetadata.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
-    ],
-    "packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"]
-    ],
-    "packages/grafana-flamegraph/src/FlameGraphHeader.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
-      [0, 0, 0, "Styles should be written using objects.", "12"]
-    ],
-    "packages/grafana-flamegraph/src/TopTable/FlameGraphTopTableContainer.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "packages/grafana-o11y-ds-frontend/src/utils.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],

packages/grafana-flamegraph/src/FlameGraph/FlameGraph.tsx

@@ -185,33 +185,32 @@ const FlameGraph = ({
 };
 
 const getStyles = () => ({
-  graph: css`
-    label: graph;
-    overflow: auto;
-    flex-grow: 1;
-    flex-basis: 50%;
-  `,
-  sandwichCanvasWrapper: css`
-    label: sandwichCanvasWrapper;
-    display: flex;
-    margin-bottom: ${PIXELS_PER_LEVEL / window.devicePixelRatio}px;
-  `,
-  sandwichMarker: css`
-    label: sandwichMarker;
-    writing-mode: vertical-lr;
-    transform: rotate(180deg);
-    overflow: hidden;
-    white-space: nowrap;
-  `,
-
-  sandwichMarkerCalees: css`
-    label: sandwichMarkerCalees;
-    text-align: right;
-  `,
-  sandwichMarkerIcon: css`
-    label: sandwichMarkerIcon;
-    vertical-align: baseline;
-  `,
+  graph: css({
+    label: 'graph',
+    overflow: 'auto',
+    flexGrow: 1,
+    flexBasis: '50%',
+  }),
+  sandwichCanvasWrapper: css({
+    label: 'sandwichCanvasWrapper',
+    display: 'flex',
+    marginBottom: `${PIXELS_PER_LEVEL / window.devicePixelRatio}px`,
+  }),
+  sandwichMarker: css({
+    label: 'sandwichMarker',
+    writingMode: 'vertical-lr',
+    transform: 'rotate(180deg)',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  }),
+  sandwichMarkerCalees: css({
+    label: 'sandwichMarkerCalees',
+    textAlign: 'right',
+  }),
+  sandwichMarkerIcon: css({
+    label: 'sandwichMarkerIcon',
+    verticalAlign: 'baseline',
+  }),
 });
 
 export default FlameGraph;

packages/grafana-flamegraph/src/FlameGraph/FlameGraphMetadata.tsx

@@ -89,36 +89,35 @@ const FlameGraphMetadata = React.memo(
 FlameGraphMetadata.displayName = 'FlameGraphMetadata';
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  metadataPill: css`
-    label: metadataPill;
-    display: inline-flex;
-    align-items: center;
-    background: ${theme.colors.background.secondary};
-    border-radius: ${theme.shape.borderRadius(8)};
-    padding: ${theme.spacing(0.5, 1)};
-    font-size: ${theme.typography.bodySmall.fontSize};
-    font-weight: ${theme.typography.fontWeightMedium};
-    line-height: ${theme.typography.bodySmall.lineHeight};
-    color: ${theme.colors.text.secondary};
-  `,
-
-  pillCloseButton: css`
-    label: pillCloseButton;
-    vertical-align: text-bottom;
-    margin: ${theme.spacing(0, 0.5)};
-  `,
-  metadata: css`
-    margin: 8px 0;
-    text-align: center;
-  `,
-  metadataPillName: css`
-    label: metadataPillName;
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-left: ${theme.spacing(0.5)};
-  `,
+  metadataPill: css({
+    label: 'metadataPill',
+    display: 'inline-flex',
+    alignItems: 'center',
+    background: theme.colors.background.secondary,
+    borderRadius: theme.shape.borderRadius(8),
+    padding: theme.spacing(0.5, 1),
+    fontSize: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    lineHeight: theme.typography.bodySmall.lineHeight,
+    color: theme.colors.text.secondary,
+  }),
+  pillCloseButton: css({
+    label: 'pillCloseButton',
+    verticalAlign: 'text-bottom',
+    margin: theme.spacing(0, 0.5),
+  }),
+  metadata: css({
+    margin: '8px 0',
+    textAlign: 'center',
+  }),
+  metadataPillName: css({
+    label: 'metadataPillName',
+    maxWidth: '200px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    marginLeft: theme.spacing(0.5),
+  }),
 });
 
 export default FlameGraphMetadata;

packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx

@@ -182,33 +182,33 @@ function getValueWithUnit(data: FlameGraphDataContainer, displayValue: DisplayVa
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  tooltipContainer: css`
-    title: tooltipContainer;
-    overflow: hidden;
-  `,
-  tooltipContent: css`
-    title: tooltipContent;
-    font-size: ${theme.typography.bodySmall.fontSize};
-    width: 100%;
-  `,
-  tooltipName: css`
-    title: tooltipName;
-    margin-top: 0;
-    word-break: break-all;
-  `,
-  lastParagraph: css`
-    title: lastParagraph;
-    margin-bottom: 0;
-  `,
-  name: css`
-    title: name;
-    margin-bottom: 10px;
-  `,
-
-  tooltipTable: css`
-    title: tooltipTable;
-    max-width: 400px;
-  `,
+  tooltipContainer: css({
+    title: 'tooltipContainer',
+    overflow: 'hidden',
+  }),
+  tooltipContent: css({
+    title: 'tooltipContent',
+    fontSize: theme.typography.bodySmall.fontSize,
+    width: '100%',
+  }),
+  tooltipName: css({
+    title: 'tooltipName',
+    marginTop: 0,
+    wordBreak: 'break-all',
+  }),
+  lastParagraph: css({
+    title: 'lastParagraph',
+    marginBottom: 0,
+  }),
+  name: css({
+    title: 'name',
+    marginBottom: '10px',
+  }),
+
+  tooltipTable: css({
+    title: 'tooltipTable',
+    maxWidth: '400px',
+  }),
 });
 
 export default FlameGraphTooltip;

packages/grafana-flamegraph/src/FlameGraphHeader.tsx

@@ -46,7 +46,7 @@ const FlameGraphHeader = ({
   vertical,
   isDiffMode,
 }: Props) => {
-  const styles = useStyles2(getStyles, stickyHeader);
+  const styles = useStyles2(getStyles);
   const [localSearch, setLocalSearch] = useSearchInput(search, setSearch);
 
   const suffix =
@@ -66,7 +66,7 @@ const FlameGraphHeader = ({
     ) : null;
 
   return (
-    <div className={styles.header}>
+    <div className={cx(styles.header, { [styles.stickyHeader]: stickyHeader })}>
       <div className={styles.inputContainer}>
         <Input
           value={localSearch || ''}
@@ -121,7 +121,7 @@ type ColorSchemeButtonProps = {
 };
 function ColorSchemeButton(props: ColorSchemeButtonProps) {
   // TODO: probably create separate getStyles
-  const styles = useStyles2(getStyles, false);
+  const styles = useStyles2(getStyles);
   let menu = (
     <Menu>
       <Menu.Item label="By package name" onClick={() => props.onChange(ColorScheme.PackageBased)} />
@@ -213,79 +213,77 @@ function useSearchInput(
   return [localSearchState, setLocalSearchState];
 }
 
-const getStyles = (theme: GrafanaTheme2, sticky?: boolean) => ({
-  header: css`
-    label: header;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    width: 100%;
-    top: 0;
-    ${sticky
-      ? css`
-          z-index: ${theme.zIndex.navbarFixed};
-          position: sticky;
-          padding-bottom: ${theme.spacing(1)};
-          padding-top: ${theme.spacing(1)};
-          background: ${theme.colors.background.primary};
-        `
-      : ''};
-  `,
-  inputContainer: css`
-    label: inputContainer;
-    margin-right: 20px;
-    flex-grow: 1;
-    min-width: 150px;
-    max-width: 350px;
-  `,
-  rightContainer: css`
-    label: rightContainer;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: wrap;
-  `,
-  buttonSpacing: css`
-    label: buttonSpacing;
-    margin-right: ${theme.spacing(1)};
-  `,
-
-  resetButton: css`
-    label: resetButton;
-    display: flex;
-    margin-right: ${theme.spacing(2)};
-  `,
-  resetButtonIconWrapper: css`
-    label: resetButtonIcon;
-    padding: 0 5px;
-    color: ${theme.colors.text.disabled};
-  `,
-  colorDot: css`
-    label: colorDot;
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-  `,
-  colorDotByValue: css`
-    label: colorDotByValue;
-    background: ${byValueGradient};
-  `,
-  colorDotByPackage: css`
-    label: colorDotByPackage;
-    background: ${byPackageGradient};
-  `,
-  colorDotDiffDefault: css`
-    label: colorDotDiffDefault;
-    background: ${diffDefaultGradient};
-  `,
-  colorDotDiffColorBlind: css`
-    label: colorDotDiffColorBlind;
-    background: ${diffColorBlindGradient};
-  `,
-  extraElements: css`
-    label: extraElements;
-    margin-left: ${theme.spacing(1)};
-  `,
+const getStyles = (theme: GrafanaTheme2) => ({
+  header: css({
+    label: 'header',
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    width: '100%',
+    top: 0,
+  }),
+  stickyHeader: css({
+    zIndex: theme.zIndex.navbarFixed,
+    position: 'sticky',
+    paddingBottom: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    background: theme.colors.background.primary,
+  }),
+  inputContainer: css({
+    label: 'inputContainer',
+    marginRight: '20px',
+    flexGrow: 1,
+    minWidth: '150px',
+    maxWidth: '350px',
+  }),
+  rightContainer: css({
+    label: 'rightContainer',
+    display: 'flex',
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+  }),
+  buttonSpacing: css({
+    label: 'buttonSpacing',
+    marginRight: theme.spacing(1),
+  }),
+  resetButton: css({
+    label: 'resetButton',
+    display: 'flex',
+    marginRight: theme.spacing(2),
+  }),
+  resetButtonIconWrapper: css({
+    label: 'resetButtonIcon',
+    padding: '0 5px',
+    color: theme.colors.text.disabled,
+  }),
+  colorDot: css({
+    label: 'colorDot',
+    display: 'inline-block',
+    width: '10px',
+    height: '10px',
+    // eslint-disable-next-line @grafana/no-border-radius-literal
+    borderRadius: '50%',
+  }),
+  colorDotByValue: css({
+    label: 'colorDotByValue',
+    background: byValueGradient,
+  }),
+  colorDotByPackage: css({
+    label: 'colorDotByPackage',
+    background: byPackageGradient,
+  }),
+  colorDotDiffDefault: css({
+    label: 'colorDotDiffDefault',
+    background: diffDefaultGradient,
+  }),
+  colorDotDiffColorBlind: css({
+    label: 'colorDotDiffColorBlind',
+    background: diffColorBlindGradient,
+  }),
+  extraElements: css({
+    label: 'extraElements',
+    marginLeft: theme.spacing(1),
+  }),
 });
 
 export default FlameGraphHeader;

packages/grafana-flamegraph/src/TopTable/FlameGraphTopTableContainer.tsx

@@ -332,17 +332,16 @@ const getStyles = (theme: GrafanaTheme2) => {
 
 const getStylesActionCell = () => {
   return {
-    actionCellWrapper: css`
-      label: actionCellWrapper;
-      display: flex;
-      height: 24px;
-    `,
-
-    actionCellButton: css`
-      label: actionCellButton;
-      margin-right: 0;
-      width: 24px;
-    `,
+    actionCellWrapper: css({
+      label: 'actionCellWrapper',
+      display: 'flex',
+      height: '24px',
+    }),
+    actionCellButton: css({
+      label: 'actionCellButton',
+      marginRight: 0,
+      width: '24px',
+    }),
   };
 };