Improve hover behavior on icons in codeHighlight blocks

changelogs/unreleased/4916-Firefox-hover-issue.yml

@@ -0,0 +1,6 @@
+description: Improve the behavior on Firefox when hovering over code-block icons.
+issue-nr: 4916
+change-type: patch
+destination-branches: [master, iso6]
+sections:
+  bugfix: "{{description}}"

src/Slices/CompileDetails/UI/CompileStageReportTableRow.tsx

@@ -64,7 +64,11 @@ export const CompileStageReportTableRow: React.FC<Props> = ({
                 {words("compileDetails.stages.columns.command")}
               </DescriptionListTerm>
               <DescriptionListDescription>
-                <CodeHighlighter code={row.command} language="bash" />
+                <CodeHighlighter
+                  keyId="command"
+                  code={row.command}
+                  language="bash"
+                />
               </DescriptionListDescription>
             </DescriptionListGroup>
             <DescriptionListGroup>
@@ -81,6 +85,7 @@ export const CompileStageReportTableRow: React.FC<Props> = ({
               </DescriptionListTerm>
               <DescriptionListDescription>
                 <CodeHighlighter
+                  keyId="outstream"
                   scrollBottom
                   code={row.outstream}
                   language="python"
@@ -93,6 +98,7 @@ export const CompileStageReportTableRow: React.FC<Props> = ({
               </DescriptionListTerm>
               <DescriptionListDescription>
                 <CodeHighlighter
+                  keyId="error-stream"
                   scrollBottom
                   code={row.errstream}
                   language="python"

src/UI/Components/CodeHighlighter/index.tsx

@@ -1,13 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import {
-  Button,
-  ClipboardCopyButton,
-  Flex,
-  FlexItem,
-  Label,
-  Tooltip,
-} from "@patternfly/react-core";
+import { Flex, FlexItem, Icon, Label, Tooltip } from "@patternfly/react-core";
 import {
   Dropdown,
   DropdownItem,
@@ -16,6 +9,7 @@ import {
 import {
   CloseIcon,
   CompressArrowsAltIcon,
+  CopyIcon,
   ExpandArrowsAltIcon,
   InfoCircleIcon,
   ListOlIcon,
@@ -27,7 +21,7 @@ import bash from "react-syntax-highlighter/dist/esm/languages/hljs/bash";
 import json from "react-syntax-highlighter/dist/esm/languages/hljs/json";
 import xml from "react-syntax-highlighter/dist/esm/languages/hljs/xml";
 import docco from "react-syntax-highlighter/dist/esm/styles/hljs/docco";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { scrollRowIntoView } from "@/UI/Utils";
 import { words } from "@/UI/words";
 
@@ -36,6 +30,7 @@ SyntaxHighlighter.registerLanguage("xml", xml);
 SyntaxHighlighter.registerLanguage("bash", bash);
 
 interface Props {
+  keyId: string;
   code: string;
   language: "json" | "xml" | "text" | "python" | "bash";
   scrollBottom?: boolean;
@@ -47,6 +42,7 @@ export const CodeHighlighter: React.FC<Props> = ({
   language,
   scrollBottom = false,
   close,
+  keyId,
 }) => {
   const [copied, setCopied] = useState(false);
   const [zoomed, setZoomed] = useState(false);
@@ -55,6 +51,7 @@ export const CodeHighlighter: React.FC<Props> = ({
   const codeBlockRef = useRef<HTMLDivElement>(null);
   const [allowScrollState, setAllowScrollState] = useState(true);
   const minHeight = "10em";
+  const [height, setHeight] = useState(minHeight);
 
   const onCopy = () => {
     copy(code);
@@ -63,49 +60,31 @@ export const CodeHighlighter: React.FC<Props> = ({
       setCopied(false);
     }, 1000);
   };
-  const [height, setHeight] = useState(minHeight);
-  const onZoomIn = () => {
-    if (getNumberOfLines(code) < 10) {
-      setHeight("fit-content");
-    } else {
-      setHeight("90vh");
-    }
-    setZoomed(true);
-    scrollRowIntoView(codeBlockRef, { block: "start", behavior: "smooth" });
-  };
-  const onZoomOut = () => {
-    setHeight(minHeight);
-    setZoomed(false);
-  };
 
   const dropdownActions = [
     <ToggleTooltip
       enabled={wrapLongLines}
       enabledContent={words("codehighlighter.lineWrapping.off")}
       disabledContent={words("codehighlighter.lineWrapping.on")}
-      key="wraplonglines"
+      key={`wraplonglines-${keyId}`}
     >
-      <StyledDropdownItem
-        $isEnabled={wrapLongLines}
-        onClick={() => setWraplongLines(!wrapLongLines)}
-      >
-        <TextWidthIcon />
-      </StyledDropdownItem>
+      <DropdownItem onClick={() => setWraplongLines(!wrapLongLines)}>
+        <Icon style={{ opacity: wrapLongLines ? "1" : "0.4" }}>
+          <TextWidthIcon />
+        </Icon>
+      </DropdownItem>
     </ToggleTooltip>,
     <ToggleTooltip
       enabled={showLineNumbers}
       enabledContent={words("codehighlighter.lineNumbers.off")}
       disabledContent={words("codehighlighter.lineNumbers.on")}
-      key="showlinenumbers"
+      key={`showlinenumbers-${keyId}`}
     >
-      <StyledDropdownItem
-        $isEnabled={showLineNumbers}
-        onClick={() => {
-          setShowLineNumbers(!showLineNumbers);
-        }}
-      >
-        <ListOlIcon />
-      </StyledDropdownItem>
+      <DropdownItem onClick={() => setShowLineNumbers(!showLineNumbers)}>
+        <Icon style={{ opacity: showLineNumbers ? "1" : "0.4" }}>
+          <ListOlIcon />
+        </Icon>
+      </DropdownItem>
     </ToggleTooltip>,
   ];
 
@@ -118,42 +97,40 @@ export const CodeHighlighter: React.FC<Props> = ({
 
   const actions = (
     <>
-      <CenteredCopyButton
-        id="copy-button"
-        textId="code-content"
-        aria-label="Copy to clipboard"
-        onClick={onCopy}
-        exitDelay={600}
-        maxWidth="110px"
-        variant="plain"
+      <ToggleTooltip
+        enabled={copied}
+        disabledContent="Copy to clipboard"
+        enabledContent="Successfully copied to clipboard!"
       >
-        {copied ? "Successfully copied to clipboard!" : "Copy to clipboard"}
-      </CenteredCopyButton>
+        <Icon onClick={onCopy}>
+          <CopyIcon />
+        </Icon>
+      </ToggleTooltip>
       {close && (
-        <SidebarButton variant="plain" aria-label="Close icon" onClick={close}>
+        <Icon onClick={close} aria-label="close-icon">
           <CloseIcon />
-        </SidebarButton>
+        </Icon>
       )}
       <ToggleTooltip
         enabled={zoomed}
         enabledContent={words("codehighlighter.zoom.off")}
         disabledContent={words("codehighlighter.zoom.on")}
       >
         {zoomed ? (
-          <SidebarButton variant="plain" onClick={onZoomOut}>
+          <Icon onClick={() => setZoomed(false)}>
             <CompressArrowsAltIcon />
-          </SidebarButton>
+          </Icon>
         ) : (
-          <SidebarButton variant="plain" onClick={onZoomIn}>
+          <Icon onClick={() => setZoomed(true)}>
             <ExpandArrowsAltIcon />
-          </SidebarButton>
+          </Icon>
         )}
       </ToggleTooltip>
       {scrollBottom && (
         <Tooltip content={words("codehighlighter.scrollToBottom")}>
-          <SidebarButton variant="plain" onClick={resumeAutoScroll}>
+          <Icon onClick={resumeAutoScroll}>
             <LongArrowAltDownIcon />
-          </SidebarButton>
+          </Icon>
         </Tooltip>
       )}
       <IconSettings actions={dropdownActions} />
@@ -172,6 +149,20 @@ export const CodeHighlighter: React.FC<Props> = ({
     allowScrollState && setAllowScrollState(false);
   };
 
+  useEffect(() => {
+    if (zoomed) {
+      if (getNumberOfLines(code) < 10) {
+        setHeight("fit-content");
+      } else {
+        setHeight("90vh");
+      }
+      scrollRowIntoView(codeBlockRef, { block: "start", behavior: "smooth" });
+    } else {
+      setHeight(minHeight);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [zoomed]);
+
   // block scroll if the user scrolls.
   useEffect(() => {
     const preBlock = codeBlockRef.current?.querySelector("pre");
@@ -241,7 +232,7 @@ export const CodeHighlighter: React.FC<Props> = ({
                   {code}
                 </SyntaxHighlighter>
               </FlexItemWithOverflow>
-              <SmallFlexItem>{actions}</SmallFlexItem>
+              <IconContainer>{actions}</IconContainer>
             </Flex>
           </BorderedArea>
         )}
@@ -275,8 +266,15 @@ const FlexItemWithOverflow = styled(FlexItem)`
   width: 100vw;
 `;
 
-const SmallFlexItem = styled(FlexItem)`
+const IconContainer = styled.div`
   width: 4em;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: center;
+  & div {
+    cursor: pointer;
+  }
 `;
 
 const BorderedArea = styled.div`
@@ -288,41 +286,15 @@ const BorderedArea = styled.div`
 const IconSettings: React.FC<{ actions: JSX.Element[] }> = ({ actions }) => {
   const [isOpen, setIsOpen] = useState(false);
   return (
-    <CenteredDropdown
-      toggle={<CenteredToggle onToggle={() => setIsOpen(!isOpen)} />}
+    <Dropdown
+      toggle={<KebabToggle onToggle={() => setIsOpen(!isOpen)} />}
       isOpen={isOpen}
       isPlain
       dropdownItems={actions}
     />
   );
 };
 
-const StyledDropdownItem = styled(DropdownItem)<{ $isEnabled: boolean }>`
-  ${({ $isEnabled }) => ($isEnabled ? "opacity: 1;" : "opacity: 0.4;")}
-`;
-
-const centeredSidebarStyles = css`
-  padding-left: 0;
-  padding-right: 0;
-  margin: auto;
-  width: 100%;
-`;
-
-const SidebarButton = styled(Button)`
-  ${centeredSidebarStyles}
-`;
-
-const CenteredDropdown = styled(Dropdown)`
-  ${centeredSidebarStyles}
-`;
-const CenteredToggle = styled(KebabToggle)`
-  ${centeredSidebarStyles}
-`;
-
-const CenteredCopyButton = styled(ClipboardCopyButton)`
-  ${centeredSidebarStyles}
-`;
-
 const ToggleTooltip: React.FC<{
   enabled: boolean;
   enabledContent: string;
@@ -332,10 +304,11 @@ const ToggleTooltip: React.FC<{
   return (
     <Tooltip
       entryDelay={200}
-      content={enabled ? enabledContent : disabledContent}
-      style={{ width: "150px" }}
+      animationDuration={0}
+      position="left"
+      content={<div>{enabled ? enabledContent : disabledContent}</div>}
     >
-      <span>{children}</span>
+      <>{children}</>
     </Tooltip>
   );
 };

src/UI/Components/DesiredStateAttributes/AttributeList.tsx

@@ -76,12 +76,22 @@ const AttributeValue: React.FC<{
       return <FileBlock hash={attribute.value} />;
 
     case "Json":
-      return <CodeHighlighter code={attribute.value} language="json" />;
+      return (
+        <CodeHighlighter keyId="json" code={attribute.value} language="json" />
+      );
 
     case "Xml":
-      return <CodeHighlighter code={attribute.value} language="xml" />;
+      return (
+        <CodeHighlighter keyId="xml" code={attribute.value} language="xml" />
+      );
     case "Python":
-      return <CodeHighlighter code={attribute.value} language="python" />;
+      return (
+        <CodeHighlighter
+          keyId="python"
+          code={attribute.value}
+          language="python"
+        />
+      );
   }
 };
 

src/UI/Components/DesiredStateAttributes/FileBlock.tsx

@@ -54,7 +54,12 @@ export const FileBlock: React.FC<{ hash: string }> = ({ hash }) => {
             </Alert>
           ),
           success: (content) => (
-            <CodeHighlighter code={content} language="text" close={close} />
+            <CodeHighlighter
+              keyId="fileblock"
+              code={content}
+              language="text"
+              close={close}
+            />
           ),
         },
         fileContent,