Web console: Better hotkeys and library upgrades (apache#11365)

* improve hotkeys * fix test name * refactor explain dialog * explain tests * small fixes * update to popover2 * use resize sensor 2 * misc cleanup
confluentinc · Jun 18, 2021 · f56a5b9 · f56a5b9
1 parent 2e98d3c
commit f56a5b9
Show file tree

Hide file tree

Showing 65 changed files with 1,356 additions and 1,311 deletions.
diff --git a/licenses.yaml b/licenses.yaml
@@ -4931,6 +4931,15 @@ version: 3.26.1
 
 ---
 
+name: "@blueprintjs/popover2"
+license_category: binary
+module: web-console
+license_name: Apache License version 2.0
+copyright: Palantir Technologies
+version: 0.10.1
+
+---
+
 name: "@hypnosphi/create-react-context"
 license_category: binary
 module: web-console
@@ -4941,6 +4950,16 @@ license_file_path: licenses/bin/@hypnosphi-create-react-context.MIT
 
 ---
 
+name: "@popperjs/core"
+license_category: binary
+module: web-console
+license_name: MIT License
+copyright: Federico Zivolo
+version: 2.9.2
+license_file_path: licenses/bin/@popperjs-core.MIT
+
+---
+
 name: "@types/dom4"
 license_category: binary
 module: web-console
@@ -5498,6 +5517,16 @@ license_file_path: licenses/bin/react-dom.MIT
 
 ---
 
+name: "react-fast-compare"
+license_category: binary
+module: web-console
+license_name: MIT License
+copyright: Chris Bolin
+version: 3.2.0
+license_file_path: licenses/bin/react-fast-compare.MIT
+
+---
+
 name: "react-is"
 license_category: binary
 module: web-console

diff --git a/licenses/bin/@popperjs-core.MIT b/licenses/bin/@popperjs-core.MIT
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Federico Zivolo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/licenses/bin/react-fast-compare.MIT b/licenses/bin/react-fast-compare.MIT
@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2018 Formidable Labs
+Copyright (c) 2017 Evgeny Poberezkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/web-console/package-lock.json b/web-console/package-lock.json
diff --git a/web-console/package.json b/web-console/package.json
@@ -69,6 +69,7 @@
     "@blueprintjs/core": "^3.45.0",
     "@blueprintjs/datetime": "^3.23.4",
     "@blueprintjs/icons": "^3.26.1",
+    "@blueprintjs/popover2": "^0.10.1",
     "axios": "^0.21.1",
     "brace": "^0.11.1",
     "classnames": "^2.2.6",

diff --git a/web-console/src/components/action-cell/action-cell.tsx b/web-console/src/components/action-cell/action-cell.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
-import { Popover, Position } from '@blueprintjs/core';
+import { Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import { BasicAction, basicActionsToMenu } from '../../utils/basic-action';
@@ -42,9 +43,9 @@ export const ActionCell = React.memo(function ActionCell(props: ActionCellProps)
     <div className="action-cell">
       {onDetail && <ActionIcon icon={IconNames.SEARCH_TEMPLATE} onClick={onDetail} />}
       {actionsMenu && (
-        <Popover content={actionsMenu} position={Position.BOTTOM_RIGHT}>
+        <Popover2 content={actionsMenu} position={Position.BOTTOM_RIGHT}>
           <ActionIcon icon={IconNames.WRENCH} />
-        </Popover>
+        </Popover2>
       )}
     </div>
   );

diff --git a/web-console/src/components/auto-form/auto-form.scss b/web-console/src/components/auto-form/auto-form.scss
@@ -24,14 +24,6 @@
     .bp3-text-muted {
       position: absolute;
       right: 0;
-
-      .bp3-popover-wrapper {
-        display: inline;
-
-        .bp3-popover-target {
-          display: inline;
-        }
-      }
     }
   }
 }
