Migrate user avatar to pattern fly (#875)

ui/README.md

@@ -13,7 +13,9 @@ about the available scripts and the tooling behavior.
 
 ### Build Tooling
 
-- [Docker](https://www.docker.com/)
+One easy route to current stackrox build tooling is to use
+https://github.com/stackrox/stackrox-env.
+
 - [Node.js](https://nodejs.org/en/) `10.15.3 LTS` or higher (it's highly
  recommended to use an LTS version, if you're managing multiple versions of
  Node.js on your machine, consider using
@@ -23,12 +25,24 @@ about the available scripts and the tooling behavior.
 ### GitHub Packages NPM Registry
 
 This project depends on packages with `@stackrox` scope accessible from GitHub
-Packages NPM registry. Setup your dev env by following
-[these instructions](https://docs.engineering.redhat.com/display/StackRox/Using+GitHub+Packages+with+NPM)
-to authenticate with the registry.
+Packages NPM registry. Get access with:
+
+```
+npm login --auth-type=legacy --registry=https://npm.pkg.github.com
+```
+
+Use your github username and a token with `repo` and `read:packages` rights.
+More details can be found
+[here](https://docs.engineering.redhat.com/display/StackRox/Using+GitHub+Packages+with+NPM).
 
 ### UI Dev Server
 
+To avoid a connection error with node v1.17+ set:
+
+```
+export NODE_OPTIONS=--openssl-legacy-provider
+```
+
 _If you're going to use `yarn` instead of `make` targets, make sure you've run
 `yarn install` to download dependencies._
 
@@ -37,8 +51,16 @@ in a browser window that will auto-refresh on any source code or CSS changes.
 
 By default UI dev server will try to proxy API requests to
 `https://dev.infra.rox.systems`. To override the API endpoint use
-`INFRA_API_ENDPOINT` env var. I.e. you can start the dev server via
-`export INFRA_API_ENDPOINT=<api_endpoint>; yarn start`.
+`INFRA_API_ENDPOINT` env var. For example if you are only changing `ui/` code
+you can interact with the production infra instance via:
+
+```
+INFRA_API_ENDPOINT=https://infra.rox.systems yarn start
+```
+
+To access the API you need to copy a `token` cookie from a session with the
+infra instance you are using to the browser window that appears when you execute
+`yarn start`.
 
 ### Generated Sources
 

ui/package.json

@@ -22,6 +22,7 @@
  "gen:src": "./scripts/generate-client.sh"
  },
  "dependencies": {
+ "@patternfly/react-core": "^4.276.8",
  "@stackrox/ui-components": "^0.3.0",
  "axios": "^0.21.4",
  "formik": "^2.2.9",

ui/src/containers/AppHeader/UserInfo.tsx

@@ -1,18 +1,24 @@
 import React, { ReactElement } from 'react';
 
-import { Avatar } from '@stackrox/ui-components';
+import { Avatar } from '@patternfly/react-core';
 import { useUserAuth } from 'containers/UserAuthProvider';
 import { LogOut } from 'react-feather';
 
 export default function UserInfo(): ReactElement {
  const { user, logout } = useUserAuth();
  return (
  <div className="flex flex-row h-full w-full items-center mr-2">
- <Avatar
- name={user?.Name}
- imageSrc={user?.Picture}
- extraClassName="flex w-12 h-12 justify-center items-center mr-2"
- />
+ {user?.Picture ? (
+ <Avatar
+ alt={user?.Name || 'anonymous'}
+ src={user.Picture}
+ size="md"
+ border="dark"
+ className="flex justify-center items-center mr-2"
+ />
+ ) : (
+ <p className="flex justify-center items-center mr-2">{user?.Name || 'anonymous'}</p>
+ )}
  <button onClick={logout} type="button" className="btn btn-base">
  <LogOut size={16} className="mr-2" />
  Logout

ui/yarn.lock

@@ -1728,6 +1728,34 @@
  dependencies:
  mkdirp "^1.0.4"
 
+"@patternfly/react-core@^4.276.8":
+ version "4.276.8"
+ resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.276.8.tgz#7ef52830dcdda954bd5bec40132da6eef49aba6f"
+ integrity sha512-dn322rEzBeiVztZEuCZMUUittNb8l1hk30h9ZN31FLZLLVtXGlThFNV9ieqOJYA9zrYxYZrHMkTnOxSWVacMZg==
+ dependencies:
+ "@patternfly/react-icons" "^4.93.6"
+ "@patternfly/react-styles" "^4.92.6"
+ "@patternfly/react-tokens" "^4.94.6"
+ focus-trap "6.9.2"
+ react-dropzone "9.0.0"
+ tippy.js "5.1.2"
+ tslib "^2.0.0"
+
+"@patternfly/react-icons@^4.93.6":
+ version "4.93.6"
+ resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.93.6.tgz#4aff18724afa30157e3ffd6a6414951dbb39dcb3"
+ integrity sha512-ZrXegc/81oiuTIeWvoHb3nG/eZODbB4rYmekBEsrbiysyO7m/sUFoi/RLvgFINrRoh6YCJqL5fj06Jg6d7jX1g==
+
+"@patternfly/react-styles@^4.92.6":
+ version "4.92.6"
+ resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.92.6.tgz#a72c5f0b7896ce1c419d1db79f8e39ba6632057d"
+ integrity sha512-b8uQdEReMyeoMzjpMri845QxqtupY/tIFFYfVeKoB2neno8gkcW1RvDdDe62LF88q45OktCwAe/8A99ker10Iw==
+
+"@patternfly/react-tokens@^4.94.6":
+ version "4.94.6"
+ resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.94.6.tgz#47c715721ad3dd315a523f352ba1a0de2b03f0bc"
+ integrity sha512-tm7C6nat+uKMr1hrapis7hS3rN9cr41tpcCKhx6cod6FLU8KwF2Yt5KUxakhIOCEcE/M/EhXhAw/qejp8w0r7Q==
+
 "@pmmmwh/[email protected]":
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.2.tgz#1f9741e0bde9790a0e13272082ed7272a083620d"
@@ -2980,6 +3008,13 @@ atob@^2.1.2:
  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+attr-accept@^1.1.3:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.3.tgz#48230c79f93790ef2775fcec4f0db0f5db41ca52"
+ integrity sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==
+ dependencies:
+ core-js "^2.5.0"
+
 autoprefixer@^10.3.4:
  version "10.3.4"
  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.3.4.tgz#29efe5d19f51c281953178ddb5b84c5f1ca24c86"
@@ -4065,6 +4100,11 @@ core-js@^2.4.0:
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-js@^2.5.0:
+ version "2.6.12"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+ integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-js@^3.6.5:
  version "3.8.0"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.0.tgz#0fc2d4941cadf80538b030648bb64d230b4da0ce"
@@ -5639,6 +5679,13 @@ [email protected]:
  loader-utils "^2.0.0"
  schema-utils "^3.0.0"
 
+file-selector@^0.1.8:
+ version "0.1.19"
+ resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.19.tgz#8ecc9d069a6f544f2e4a096b64a8052e70ec8abf"
+ integrity sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==
+ dependencies:
+ tslib "^2.0.1"
+
 [email protected]:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -5746,6 +5793,13 @@ flush-write-stream@^1.0.0:
  inherits "^2.0.3"
  readable-stream "^2.3.6"
 
+[email protected]:
+ version "6.9.2"
+ resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.9.2.tgz#a9ef72847869bd2cbf62cb930aaf8e138fef1ca9"
+ integrity sha512-gBEuXOPNOKPrLdZpMFUSTyIo1eT2NSZRrwZ9r/0Jqw5tmT3Yvxfmu8KBHw8xW2XQkw6E/JoG+OlEq7UDtSUNgw==
+ dependencies:
+ tabbable "^5.3.2"
+
 follow-redirects@^1.0.0, follow-redirects@^1.14.0:
  version "1.14.8"
  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
@@ -9029,6 +9083,11 @@ [email protected]:
  dependencies:
  ts-pnp "^1.1.6"
 
+popper.js@^1.16.0:
+ version "1.16.1"
+ resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+ integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 portfinder@^1.0.26:
  version "1.0.28"
  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -9872,7 +9931,15 @@ [email protected], prompts@^2.0.1:
  kleur "^3.0.3"
  sisteransi "^1.0.5"
 
-prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types-extra@^1.1.0:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b"
+ integrity sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==
+ dependencies:
+ react-is "^16.3.2"
+ warning "^4.0.0"
+
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10102,6 +10169,16 @@ react-dom@^17.0.1:
  object-assign "^4.1.1"
  scheduler "^0.20.1"
 
+[email protected]:
+ version "9.0.0"
+ resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-9.0.0.tgz#4f5223cdcb4d3bd8a66e3298c4041eb0c75c4634"
+ integrity sha512-wZ2o9B2qkdE3RumWhfyZT9swgJYJPeU5qHEcMU8weYpmLex1eeWX0CC32/Y0VutB+BBi2D+iePV/YZIiB4kZGw==
+ dependencies:
+ attr-accept "^1.1.3"
+ file-selector "^0.1.8"
+ prop-types "^15.6.2"
+ prop-types-extra "^1.1.0"
+
 react-error-overlay@^6.0.9:
  version "6.0.9"
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
@@ -10119,7 +10196,7 @@ react-feather@^2.0.9:
  dependencies:
  prop-types "^15.7.2"
 
-react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -11597,6 +11674,11 @@ symbol-tree@^3.2.4:
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tabbable@^5.3.2:
+ version "5.3.3"
+ resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"
+ integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==
+
 table@^5.2.3:
  version "5.4.6"
  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -11780,6 +11862,13 @@ tiny-warning@^1.0.2:
  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+[email protected]:
+ version "5.1.2"
+ resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-5.1.2.tgz#5ac91233c59ab482ef5988cffe6e08bd26528e66"
+ integrity sha512-Qtrv2wqbRbaKMUb6bWWBQWPayvcDKNrGlvihxtsyowhT7RLGEh1STWuy6EMXC6QLkfKPB2MLnf8W2mzql9VDAw==
+ dependencies:
+ popper.js "^1.16.0"
+
 tippy.js@^6.2.0, tippy.js@^6.2.7:
  version "6.2.7"
  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.2.7.tgz#62fb34eda23f7d78151ddca922b62818c1ab9869"
@@ -11905,6 +11994,11 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
 
+tslib@^2.0.0, tslib@^2.0.1:
+ version "2.6.0"
+ resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.0.tgz#b295854684dbda164e181d259a22cd779dcd7bc3"
+ integrity sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==
+
 tslib@~2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
@@ -12294,7 +12388,7 @@ walker@^1.0.7, walker@~1.0.5:
  dependencies:
  makeerror "1.0.x"
 
-warning@^4.0.3:
+warning@^4.0.0, warning@^4.0.3:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==