stackrox · dvail · Feb 24, 2025 · Feb 24, 2025 · Feb 24, 2025 · Feb 24, 2025
@@ -8,10 +8,6 @@
 # generated sources
 /src/generated
 
-# disabling for copy-pasted tailwind plugins
-/tailwind-plugins
-
 # hidden configuration files
 !.eslintrc.js
 !.prettierrc.js
-!.postcssrc.js
@@ -22,16 +22,16 @@ module.exports = {
     'react/prop-types': 'off',
     'react/require-default-props': 'off',
 
+    'no-nested-ternary': 'off',
+
     '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
 
     'import/no-extraneous-dependencies': [
       'error',
       {
         devDependencies: [
           '**/.eslintrc.js',
-          'tailwind.config.js',
           '.prettierrc.js',
-          '.postcssrc.js',
           'src/setupProxy.js',
           'src/setupTests.ts',
           '**/*.test.tsx',

@@ -7,4 +7,4 @@
 
 # generated sources
 /src/generated
-/src/index.css
+/src/infra.css
@@ -9,7 +9,7 @@ all: deps lint-check test build
 deps: package.json
 	yarn install --frozen-lockfile
 
-SOURCES := $(shell ls *.json) tailwind.config.js yarn.lock
+SOURCES := $(shell ls *.json) yarn.lock
 SOURCES += $(shell find public)
 SOURCES += $(shell find src -name '*.ts' -print)
 SOURCES += $(shell find src -name '*.tsx' -print)

@@ -21,19 +21,6 @@ https://github.com/stackrox/stackrox-env.
   machine, consider using [nvm](https://github.com/creationix/nvm))
 - [Yarn](https://yarnpkg.com/en/)
 
-### GitHub Packages NPM Registry
-
-This project depends on packages with `@stackrox` scope accessible from GitHub
-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:

@@ -3,14 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "clean": "npm-run-all clean:*",
-    "clean:tailwind": "rm -f src/index.css",
-    "start": "npm-run-all clean -p start:*",
-    "start:tailwind": "NODE_ENV=development postcss ./src/app.tw.css -o ./src/index.css -w",
-    "start:cra": "wait-on src/index.css && PORT=3001 HTTPS=true NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true react-scripts start",
-    "build": "npm-run-all build:tailwind build:cra",
-    "build:tailwind": "NODE_ENV=production postcss ./src/app.tw.css -o ./src/index.css",
-    "build:cra": "NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true react-scripts build",
+    "start": "PORT=3001 HTTPS=true NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true react-scripts start",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint-check": "npm-run-all lint-check:*",
@@ -22,49 +16,40 @@
     "gen:src": "./scripts/generate-client.sh"
   },
   "dependencies": {
-    "@patternfly/patternfly": "^5.4.2",
-    "@patternfly/react-core": "^5.4.8",
-    "@patternfly/react-icons": "^5.4.2",
+    "@patternfly/patternfly": "^6.1.0",
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
     "axios": "^0.21.4",
     "formik": "^2.4.2",
     "history": "^5.0.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "namor": "^2.0.3",
-    "prop-types": "^15.8.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-feather": "^2.0.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-markdown": "^8.0.0",
     "react-router-dom": "^6.14.1",
-    "react-spinners": "^0.13.8",
-    "use-clipboard-copy": "^0.2.0",
     "yup": "^1.3.3"
   },
   "devDependencies": {
-    "@stackrox/tailwind-config": "^0.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^12.1.1",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.195",
     "@types/node": "^20.5.4",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.14",
     "eslint-config-airbnb-typescript": "^12.0.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-prettier": "^3.4.1",
     "http-proxy-middleware": "^2.0.6",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
-    "postcss-cli": "^10.1.0",
     "prettier": "^2.2.1",
     "react-scripts": "^4.0.1",
-    "tailwindcss": "^2.2.9",
-    "typescript": "~5.1.6",
-    "wait-on": "^7.0.1"
+    "typescript": "~5.1.6"
   },
   "browserslist": {
     "production": [

@@ -25,7 +25,7 @@
     -->
     <title>StackRox Infra</title>
   </head>
-  <body class="flex font-sans h-full overflow-hidden text-base-600 text-base font-600 theme-light">
+  <body class="flex h-full overflow-hidden theme-light">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" class="w-full"></div>
     <!--

@@ -2,6 +2,3 @@
 
 # include generated sources 
 !/generated
-
-# exclude tailwind generated styles
-/index.css
@@ -2,10 +2,13 @@ import React, { ReactElement, ReactNode } from 'react';
 import {
   Masthead,
   MastheadMain,
+  MastheadLogo,
   MastheadBrand,
   MastheadContent,
   ToolbarItem,
+  Flex,
 } from '@patternfly/react-core';
+import Version from 'containers/AppHeader/Version';
 
 type Props = {
   logo: ReactNode;
@@ -17,14 +20,26 @@ export default function AppHeaderLayout({ logo, main, ending }: Props): ReactEle
   return (
     <Masthead>
       <MastheadMain>
-        <MastheadBrand component="a" className="pf-v5-u-mr-xl">
-          {logo}
+        <MastheadBrand>
+          <MastheadLogo component="a" className="pf-v6-u-mr-xl">
+            {logo}
+          </MastheadLogo>
         </MastheadBrand>
-        <ToolbarItem variant="separator" />
-        {main}
       </MastheadMain>
-      <MastheadContent className="pf-v5-u-flex-direction-row-reverse">
-        <div>{ending}</div>
+      <MastheadContent>
+        <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
+          <span className="pf-v6-u-font-family-heading pf-v6-u-font-size-lg">Infra</span>
+          <Version />
+        </Flex>
+        <ToolbarItem variant="separator" />
+        <Flex
+          className="pf-v6-u-flex-grow-1"
+          alignItems={{ default: 'alignItemsCenter' }}
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+        >
+          {main}
+          <div>{ending}</div>
+        </Flex>
       </MastheadContent>
     </Masthead>
   );