diff --git a/...sole/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap b/...sole/src/components/form-group-with-info/__snapshots__/form-group-with-info.spec.tsx.snap
@@ -13,30 +13,26 @@ exports[`form group with info matches snapshot 1`] = `
       class="bp3-text-muted"
     >
       <span
-        class="bp3-popover-wrapper"
+        class="bp3-popover2-target"
       >
         <span
-          class="bp3-popover-target"
+          class="bp3-icon bp3-icon-info-sign"
+          icon="info-sign"
         >
-          <span
-            class="bp3-icon bp3-icon-info-sign"
-            icon="info-sign"
+          <svg
+            data-icon="info-sign"
+            height="14"
+            viewBox="0 0 16 16"
+            width="14"
           >
-            <svg
-              data-icon="info-sign"
-              height="14"
-              viewBox="0 0 16 16"
-              width="14"
-            >
-              <desc>
-                info-sign
-              </desc>
-              <path
-                d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
+            <desc>
+              info-sign
+            </desc>
+            <path
+              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
+              fill-rule="evenodd"
+            />
+          </svg>
         </span>
       </span>
     </span>

diff --git a/web-console/src/components/form-group-with-info/form-group-with-info.scss b/web-console/src/components/form-group-with-info/form-group-with-info.scss
@@ -17,13 +17,17 @@
  */
 
 .form-group-with-info {
+  .bp3-text-muted .bp3-popover2-target {
+    margin-top: 0;
+  }
+
   .bp3-form-content {
     position: relative;
 
-    & > .bp3-popover-wrapper {
+    & > .bp3-popover2-target {
       position: absolute;
       right: 0;
-      top: 7px;
+      top: 5px;
     }
   }
 }
diff --git a/web-console/src/components/form-group-with-info/form-group-with-info.tsx b/web-console/src/components/form-group-with-info/form-group-with-info.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
-import { FormGroup, Icon, Popover } from '@blueprintjs/core';
+import { FormGroup, Icon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';
 
 import './form-group-with-info.scss';
@@ -35,9 +36,9 @@ export const FormGroupWithInfo = React.memo(function FormGroupWithInfo(
   const { label, info, inlineInfo, children } = props;
 
   const popover = (
-    <Popover content={info} position="left-bottom" boundary="viewport">
+    <Popover2 content={info} position="left-bottom">
       <Icon icon={IconNames.INFO_SIGN} iconSize={14} />
-    </Popover>
+    </Popover2>
   );
 
   return (

diff --git a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
@@ -77,8 +77,8 @@ exports[`header bar matches snapshot 1`] = `
         }
       }
     />
-    <Blueprint3.Popover
-      boundary="scrollParent"
+    <Blueprint3.Popover2
+      boundary="clippingParents"
       captureDismiss={false}
       content={
         <Blueprint3.Menu>
@@ -166,21 +166,20 @@ exports[`header bar matches snapshot 1`] = `
       inheritDarkTheme={true}
       interactionKind="click"
       minimal={false}
-      modifiers={Object {}}
       openOnTargetFocus={true}
       position="bottom-right"
+      positioningStrategy="absolute"
       targetTagName="span"
       transitionDuration={300}
       usePortal={true}
-      wrapperTagName="span"
     >
       <Blueprint3.Button
         icon="cog"
         minimal={true}
       />
-    </Blueprint3.Popover>
-    <Blueprint3.Popover
-      boundary="scrollParent"
+    </Blueprint3.Popover2>
+    <Blueprint3.Popover2
+      boundary="clippingParents"
       captureDismiss={false}
       content={
         <Blueprint3.Menu>
@@ -244,19 +243,18 @@ exports[`header bar matches snapshot 1`] = `
       inheritDarkTheme={true}
       interactionKind="click"
       minimal={false}
-      modifiers={Object {}}
       openOnTargetFocus={true}
       position="bottom-right"
+      positioningStrategy="absolute"
       targetTagName="span"
       transitionDuration={300}
       usePortal={true}
-      wrapperTagName="span"
     >
       <Blueprint3.Button
         icon="help"
         minimal={true}
       />
-    </Blueprint3.Popover>
+    </Blueprint3.Popover2>
   </Blueprint3.NavbarGroup>
 </Blueprint3.Navbar>
 `;
diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
@@ -27,10 +27,10 @@ import {
   Navbar,
   NavbarDivider,
   NavbarGroup,
-  Popover,
   Position,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
 import {
@@ -175,7 +175,7 @@ const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeP
   }
 
   return (
-    <Popover
+    <Popover2
       content={
         <PopoverText>
           <p>The console is running in restricted mode.</p>
@@ -192,7 +192,7 @@ const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeP
       position={Position.BOTTOM_RIGHT}
     >
       <Button icon={IconNames.WARNING_SIGN} text={label} intent={Intent.WARNING} minimal />
-    </Popover>
+    </Popover2>
   );
 });
 
@@ -367,12 +367,12 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <RestrictedMode capabilities={capabilities} />
-        <Popover content={configMenu} position={Position.BOTTOM_RIGHT}>
+        <Popover2 content={configMenu} position={Position.BOTTOM_RIGHT}>
           <Button minimal icon={IconNames.COG} />
-        </Popover>
-        <Popover content={helpMenu} position={Position.BOTTOM_RIGHT}>
+        </Popover2>
+        <Popover2 content={helpMenu} position={Position.BOTTOM_RIGHT}>
           <Button minimal icon={IconNames.HELP} />
-        </Popover>
+        </Popover2>
       </NavbarGroup>
       {aboutDialogOpen && <AboutDialog onClose={() => setAboutDialogOpen(false)} />}
       {doctorDialogOpen && <DoctorDialog onClose={() => setDoctorDialogOpen(false)} />}