stackrox · tommartensen · Mar 4, 2025 · Feb 24, 2025 · Feb 24, 2025 · Feb 24, 2025
@@ -8,10 +8,7 @@
 # generated sources
 /src/generated
 
-# disabling for copy-pasted tailwind plugins
-/tailwind-plugins
-
 # hidden configuration files
 !.eslintrc.js
 !.prettierrc.js
-!.postcssrc.js
+vite.config.ts
@@ -22,23 +22,31 @@ 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',
         ],
         optionalDependencies: false,
       },
     ],
+
+    // The following rules began throwing errors after tooling updates. These should probably
+    // be re-enabled and fixed at some point
+    'react/jsx-no-bind': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/no-misused-promises': 'off',
+    '@typescript-eslint/no-unsafe-argument': 'off',
+    // End disabled tooling rules
   },
 
   overrides: [

@@ -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:

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full">
+<html lang="en" class="pf-v6-u-h-100">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -24,8 +24,8 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>StackRox Infra</title>
-  </head>
-  <body class="flex font-sans h-full overflow-hidden text-base-600 text-base font-600 theme-light">
+  <script type="module" src="src/index"></script></head>
+  <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>
     <!--

@@ -3,16 +3,9 @@
   "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",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "PORT=3001 HTTPS=true NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true vite",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true vite build",
+    "test": "echo 'Someone should write some tests'",
     "lint-check": "npm-run-all lint-check:*",
     "lint-check:non-src": "prettier --check '**/*.{md,css,json}'",
     "lint-check:src": "eslint --ext .js,.jsx,.ts,.tsx ./",
@@ -22,49 +15,46 @@
     "gen:src": "./scripts/generate-client.sh"
   },
   "dependencies": {
-    "@patternfly/patternfly": "^4.224.2",
-    "@patternfly/react-core": "^4.276.8",
-    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/patternfly": "^6.1.0",
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
+    "@tanstack/react-query": "^5.66.9",
     "axios": "^0.21.4",
+    "eslint": "^7.11.0",
     "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",
+    "random-words": "^2.0.1",
+    "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",
+    "react-responsive": "^10.0.0",
+    "react-router-dom": "^6.29.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/node": "^22.13.4",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.14",
     "eslint-config-airbnb-typescript": "^12.0.0",
     "eslint-config-prettier": "^7.2.0",
+    "eslint-config-react-app": "^7.0.1",
     "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"
+    "vite": "^6.1.0",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "browserslist": {
     "production": [

@@ -2,6 +2,3 @@
 
 # include generated sources 
 !/generated
-
-# exclude tailwind generated styles
-/index.css
@@ -0,0 +1,19 @@
+import { FlavorServiceApi, V1Flavor } from 'generated/client';
+import { QueryClient } from '@tanstack/react-query';
+import configuration from './configuration';
+
+const flavorService = new FlavorServiceApi(configuration);
+
+export function flavorInfoQueryOptions(flavorId: string) {
+  return {
+    queryKey: ['flavorInfo', flavorId],
+    queryFn: () => flavorService.info(flavorId),
+    staleTime: 60 * 60 * 1000, // One hour - this info almost never changes
+  };
+}
+
+export function prefetchFlavors(queryClient: QueryClient, flavors: V1Flavor[]) {
+  flavors.forEach(async ({ ID }) => {
+    await queryClient.prefetchQuery(flavorInfoQueryOptions(ID ?? ''));
+  });
+}
@@ -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,12 +20,24 @@ export default function AppHeaderLayout({ logo, main, ending }: Props): ReactEle
   return (
     <Masthead>
       <MastheadMain>
-        <MastheadBrand className="pf-u-mr-xl">{logo}</MastheadBrand>
-        <ToolbarItem variant="separator" />
-        {main}
+        <MastheadBrand>
+          <MastheadLogo className="pf-v6-u-mr-xl">{logo}</MastheadLogo>
+        </MastheadBrand>
       </MastheadMain>
-      <MastheadContent className="pf-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>
   );