refactor(tooltip): discovery-148 pf4 tooltip, popover (#132)

* credentialListItem, content attr * listStatusItem, content attr * scans, download,listItem, content attr * sourceListItem, content attr, isPopover * tooltip, pf4 popover, tooltip wrapper * viewToolbar, content attr
quipucords · Aug 3, 2022 · ceca4e3 · ceca4e3
1 parent cab6cfe
commit ceca4e3
Show file tree

Hide file tree

Showing 18 changed files with 815 additions and 509 deletions.
diff --git a/src/components/credentials/__tests__/__snapshots__/credentialsListItem.test.js.snap b/src/components/credentials/__tests__/__snapshots__/credentialsListItem.test.js.snap
diff --git a/src/components/credentials/credentialListItem.js b/src/components/credentials/credentialListItem.js
@@ -72,7 +72,7 @@ class CredentialListItem extends React.Component {
     const { item, onEdit, onDelete } = this.props;
 
     return [
-      <Tooltip key="editButton" tooltip="View Credential">
+      <Tooltip key="editButton" content="View Credential">
         <Button
           onClick={() => {
             onEdit(item);
@@ -83,7 +83,7 @@ class CredentialListItem extends React.Component {
           <Icon type="fa" name="eye" />
         </Button>
       </Tooltip>,
-      <Tooltip key="deleteButton" tooltip="Delete Credential">
+      <Tooltip key="deleteButton" content="Delete Credential">
         <Button
           onClick={() => {
             onDelete(item);
@@ -131,7 +131,7 @@ class CredentialListItem extends React.Component {
           <List isPlain>
             {item?.sources?.map(source => (
               <ListItem key={source.name} icon={<Icon type={typeIcon.type} name={typeIcon.name} />}>
-                <Tooltip tooltip={dictionary[source.source_type]}>{source.name}</Tooltip>
+                <Tooltip content={dictionary[source.source_type]}>{source.name}</Tooltip>
               </ListItem>
             ))}
           </List>
@@ -147,7 +147,7 @@ class CredentialListItem extends React.Component {
     const sourceTypeIcon = helpers.sourceTypeIcon(item.cred_type);
 
     const leftContent = (
-      <Tooltip tooltip={dictionary[item.cred_type]}>
+      <Tooltip content={dictionary[item.cred_type]}>
         <ListView.Icon type={sourceTypeIcon.type} name={sourceTypeIcon.name} />
       </Tooltip>
     );
@@ -158,7 +158,7 @@ class CredentialListItem extends React.Component {
           <ListView.DescriptionHeading>{item.name}</ListView.DescriptionHeading>
         </span>
         <span className="quipucords-description-right">
-          <Tooltip tooltip="Authorization Type">{dictionary[CredentialListItem.authType(item)]}</Tooltip>
+          <Tooltip content="Authorization Type">{dictionary[CredentialListItem.authType(item)]}</Tooltip>
         </span>
       </div>
     );

diff --git a/src/components/listStatusItem/__tests__/__snapshots__/listStatusItem.test.js.snap b/src/components/listStatusItem/__tests__/__snapshots__/listStatusItem.test.js.snap
@@ -4,21 +4,19 @@ exports[`ListStatusItem Component should render 1`] = `
 <div
   class="list-view-pf-additional-info-item list-view-info-item-icon-count"
 >
-  <span>
-    <div
-      class="list-view-pf-expand active"
-    >
-      <span
-        class="fa fa-angle-right fa-angle-down"
-      />
-      <span
-        aria-hidden="true"
-        class="fa fa-id-card list-view-compound-item-icon"
-      />
-      <strong>
-        100
-      </strong>
-    </div>
-  </span>
+  <div
+    class="list-view-pf-expand active"
+  >
+    <span
+      class="fa fa-angle-right fa-angle-down"
+    />
+    <span
+      aria-hidden="true"
+      class="fa fa-id-card list-view-compound-item-icon"
+    />
+    <strong>
+      100
+    </strong>
+  </div>
 </div>
 `;
diff --git a/src/components/listStatusItem/listStatusItem.js b/src/components/listStatusItem/listStatusItem.js
@@ -10,7 +10,7 @@ const ListStatusItem = ({ count, emptyText, tipSingular, tipPlural, expanded, ex
   if (count <= 0) {
     return (
       <ListView.InfoItem className="list-view-info-item-icon-count empty-count">
-        <Tooltip tooltip={`0 ${tipPlural}`}>
+        <Tooltip content={`0 ${tipPlural}`}>
           <span>{emptyText}</span>
         </Tooltip>
       </ListView.InfoItem>
@@ -19,7 +19,7 @@ const ListStatusItem = ({ count, emptyText, tipSingular, tipPlural, expanded, ex
 
   return (
     <ListView.InfoItem className="list-view-info-item-icon-count">
-      <Tooltip tooltip={`${count}  ${count === 1 ? tipSingular : tipPlural}`}>
+      <Tooltip content={`${count}  ${count === 1 ? tipSingular : tipPlural}`}>
         <ListView.Expand
           expanded={expanded}
           toggleExpanded={() => {

diff --git a/src/components/scans/__tests__/__snapshots__/scanDownload.test.js.snap b/src/components/scans/__tests__/__snapshots__/scanDownload.test.js.snap
@@ -19,66 +19,126 @@ exports[`ScanDownload Component should have an optional tooltip: tooltip 1`] = `
   tooltip="Lorem ipsum dolor sit"
 >
   <Tooltip
+    content="Lorem ipsum dolor sit"
     delayShow={500}
     id={null}
+    isPopover={false}
     placement="top"
-    popover={null}
-    rootClose={true}
-    tooltip="Lorem ipsum dolor sit"
-    trigger={
-      Array [
-        "hover",
-      ]
-    }
   >
-    <OverlayTrigger
-      defaultOverlayShown={false}
-      delayShow={500}
-      overlay={
-        <Tooltip
-          bsClass="tooltip"
-          id="generatedid-"
-          placement="right"
-        >
-          Lorem ipsum dolor sit
-        </Tooltip>
-      }
-      placement="top"
-      rootClose={true}
-      trigger={
-        Array [
-          "hover",
-        ]
-      }
+    <Tooltip
+      content="Lorem ipsum dolor sit"
+      entryDelay={500}
+      id="generatedid-"
+      position="top"
     >
-      <span
-        onClick={null}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
+      <Popper
+        appendTo={[Function]}
+        distance={15}
+        enableFlip={true}
+        flipBehavior={
+          Array [
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "top",
+            "right",
+            "bottom",
+          ]
+        }
+        isVisible={false}
+        onBlur={[Function]}
+        onDocumentClick={false}
+        onDocumentKeyDown={[Function]}
+        onFocus={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onPopperMouseEnter={[Function]}
+        onPopperMouseLeave={[Function]}
+        onTriggerEnter={[Function]}
+        placement="top"
+        popper={
+          <div
+            aria-live="off"
+            className="pf-c-tooltip"
+            id="generatedid-"
+            role="tooltip"
+            style={
+              Object {
+                "maxWidth": null,
+                "opacity": 0,
+                "transition": "opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11)",
+              }
+            }
+          >
+            <TooltipArrow />
+            <TooltipContent
+              isLeftAligned={false}
+            >
+              Lorem ipsum dolor sit
+            </TooltipContent>
+          </div>
+        }
+        popperMatchesTriggerWidth={false}
+        positionModifiers={
+          Object {
+            "bottom": "pf-m-bottom",
+            "bottom-end": "pf-m-bottom-right",
+            "bottom-start": "pf-m-bottom-left",
+            "left": "pf-m-left",
+            "left-end": "pf-m-left-bottom",
+            "left-start": "pf-m-left-top",
+            "right": "pf-m-right",
+            "right-end": "pf-m-right-bottom",
+            "right-start": "pf-m-right-top",
+            "top": "pf-m-top",
+            "top-end": "pf-m-top-right",
+            "top-start": "pf-m-top-left",
+          }
+        }
+        trigger={
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="default"
+            disabled={false}
+            id="generatedid-"
+            onClick={[Function]}
+            title="Download"
+          >
+            Download
+          </Button>
+        }
+        zIndex={9999}
       >
-        <Button
-          active={false}
-          block={false}
-          bsClass="btn"
-          bsStyle="default"
-          disabled={false}
-          id="generatedid-"
-          onClick={[Function]}
-          title="Download"
+        <FindRefWrapper
+          onFoundRef={[Function]}
         >
-          <button
-            className="btn btn-default"
+          <Button
+            active={false}
+            block={false}
+            bsClass="btn"
+            bsStyle="default"
             disabled={false}
             id="generatedid-"
             onClick={[Function]}
             title="Download"
-            type="button"
           >
-            Download
-          </button>
-        </Button>
-      </span>
-    </OverlayTrigger>
+            <button
+              className="btn btn-default"
+              disabled={false}
+              id="generatedid-"
+              onClick={[Function]}
+              title="Download"
+              type="button"
+            >
+              Download
+            </button>
+          </Button>
+        </FindRefWrapper>
+      </Popper>
+    </Tooltip>
   </Tooltip>
 </ScanDownload>
 `;

diff --git a/src/components/scans/__tests__/__snapshots__/scanListItem.test.js.snap b/src/components/scans/__tests__/__snapshots__/scanListItem.test.js.snap
@@ -34,17 +34,11 @@ exports[`ScanListItem Component should render a non-connected component: non-con
     actions={
       <React.Fragment>
         <Tooltip
+          content="Run Scan"
           delayShow={500}
           id={null}
+          isPopover={false}
           placement="top"
-          popover={null}
-          rootClose={true}
-          tooltip="Run Scan"
-          trigger={
-            Array [
-              "hover",
-            ]
-          }
         >
           <Button
             active={false}

diff --git a/src/components/scans/__tests__/__snapshots__/scans.test.js.snap b/src/components/scans/__tests__/__snapshots__/scans.test.js.snap
@@ -58,17 +58,11 @@ exports[`Scans Component should render a non-connected component: non-connected
         className="form-group"
       >
         <Tooltip
+          content="Merge selected scan results into a single report"
           delayShow={500}
           id={null}
+          isPopover={false}
           placement="top"
-          popover={null}
-          rootClose={true}
-          tooltip="Merge selected scan results into a single report"
-          trigger={
-            Array [
-              "hover",
-            ]
-          }
         >
           <Button
             active={false}

diff --git a/src/components/scans/scanDownload.js b/src/components/scans/scanDownload.js
@@ -49,7 +49,7 @@ class ScanDownload extends React.Component {
 
     return (
       <React.Fragment>
-        {tooltip && <Tooltip tooltip={tooltip}>{button}</Tooltip>}
+        {tooltip && <Tooltip content={tooltip}>{button}</Tooltip>}
         {!tooltip && button}
       </React.Fragment>
     );

diff --git a/src/components/scans/scanListItem.js b/src/components/scans/scanListItem.js
@@ -216,7 +216,7 @@ class ScanListItem extends React.Component {
       case 'completed':
         return (
           <React.Fragment>
-            <Tooltip tooltip="Run Scan">
+            <Tooltip content="Run Scan">
               <Button onClick={() => this.onStartScan(scan)} bsStyle="link">
                 <Icon type="pf" name="spinner2" aria-label="Start" />
               </Button>
@@ -228,7 +228,7 @@ class ScanListItem extends React.Component {
       case 'canceled':
         return (
           <React.Fragment>
-            <Tooltip tooltip="Retry Scan">
+            <Tooltip content="Retry Scan">
               <Button onClick={() => this.onStartScan(scan)} bsStyle="link">
                 <Icon type="pf" name="spinner2" aria-label="Start" />
               </Button>
@@ -240,12 +240,12 @@ class ScanListItem extends React.Component {
       case 'running':
         return (
           <React.Fragment>
-            <Tooltip key="pauseButton" tooltip="Pause Scan">
+            <Tooltip key="pauseButton" content="Pause Scan">
               <Button onClick={this.onPauseScan} bsStyle="link">
                 <Icon type="fa" name="pause" aria-label="Pause" />
               </Button>
             </Tooltip>
-            <Tooltip key="stop" tooltip="Cancel Scan">
+            <Tooltip key="stop" content="Cancel Scan">
               <Button onClick={this.onCancelScan} bsStyle="link">
                 <Icon type="fa" name="stop" aria-label="Stop" />
               </Button>
@@ -256,7 +256,7 @@ class ScanListItem extends React.Component {
       case 'paused':
         return (
           <React.Fragment>
-            <Tooltip tooltip="Resume Scan">
+            <Tooltip content="Resume Scan">
               <Button onClick={this.onResumeScan} bsStyle="link">
                 <Icon type="fa" name="play" aria-label="Resume" />
               </Button>
@@ -267,7 +267,7 @@ class ScanListItem extends React.Component {
       case 'pending':
         return (
           <React.Fragment>
-            <Tooltip key="stop" tooltip="Cancel Scan">
+            <Tooltip key="stop" content="Cancel Scan">
               <Button onClick={this.onCancelScan} bsStyle="link">
                 <Icon type="fa" name="stop" aria-label="Stop" />
               </Button>
@@ -278,7 +278,7 @@ class ScanListItem extends React.Component {
       default:
         return (
           <React.Fragment>
-            <Tooltip tooltip="Start Scan">
+            <Tooltip content="Start Scan">
               <Button onClick={this.onStartScan} bsStyle="link">
                 <Icon type="fa" name="play" aria-label="Start" />
               </Button>

diff --git a/src/components/scans/scans.js b/src/components/scans/scans.js
@@ -80,7 +80,7 @@ class Scans extends React.Component {
 
     return (
       <div className="form-group">
-        <Tooltip key="mergeButtonTip" tooltip="Merge selected scan results into a single report">
+        <Tooltip key="mergeButtonTip" content="Merge selected scan results into a single report">
           <ButtonPf3
             id="merge-reports"
             disabled={viewOptions.selectedItems.length <= 1}