Merge pull request deepfence#504 from deepfence/ui-es-1542-fix

Render custom dropdown in a portal to avoid overflow clipping
MilanRajkumar · Aug 1, 2022 · b281378 · b281378
2 parents 0bda1cc + 40fa62d
commit b281378
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 24 deletions.
diff --git a/deepfence_ui/app/scripts/components/common/multi-select/app-searchable.js b/deepfence_ui/app/scripts/components/common/multi-select/app-searchable.js
@@ -4,15 +4,21 @@ import React, { useRef } from 'react';
 import Select from 'react-select';
 import { List } from 'react-virtualized';
 import useClickAway from 'react-use/lib/useClickAway';
+import Portal from "@reach/portal";
 
 const Menu = props => {
   const ref = useRef(null);
   useClickAway(ref, () => {
     props?.onClose?.();
   });
   const shadow = 'hsla(218, 50%, 10%, 0.1)';
-  const { maxOptionCharLength, dropdownExpandDirection = 'right' } = props;
-
+  const {
+    maxOptionCharLength,
+    dropdownExpandDirection = 'right',
+    targetRef,
+    ...rest
+  } = props;
+  const targetClientRect = targetRef?.current?.getBoundingClientRect?.();
   let expansionDirection = 'left';
   if (dropdownExpandDirection === 'right') {
     expansionDirection = 'left';
@@ -31,10 +37,20 @@ const Menu = props => {
     // where all characters are 'm' in small case. (character 'm'
     // takes the most pixel width in the current font family @ 14px size)
     // Make sure the width doesn't fall below 100%
-    width: `${Math.max(100, maxSupportedCharLength * 4)}%`,
-    [`${expansionDirection}`]: 0,
+    width: `${Math.max(targetClientRect?.width ?? 0, maxSupportedCharLength * 10)}px`,
+    maxWidth: '400px',
+    top: 8 + (targetClientRect?.y ?? 0) + (window.scrollY ?? 0) + (targetClientRect?.height ?? 0),
+    [`${expansionDirection}`]: expansionDirection === 'left' ? (targetClientRect?.x ?? 0) : `calc(100vw - ${(targetClientRect?.right ?? 0)}px)`,
   };
-  return <div ref={ref} className="df-select" style={MenuStyle} {...props} />;
+
+  return (
+    <div
+      ref={ref}
+      className="df-select"
+      style={MenuStyle}
+      {...rest}
+    />
+  );
 };
 const Dropdown = ({
   children,
@@ -43,20 +59,29 @@ const Dropdown = ({
   onClose,
   maxOptionCharLength,
   dropdownExpandDirection,
-}) => (
-  <div style={{ position: 'relative' }}>
-    {target}
-    {isOpen ? (
-      <Menu
-        maxOptionCharLength={maxOptionCharLength}
-        dropdownExpandDirection={dropdownExpandDirection}
-        onClose={onClose}
-      >
-        {children}
-      </Menu>
-    ) : null}
-  </div>
-);
+}) => {
+  const targetRef = useRef(null);
+  return (
+    <div style={{ position: 'relative' }}>
+      <span ref={targetRef}>
+        {target}
+      </span>
+      {isOpen ? (
+        <Portal>
+          <Menu
+            maxOptionCharLength={maxOptionCharLength}
+            dropdownExpandDirection={dropdownExpandDirection}
+            onClose={onClose}
+            targetRef={targetRef}
+          >
+            {children}
+          </Menu>
+        </Portal>
+      ) : null}
+    </div>
+  );
+};
+
 const Svg = p => (
   <svg
     width="24"

diff --git a/deepfence_ui/app/scripts/components/vulnerability-view/cve-image-report.js b/deepfence_ui/app/scripts/components/vulnerability-view/cve-image-report.js
@@ -249,8 +249,8 @@ class CVEImageReport extends React.PureComponent {
     }];
     return (
       <div>
-        <div style={{ display: 'flex' }}>
-          <div className="dataTables_length d-flex justify-content-start">
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <div className="dataTables_length d-flex justify-content-start" style={{width: 'auto'}}>
             <label htmlFor="true">
               {'Show '}
               <select

diff --git a/deepfence_ui/app/scripts/components/vulnerability-view/registry-scan/image-list.js b/deepfence_ui/app/scripts/components/vulnerability-view/registry-scan/image-list.js
@@ -478,7 +478,7 @@ class RegistryImageList extends React.PureComponent {
     const lastUpdated = lastUpdatedIm.getIn([registryType, registryId], '');
     return (
       <div className="registry-image-list">
-        <div className="d-flex justify-content-start">
+        <div className="d-flex" style={{justifyContent: 'space-between'}}>
           {lastUpdated && (
             <div className="refresh-container" style={{ marginTop: '30px' }}>
               <div className="message">

diff --git a/deepfence_ui/app/styles/modal/styles.scss b/deepfence_ui/app/styles/modal/styles.scss
@@ -156,7 +156,6 @@
 }
 
 .df-generic-modal {
-  // height: 100%;
   background-color: #222222;
 
   .modal-header {
@@ -178,6 +177,9 @@
 
   .modal-body {
     padding: 0 40px 32px 40px;
+    overflow-y: auto;
+    max-height: 70vh;
+    height: 100%;
 
     .node-details-table-node-link {
       color: rgba(255, 255, 255, 0.72);

diff --git a/deepfence_ui/package.json b/deepfence_ui/package.json
@@ -11,6 +11,7 @@
     "@antv/g2plot": "^2.3.33",
     "@antv/g6": "^4.3.3",
     "@babel/helper-module-imports": "^7.0.0",
+    "@reach/portal": "^0.17.0",
     "@tippyjs/react": "^4.2.6",
     "classnames": "^2.3.1",
     "d3-format": "^1.3.2",

diff --git a/deepfence_ui/yarn.lock b/deepfence_ui/yarn.lock
@@ -1606,6 +1606,23 @@
   dependencies:
     "@babel/runtime" "^7.0.0"
 
+"@reach/portal@^0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.17.0.tgz#1dd69ffc8ffc8ba3e26dd127bf1cc4b15f0c6bdc"
+  integrity sha512-+IxsgVycOj+WOeNPL2NdgooUdHPSY285wCtj/iWID6akyr4FgGUK7sMhRM9aGFyrGpx2vzr+eggbUmAVZwOz+A==
+  dependencies:
+    "@reach/utils" "0.17.0"
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
+"@reach/[email protected]":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.17.0.tgz#3d1d2ec56d857f04fe092710d8faee2b2b121303"
+  integrity sha512-M5y8fCBbrWeIsxedgcSw6oDlAMQDkl5uv3VnMVJ7guwpf4E48Xlh1v66z/1BgN/WYe2y8mB/ilFD2nysEfdGeA==
+  dependencies:
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
 "@tippyjs/react@^4.2.6":
   version "4.2.6"
   resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
@@ -7774,7 +7791,7 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
 
-tiny-warning@^1.0.0:
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -7880,6 +7897,11 @@ tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
+tslib@^2.3.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"