.babelrc

@@ -1,12 +1,11 @@
 {
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react",
-        "@babel/preset-typescript",
-    ],
-    "plugins": [
-        "@babel/plugin-syntax-dynamic-import",
-        "@babel/plugin-transform-runtime",
-        "babel-plugin-macros",
-    ]
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    "@lingui/babel-plugin-lingui-macro"
+  ]
 }

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,4 @@
+# Community Code of Conduct
+
+Please see the official [Ansible Community Code of Conduct](https://docs.ansible.com/ansible/latest/community/code_of_conduct.html).
+

.github/dependabot.yml

@@ -1,141 +1,229 @@
 version: 2
 updates:
-  - package-ecosystem: 'npm'
-    directory: '/'
-    schedule:
-      interval: 'weekly'
-
-  - package-ecosystem: 'npm'
-    directory: '/test'
-    schedule:
-      interval: 'weekly'
+  # npm in /
 
   - package-ecosystem: 'npm'
     directory: '/'
-    target-branch: 'stable-4.8'
     schedule:
       interval: 'weekly'
-    commit-message:
-      prefix: '[stable-4.8] '
+    groups:
+      babel:
+        patterns:
+          - '@babel/*'
+          - 'babel-loader'
+      eslint:
+        patterns:
+          - 'eslint'
+          - 'eslint-config-*'
+          - 'eslint-plugin-*'
+          - 'typescript-eslint'
+      lingui:
+        patterns:
+          - '@lingui/*'
+      patternfly:
+        patterns:
+          - '@patternfly/*'
+      react:
+        patterns:
+          - 'react'
+          - 'react-dom'
     ignore:
-      - dependency-name: '@lingui/*'
-        update-types: ['version-update:semver-major']
       - dependency-name: '@patternfly/*'
-        update-types: ['version-update:semver-major']
-      - dependency-name: '@types/*'
-        update-types: ['version-update:semver-major']
+        update-types:
+          - 'version-update:semver-major'
       - dependency-name: 'react'
-        update-types: ['version-update:semver-major']
+        update-types:
+          - 'version-update:semver-major'
       - dependency-name: 'react-dom'
-        update-types: ['version-update:semver-major']
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'react-router-dom'
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'monaco-editor'
+        update-types:
+          - 'version-update:semver-major'
+          - 'version-update:semver-minor'
+      - dependency-name: 'react-monaco-editor'
+        update-types:
+          - 'version-update:semver-major'
+          - 'version-update:semver-minor'
+      - dependency-name: 'sass'
+        update-types:
+          - 'version-update:semver-major'
+          - 'version-update:semver-minor'
+          - 'version-update:semver-patch'
 
   - package-ecosystem: 'npm'
-    directory: '/test'
-    target-branch: 'stable-4.8'
+    directory: '/'
+    target-branch: 'stable-4.10'
     schedule:
       interval: 'monthly'
     commit-message:
-      prefix: '[stable-4.8] '
+      prefix: '[stable-4.10] '
+    groups:
+      babel:
+        patterns:
+          - '@babel/*'
+          - 'babel-loader'
+      eslint:
+        patterns:
+          - 'eslint'
+          - 'eslint-config-*'
+          - 'eslint-plugin-*'
+          - 'typescript-eslint'
+      lingui:
+        patterns:
+          - '@lingui/*'
+      patternfly:
+        patterns:
+          - '@patternfly/*'
+      react:
+        patterns:
+          - 'react'
+          - 'react-dom'
+    ignore:
+      - dependency-name: '@lingui/*'
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: '@patternfly/*'
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'eslint'
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'react'
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'react-dom'
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'react-router-dom'
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'monaco-editor'
+        update-types:
+          - 'version-update:semver-major'
+          - 'version-update:semver-minor'
+      - dependency-name: 'react-monaco-editor'
+        update-types:
+          - 'version-update:semver-major'
+          - 'version-update:semver-minor'
+      - dependency-name: 'sass'
+        update-types:
+          - 'version-update:semver-major'
+          - 'version-update:semver-minor'
+          - 'version-update:semver-patch'
+      - dependency-name: 'typescript-eslint'
+        update-types:
+          - 'version-update:semver-major'
 
   - package-ecosystem: 'npm'
     directory: '/'
-    target-branch: 'stable-4.7'
+    target-branch: 'stable-4.9'
     schedule:
       interval: 'monthly'
     commit-message:
-      prefix: '[stable-4.7] '
+      prefix: '[stable-4.9] '
+    groups:
+      babel:
+        patterns:
+          - '@babel/*'
+          - 'babel-loader'
+      eslint:
+        patterns:
+          - 'eslint'
+          - 'eslint-config-*'
+          - 'eslint-plugin-*'
+          - 'typescript-eslint'
+      lingui:
+        patterns:
+          - '@lingui/*'
+      patternfly:
+        patterns:
+          - '@patternfly/*'
+      react:
+        patterns:
+          - 'react'
+          - 'react-dom'
     ignore:
       - dependency-name: '@lingui/*'
-        update-types: ['version-update:semver-major']
+        update-types:
+          - 'version-update:semver-major'
       - dependency-name: '@patternfly/*'
-        update-types: ['version-update:semver-major']
-      - dependency-name: '@types/*'
-        update-types: ['version-update:semver-major']
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'eslint'
+        update-types:
+          - 'version-update:semver-major'
       - dependency-name: 'react'
-        update-types: ['version-update:semver-major']
+        update-types:
+          - 'version-update:semver-major'
       - dependency-name: 'react-dom'
-        update-types: ['version-update:semver-major']
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'react-router-dom'
+        update-types:
+          - 'version-update:semver-major'
+      - dependency-name: 'monaco-editor'
+        update-types:
+          - 'version-update:semver-major'
+          - 'version-update:semver-minor'
+      - dependency-name: 'react-monaco-editor'
+        update-types:
+          - 'version-update:semver-major'
+          - 'version-update:semver-minor'
+      - dependency-name: 'sass'
+        update-types:
+          - 'version-update:semver-major'
+          - 'version-update:semver-minor'
+          - 'version-update:semver-patch'
+      - dependency-name: 'typescript-eslint'
+        update-types:
+          - 'version-update:semver-major'
+
+  # npm in test/
 
   - package-ecosystem: 'npm'
     directory: '/test'
-    target-branch: 'stable-4.7'
     schedule:
-      interval: 'monthly'
-    commit-message:
-      prefix: '[stable-4.7] '
+      interval: 'weekly'
 
   - package-ecosystem: 'npm'
-    directory: '/'
-    target-branch: 'stable-4.6'
+    directory: '/test'
+    target-branch: 'stable-4.10'
     schedule:
       interval: 'monthly'
     commit-message:
-      prefix: '[stable-4.6] '
-    ignore:
-      - dependency-name: '@lingui/*'
-        update-types: ['version-update:semver-major']
-      - dependency-name: '@patternfly/*'
-        update-types: ['version-update:semver-major']
-      - dependency-name: '@types/*'
-        update-types: ['version-update:semver-major']
-      - dependency-name: 'react'
-        update-types: ['version-update:semver-major']
-      - dependency-name: 'react-dom'
-        update-types: ['version-update:semver-major']
+      prefix: '[stable-4.10] '
 
   - package-ecosystem: 'npm'
-    directory: '/'
-    target-branch: 'stable-4.5'
+    directory: '/test'
+    target-branch: 'stable-4.9'
     schedule:
       interval: 'monthly'
     commit-message:
-      prefix: '[stable-4.5] '
-    ignore:
-      - dependency-name: '@lingui/*'
-        update-types: ['version-update:semver-major']
-      - dependency-name: '@patternfly/*'
-        update-types: ['version-update:semver-major']
-      - dependency-name: '@types/*'
-        update-types: ['version-update:semver-major']
-      - dependency-name: 'react'
-        update-types: ['version-update:semver-major']
-      - dependency-name: 'react-dom'
-        update-types: ['version-update:semver-major']
-
-  - package-ecosystem: 'github-actions'
-    # Workflow files stored in the default location of `.github/workflows`
-    directory: '/'
-    schedule:
-      interval: 'weekly'
+      prefix: '[stable-4.9] '
 
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    target-branch: 'stable-4.8'
-    commit-message:
-      prefix: '[stable-4.8] '
-    schedule:
-      interval: 'monthly'
+  # github-actions
 
   - package-ecosystem: 'github-actions'
     directory: '/'
-    target-branch: 'stable-4.7'
-    commit-message:
-      prefix: '[stable-4.7] '
     schedule:
-      interval: 'monthly'
+      interval: 'weekly'
 
   - package-ecosystem: 'github-actions'
     directory: '/'
-    target-branch: 'stable-4.6'
+    target-branch: 'stable-4.10'
     commit-message:
-      prefix: '[stable-4.6] '
+      prefix: '[stable-4.10] '
     schedule:
       interval: 'monthly'
 
   - package-ecosystem: 'github-actions'
     directory: '/'
-    target-branch: 'stable-4.5'
+    target-branch: 'stable-4.9'
     commit-message:
-      prefix: '[stable-4.5] '
+      prefix: '[stable-4.9] '
     schedule:
       interval: 'monthly'

.github/renovate.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "enabledManagers": [
+    "tekton"
+  ],
+  "tekton": {
+    "enabled": true,
+    "automerge": false,
+    "schedule": ["at any time"]
+  }
+}

.github/workflows/automerge-condition.js

@@ -0,0 +1,28 @@
+// get these values from env instead of cli args due to RCE issues
+const actor = process.env.GITHUB_ACTOR;
+const branch = process.env.GITHUB_HEAD_REF;
+const prTitle = process.env.PR_TITLE;
+
+console.log({ actor, branch, prTitle });
+
+if (actor != 'dependabot[bot]') {
+  console.log('Actor incorrect (GITHUB_ACTOR)');
+  process.exit(1);
+}
+
+if (!branch) {
+  console.log('Branch name not set (GITHUB_HEAD_REF)');
+  process.exit(1);
+}
+
+if (!prTitle) {
+  console.log('PR title not set (PR_TITLE)');
+  process.exit(1);
+}
+
+if (prTitle.includes('@types/node') && !prTitle.match(/from (\d+)\.\d+\.\d+ to \1\.\d+\.\d+/)) {
+  console.log('Not automerging major @types/node version bump');
+  process.exit(1);
+}
+
+process.exit(0);

.github/workflows/automerge.js → .github/workflows/automerge-wait.js

@@ -1,52 +1,20 @@
 const { exec } = require('node:child_process');
-const [ _node, _automerge, branch, prTitle, actor ] = process.argv;
 
-console.log({ branch, prTitle, actor });
+// get these values from env instead of cli args due to RCE issues
+const branch = process.env.GITHUB_HEAD_REF;
 
 if (!branch) {
-  console.log('Branch name argument (first) was not specified');
+  console.log('Branch name not set (GITHUB_HEAD_REF)');
   process.exit(1);
 }
 
-if (!prTitle) {
-  console.log('PR title argument (second) was not specified');
-  process.exit(1);
-}
-
-if (!actor) {
-  console.log('Actor argument (third) was not specified');
-  process.exit(1);
-}
-
-if (actor != 'dependabot[bot]') {
-  console.log('Automerge works only for PRs created by dependabot.');
-  process.exit(1);
-}
-
-if (prTitle.includes('patternfly')) {
-  console.log('Automerge can\'t merge patternfly PRs.');
-  process.exit(1);
-}
-
-if (prTitle.includes('@types/node')) {
-  console.log('Checking for @types/node version.');
-  const pattern = /from 16[.]\d+[.]\d+ to 16[.]\d+[.]\d+/;
-  if (pattern.test(prTitle)) {
-    console.log('Version does match the pattern ' + pattern);
-  } else {
-    console.log('Version does not match the pattern ' + pattern);
-    process.exit(1);
-  }
-}
-
-console.log('Waiting for checks');
-
 let waitCount = 0;
 
 function waitForAll() {
   waitCount++;
-  // dont cycle more that 50x (that is 50 minutes)
-  if (waitCount > 50) {
+
+  // fail after 30 minutes
+  if (waitCount > 30) {
     console.log('Waiting limit reached. Exiting.');
     process.exit(1);
   }
@@ -127,6 +95,7 @@ function waitForAll() {
         process.exit(1);
       }
 
+      // retry after a minute
       setTimeout(waitForAll, 60000);
     },
   );

.github/workflows/automerge.yml

@@ -2,7 +2,7 @@ name: Automerge
 
 on:
   pull_request_target:
-    branches: [ 'master', 'stable-*', 'feature/*' ]
+    branches: [ 'master', 'stable-*' ]
 
 jobs:
   automerge:
@@ -13,21 +13,27 @@ jobs:
     - name: "Checkout ansible-hub-ui (${{ github.ref }})"
       uses: actions/checkout@v4
 
-    - name: "Install node 16"
+    - name: "Install node 20"
       uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '20'
 
-    - name: "Run automerge.js"
+    - name: "Check automerge conditions"
+      working-directory: ".github/workflows"
+      env:
+        PR_TITLE: "${{ github.event.pull_request.title }}"
+      run: |
+        node automerge-condition.js
+
+    - name: "Wait for other tests"
       working-directory: ".github/workflows"
       env:
         GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       run: |
-        node automerge.js "${{ github.head_ref }}" "${{ github.event.pull_request.title }}" "${{ github.actor }}"
+        node automerge-wait.js
 
     - name: "Automerge the PR"
       env:
         GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       run: |
-        echo "Automerge of PR"
         gh pr merge "${{ github.event.pull_request.number }}" -s --auto

.github/workflows/cypress.yml

@@ -4,9 +4,9 @@ on:
   # allow running manually
   workflow_dispatch:
   pull_request:
-    branches: [ 'master', 'stable-*', 'feature/*' ]
+    branches: [ 'master', 'stable-*' ]
   push:
-    branches: [ 'master', 'stable-*', 'feature/*' ]
+    branches: [ 'master', 'stable-*' ]
   # daily on master
   schedule:
   - cron: '30 5 * * *'
@@ -26,21 +26,22 @@ jobs:
       fail-fast: false
       matrix:
         test:
-        - 'screenshots'
         - 'approval'
-        - 'approval_modal'
+        - 'approval-modal'
         - 'collections'
         - 'community'
-        - 'ee_controller'
-        - 'execution_environments'
-        - 'groups_and_users'
-        - 'imports'
-        - 'misc'
         - 'namespaces'
         - 'repo'
+        - 'screenshots'
 
     steps:
 
+    # galaxykit needs pip 23+, Ubuntu 22.04's default Python uses pip 22
+    - name: "Install python 3.11"
+      uses: actions/setup-python@v5
+      with:
+        python-version: '3.11'
+
     - name: "Install galaxykit dependency"
       run: |
         # pip install git+https://github.com/ansible/galaxykit.git@branch_name
@@ -53,32 +54,24 @@ jobs:
         case "${{ matrix.test }}" in
           community*)
             BACKEND_FLAVOR=community
-            echo "community"
-            ;;
-          insights*)
-            BACKEND_FLAVOR=insights
-            echo "insights"
+            API=api
             ;;
           *)
             BACKEND_FLAVOR=standalone
-            echo "standalone"
+            API=api/galaxy
             ;;
         esac
 
-        echo "SHORT_BRANCH=${SHORT_BRANCH}" >> $GITHUB_ENV
         echo "BACKEND_FLAVOR=${BACKEND_FLAVOR}" >> $GITHUB_ENV
         echo "COMPOSE_INTERACTIVE_NO_CLI=1" >> $GITHUB_ENV
+        echo "SHORT_BRANCH=${SHORT_BRANCH}" >> $GITHUB_ENV
+        echo "API=${API}" >> $GITHUB_ENV
 
     - name: "Set variables for screenshots"
       if: matrix.test == 'screenshots'
       run: |
-        UI_COMMIT_MASTER=`curl -s https://api.github.com/repos/ansible/ansible-hub-ui/branches/${SHORT_BRANCH} | jq -r .commit.sha`
-        echo "UI_COMMIT_MASTER=${UI_COMMIT_MASTER}" >> $GITHUB_ENV
-
-        COMPARE_SCREENSHOTS=${{ github.event_name == 'pull_request' }}
-        echo 'compare screenshots:'
-        echo $COMPARE_SCREENSHOTS
-        echo "COMPARE_SCREENSHOTS=${COMPARE_SCREENSHOTS}" >> $GITHUB_ENV
+        UI_COMMIT_BASE=`curl -s https://api.github.com/repos/ansible/ansible-hub-ui/branches/${SHORT_BRANCH} | jq -r .commit.sha`
+        echo "UI_COMMIT_BASE=${UI_COMMIT_BASE}" >> $GITHUB_ENV
 
     - name: "Checkout ansible-hub-ui (${{ github.ref }})"
       uses: actions/checkout@v4
@@ -92,37 +85,31 @@ jobs:
         ref: '${{ env.SHORT_BRANCH }}'
         path: 'galaxy_ng'
 
-    - name: "Checkout oci_env (main)"
-      uses: actions/checkout@v4
-      with:
-        repository: 'pulp/oci_env'
-        path: 'oci_env'
+    # docker compose build: FileNotFoundError: [Errno 2] No such file or directory: 'docker-compose'
+    - name: "Provide docker-compose"
+      run: |
+        mkdir -p /home/runner/.local/bin/
+        cd /home/runner/.local/bin/
+        ( echo '#!/bin/sh' ; echo 'docker compose "$@"' ) > docker-compose
+        chmod +x docker-compose
+
+    - name: "galaxy compose build"
+      run: |
+        cd galaxy_ng
+        DEV_SOURCE_PATH=galaxy_ng docker compose -f dev/compose/${{ env.BACKEND_FLAVOR }}.yaml build
 
-    - name: "Configure oci_env"
-      working-directory: 'oci_env'
+    - name: "galaxy compose up"
       run: |
-        pip install --editable ./client/
-        # merge common, profile-specific and test matrix specific config
-        cat ../ansible-hub-ui/.github/workflows/cypress/compose.env.common \
-          ../ansible-hub-ui/.github/workflows/cypress/compose.env."$BACKEND_FLAVOR" \
-          ../ansible-hub-ui/test/cypress/e2e/"${{ matrix.test }}"/compose.env \
-          | sed 's/^\s\+//' | tee compose.env || [ -s compose.env ]
-
-    - name: "oci-env compose build"
-      working-directory: 'oci_env'
-      run: 'oci-env compose build'
-
-    - name: "oci-env compose up"
-      working-directory: 'oci_env'
-      run: 'oci-env compose up &'
-
-    - name: "Install node 16"
+        cd galaxy_ng
+        DEV_SOURCE_PATH=galaxy_ng docker compose -f dev/compose/${{ env.BACKEND_FLAVOR }}.yaml up &
+
+    - name: "Install node 20"
       uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '20'
 
     - name: "Cache ~/.npm & ~/.cache/Cypress"
-      uses: actions/cache@v3
+      uses: actions/cache@v4
       with:
         path: |
           ~/.npm
@@ -184,31 +171,13 @@ jobs:
         mv ansible-hub-ui/dist/* www/
         cd www
         echo '{}' > package.json
-
         npm install local-web-server
         node_modules/.bin/ws --port 8002 --directory . --spa index.html \
           --rewrite '/api/(.*) -> http://localhost:5001/api/$1' \
           --rewrite '/pulp/api/(.*) -> http://localhost:5001/pulp/api/$1' \
           --rewrite '/v2/(.*) -> http://localhost:5001/v2/$1' \
           --rewrite '/extensions/v2/(.*) -> http://localhost:5001/extensions/v2/$1' &
 
-    - name: "Run insights UI"
-      if: ${{ env.BACKEND_FLAVOR == 'insights' }}
-      working-directory: 'ansible-hub-ui'
-      run: |
-        # pre-pull containers (and check for version changes)
-        FROM=node_modules/@redhat-cloud-services/frontend-components-config-utilities/standalone/services/
-        grep postgres:9.6 "$FROM"/rbac.js
-        docker pull postgres:9.6
-        grep redis:5.0.4 "$FROM"/rbac.js
-        docker pull redis:5.0.4
-        grep quay.io/cloudservices/rbac "$FROM"/rbac.js
-        docker pull quay.io/cloudservices/rbac
-        grep jboss/keycloak "$FROM"/default/chrome.js
-        docker pull jboss/keycloak
-
-        npm run start-insights &
-
     - name: "Install Cypress & test dependencies"
       working-directory: 'ansible-hub-ui/test'
       run: |
@@ -236,88 +205,38 @@ jobs:
         echo 'expecting /js/App.'"$BUILD_HASH"'.js'
         curl http://localhost:8002/index.html | tee /dev/stderr | grep '/js/App.'"$BUILD_HASH"'.js'
 
-    - name: "Ensure insights is served"
-      if: ${{ env.BACKEND_FLAVOR == 'insights' }}
-      run: |
-        echo waiting for containers to start
-        sleep 30
-        curl http://localhost:8002/preview/ansible/automation-hub/ | tee /dev/stderr | grep '/beta/apps/chrome/js/'
-        sleep 30
-
-    - name: "Ensure galaxykit can connect to API (community)"
-      if: ${{ env.BACKEND_FLAVOR == 'community' }}
-      run: |
-        galaxykit -s http://localhost:8002/api/ -u admin -p admin collection list
-
-    - name: "Ensure galaxykit can connect to API (standalone)"
-      if: ${{ env.BACKEND_FLAVOR == 'standalone' }}
-      run: |
-        galaxykit -s http://localhost:8002/api/galaxy/ -u admin -p admin collection list
-
-    - name: "Ensure galaxykit can connect to API (insights)"
-      if: ${{ env.BACKEND_FLAVOR == 'insights' }}
-      run: |
-        galaxykit -s http://localhost:8002/api/automation-hub/ \
-          -u admin -p admin \
-          --auth-url http://localhost:8002/auth/realms/redhat-external/protocol/openid-connect/token \
-          collection list
-
-    - name: "Check initial feature flags (community)"
-      if: ${{ env.BACKEND_FLAVOR == 'community' }}
+    - name: "Ensure galaxykit can connect to API"
       run: |
-        curl -s http://localhost:5001/api/_ui/v1/feature-flags/ | jq
+        galaxykit -s http://localhost:8002/"$API"/ -u admin -p admin collection list
 
-    - name: "Check initial feature flags (standalone)"
-      if: ${{ env.BACKEND_FLAVOR == 'standalone' }}
-      run: |
-        curl -s http://localhost:5001/api/galaxy/_ui/v1/feature-flags/ | jq
-
-    - name: "Check initial feature flags (insights)"
-      if: ${{ env.BACKEND_FLAVOR == 'insights' }}
-      run: |
-        curl -s http://localhost:5001/api/automation-hub/_ui/v1/feature-flags/ | jq
-
-    - name: "Check component versions & settings (community)"
-      if: ${{ env.BACKEND_FLAVOR == 'community' }}
-      run: |
-        HUB_TOKEN=`curl -s -u admin:admin -d '' http://localhost:5001/api/v3/auth/token/ | jq -r .token`
-        curl -s -H "Authorization: Token $HUB_TOKEN" http://localhost:5001/api/ | jq
-        curl -s -H "Authorization: Token $HUB_TOKEN" http://localhost:5001/api/_ui/v1/settings/ | jq
-
-    - name: "Check component versions & settings (standalone)"
-      if: ${{ env.BACKEND_FLAVOR == 'standalone' }}
+    - name: "Check initial feature flags"
       run: |
-        HUB_TOKEN=`curl -s -u admin:admin -d '' http://localhost:5001/api/galaxy/v3/auth/token/ | jq -r .token`
-        curl -s -H "Authorization: Token $HUB_TOKEN" http://localhost:5001/api/galaxy/ | jq
-        curl -s -H "Authorization: Token $HUB_TOKEN" http://localhost:5001/api/galaxy/_ui/v1/settings/ | jq
+        curl -s http://localhost:5001/"$API"/_ui/v1/feature-flags/ | jq
 
-    - name: "Check component versions & settings (insights)"
-      if: ${{ env.BACKEND_FLAVOR == 'insights' }}
+    - name: "Check component versions & settings"
       run: |
-        BEARER=`curl -s -H "Content-Type: application/x-www-form-urlencoded" \
-          -d "client_id=cloud-services&username=admin&password=admin&grant_type=password" \
-          http://localhost:8002/auth/realms/redhat-external/protocol/openid-connect/token | jq -r .access_token`
-        curl -s -H "Authorization: Bearer $BEARER" http://localhost:8002/api/automation-hub/ | jq
-        curl -s -H "Authorization: Bearer $BEARER" http://localhost:8002/api/automation-hub/_ui/v1/settings/ | jq
+        HUB_TOKEN=`curl -s -u admin:admin -d '' http://localhost:5001/"$API"/v3/auth/token/ | jq -r .token`
+        curl -s -H "Authorization: Token $HUB_TOKEN" http://localhost:5001/"$API"/ | jq
+        curl -s -H "Authorization: Token $HUB_TOKEN" http://localhost:5001/"$API"/_ui/v1/settings/ | jq
 
     - name: "Check if e2e contains only dirs in matrix test array"
       working-directory: 'ansible-hub-ui'
       run: |
-        diff -Naur <(ls test/cypress/e2e | sort | grep -v insights) <(yq '.jobs.cypress.strategy.matrix.test[]' .github/workflows/cypress.yml | sort)
+        diff -Naur <(ls test/cypress/e2e | sort) <(yq '.jobs.cypress.strategy.matrix.test[]' .github/workflows/cypress.yml | sort)
 
-    - name: "Cache master screenshots"
+    - name: "Cache base screenshots"
       if: matrix.test == 'screenshots'
-      uses: actions/cache@v3
+      uses: actions/cache@v4
       with:
-        path: ansible-hub-ui/test/screenshots-main/
-        key: screenshots-${{env.SHORT_BRANCH}}-${{ env.UI_COMMIT_MASTER }}
+        path: ansible-hub-ui/test/screenshots-base/
+        key: screenshots-${{env.SHORT_BRANCH}}-${{ env.UI_COMMIT_BASE }}
         restore-keys: |
           screenshots-${{env.SHORT_BRANCH}}-
 
     - name: "List cached screenshots"
-      if: ${{ matrix.test == 'screenshots' && env.COMPARE_SCREENSHOTS == 'true' }}
+      if: ${{ matrix.test == 'screenshots' && github.event_name == 'pull_request' }}
       run: |
-        ls ansible-hub-ui/test/screenshots-main/
+        ls ansible-hub-ui/test/screenshots-base/
 
     - name: "Run cypress"
       working-directory: 'ansible-hub-ui/test'
@@ -337,49 +256,61 @@ jobs:
         ls ansible-hub-ui/test/cypress/screenshots/screenshots/screenshots.js/
 
     - name: "Compare screenshots"
-      if: ${{ matrix.test == 'screenshots' && env.COMPARE_SCREENSHOTS == 'true' }}
+      if: ${{ matrix.test == 'screenshots' && github.event_name == 'pull_request' }}
       working-directory: 'ansible-hub-ui/test'
       run: |
         changed=false
 
-        for orig in screenshots-main/*; do
-          echo $orig
-          new=cypress/screenshots/screenshots/screenshots.js/"$(basename "$orig")"
-          diff=cypress/screenshots/screenshots/diff--"$(basename "$orig")"
+        for orig in screenshots-base/*; do
+          name=`basename "$orig"`
+          new="cypress/screenshots/screenshots/screenshots.js/$name"
+          diff="cypress/screenshots/screenshots/diff--$name"
 
-          num=$(compare -metric RMSE "$orig" "$new" "$diff" 2>&1 | awk '{ print $1 }')
-          echo $num
+          num=$(compare -metric RMSE -fuzz 5% "$orig" "$new" "$diff" 2>&1 | awk '{ print $1 }')
           num=${num%.*}
-          if [ "$num" -gt 10 ]; then
-            echo "screenshot $orig changed: $num" 1>&2
+          if [ "$num" -gt 64 ]; then
+            echo "screenshot $name changed: $num" 1>&2
             changed=true
           fi
         done
 
         if [ "$changed" = true ]; then
-          echo "Process failed because change occured"
+          cp -a screenshots-base cypress/screenshots/screenshots/0-before
+          mv cypress/screenshots/screenshots/{screenshots.js,1-after}
           exit 1
         fi
 
-    - name: "Move Cache master screenshots"
-      if: ${{ matrix.test == 'screenshots' && env.COMPARE_SCREENSHOTS == 'false' }}
+    - name: "Move screenshots to cache"
+      if: ${{ matrix.test == 'screenshots' && github.event_name != 'pull_request' }}
       working-directory: 'ansible-hub-ui/test'
       run: |
-        rm -rf screenshots-main/
-        mv cypress/screenshots/screenshots/screenshots.js ./screenshots-main
+        rm -rf screenshots-base/
+        mv cypress/screenshots/screenshots/screenshots.js ./screenshots-base
 
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v4
       if: failure()
       with:
-        name: screenshots_and_videos
+        name: screenshots_and_videos-${{matrix.test}}
         path: |
           ansible-hub-ui/test/cypress/screenshots
           ansible-hub-ui/test/cypress/videos
 
     - name: "Kill container, show debug info"
       if: always()
-      working-directory: 'oci_env'
       run: |
-        oci-env exec bash -c "pip3 list && pip3 install pipdeptree && pipdeptree"
-        oci-env compose logs
-        oci-env compose kill
+        docker ps -a
+        echo ::group::MANAGER_LOGS
+        docker logs compose-manager-1
+        echo ::endgroup::
+        echo ::group::WORKER_LOGS
+        docker logs compose-worker-1
+        echo ::endgroup::
+        echo ::group::CONTENT_LOGS
+        docker logs compose-content-1
+        echo ::endgroup::
+        echo ::group::API_LOGS
+        docker logs compose-api-1
+        echo ::endgroup::
+        echo ::group::DEPENDENCIES
+        docker exec compose-manager-1 bash -c "pip list && pip install pipdeptree && pipdeptree"
+        echo ::endgroup::

.github/workflows/dev-release.yml

@@ -23,10 +23,10 @@ jobs:
     - name: "Checkout ansible-hub-ui (${{ github.ref }})"
       uses: actions/checkout@v4
 
-    - name: "Install node 16"
+    - name: "Install node 20"
       uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '20'
 
     - name: "Update the dev tag"
       run: |
@@ -36,7 +36,7 @@ jobs:
         git push -f --tags
 
     - name: "Cache ~/.npm"
-      uses: actions/cache@v3
+      uses: actions/cache@v4
       with:
         path: ~/.npm
         key: ${{ runner.os }}-node-${{ env.GITHUB_REF }}-${{ hashFiles('**/package-lock.json') }}

.github/workflows/i18n.yml

@@ -15,10 +15,8 @@ jobs:
       matrix:
         branch:
         - 'master'
-        - 'stable-4.5'
-        - 'stable-4.6'
-        - 'stable-4.7'
-        - 'stable-4.8'
+        - 'stable-4.9'
+        - 'stable-4.10'
 
     steps:
 

.github/workflows/pr-checks.yml

@@ -2,43 +2,28 @@ name: "PR checks"
 
 on:
   pull_request:
-    branches: [ 'master', 'stable-*', 'feature/*' ]
+    branches: [ 'master', 'stable-*' ]
 
 jobs:
 
-  check_commit:
-    runs-on: ubuntu-latest
-    if: ${{ github.base_ref == 'master' }}
-    steps:
-
-    - name: Checkout code
-      uses: actions/checkout@v4
-      with:
-        ref: ${{ github.event.after }}  # for PR avoids checking out merge commit
-        fetch-depth: 0  # include all history
-
-    - name: Run script to validate commits for both pull request and a push
-      env:
-        GITHUB_PR_COMMITS_URL: ${{ github.event.pull_request.commits_url }}
-        GITHUB_USER: ${{ github.event.pull_request.user.login }}
-        START_COMMIT: ${{ github.event.before }}
-        END_COMMIT: ${{ github.event.after }}
-      run: |
-        curl https://raw.githubusercontent.com/ansible/galaxy_ng/master/.ci/scripts/validate_commit_message_custom.py | python
-
   pr-checks:
     runs-on: ubuntu-latest
     steps:
 
     - name: "Checkout ansible-hub-ui (${{ github.ref }})"
       uses: actions/checkout@v4
 
-    - name: "Install node 16"
+    - name: "Install node 20"
       uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '20'
         cache: 'npm'
 
+    - name: "Install python 3.11"
+      uses: actions/setup-python@v5
+      with:
+        python-version: '3.11'
+
     - name: "Checks"
       run: |
         # fail if npm install had to change package-lock.json
@@ -108,42 +93,44 @@ jobs:
       with:
         path: 'pr'
 
-    - name: "Install node 16"
+    - name: "Install node 20"
       uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '20'
         cache: 'npm'
         cache-dependency-path: |
           base/package-lock.json
           pr/package-lock.json
 
+    - name: 'npm install (base)'
+      working-directory: 'base'
+      run: 'npm install'
+
+    - name: 'npm install (pr)'
+      working-directory: 'pr'
+      run: 'npm install'
+
     - name: "Diff configs"
       run: |
         mkdir ~/webpack-config/
 
+        # eliminate differences caused by branch name based logic in f-c-config
+        export BRANCH="${{ github.base_ref }}"
+
         for version in base pr; do
           mkdir ~/webpack-config/$version/
           pushd $version/config/
-          npm install
-
-          for file in *.js; do
-            # FIXME: that's what TARGET_ENVIRONMENT is for
-            NODE_ENV=
-            if grep -q prod <<< "$file"; then
-              NODE_ENV=production
-            fi
-            export NODE_ENV
 
-            # eliminate differences caused by branch name based logic in f-c-config
-            export BRANCH="${{ github.base_ref }}"
+          for file in *.webpack.config.js; do
+            export NODE_ENV=`grep -q '\.prod\.' <<< "$file" && echo production || echo development`
 
             node -e 'console.log(JSON.stringify(require("./'"$file"'"), null, 2))' |
               sed -e 's/\/home\/.*\/\(base\|pr\)\//\/DIR\//g' \
                 -e 's/"UI_COMMIT_HASH": ".*"/"UI_COMMIT_HASH": "HASH"/' |
               perl -ne 'print unless /^[0-9a-f]{64,64}$/d' |
               grep -v '^Current branch:' |
               grep -v '^Waiting for ' |
-              grep -v '^Root folder:' > ~/webpack-config/"$version"/"$file".json
+              grep -v 'Root folder:' > ~/webpack-config/"$version"/"$file".json
           done
 
           popd

.github/workflows/stable-release.yml

@@ -4,9 +4,10 @@ name: "Stable release"
 on:
   push:
     tags:
-    - '[0-9]+.[0-9]+.**'
-    - '!dev'
-    - '!**cloud**'
+    - '[0-9]+.[0-9]+.*'
+    - '!dev*'
+    - '!cloud-*'
+    - '!crc-*'
 
 concurrency:
   group: stable-release-${{ github.ref }}
@@ -28,13 +29,13 @@ jobs:
         RELEASE_TAG=`sed 's/^refs\/tags\///' <<< $GITHUB_REF`
         echo "RELEASE_TAG=${RELEASE_TAG}" >> $GITHUB_ENV
 
-    - name: "Install node 16"
+    - name: "Install node 20"
       uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '20'
 
     - name: "Cache ~/.npm"
-      uses: actions/cache@v3
+      uses: actions/cache@v4
       with:
         path: ~/.npm
         key: ${{ runner.os }}-node-${{ env.GITHUB_REF }}-${{ hashFiles('**/package-lock.json') }}

.ls-lint.yml

@@ -1,23 +1,10 @@
 ls:
-  .travis:
-    .js: snake_case
-
-  config:
-    .js: point.case | kebab-case
-
-  src/loaders/insights:
-    .js: kebab-case | PascalCase
-
-  src/utilities:
-    .js: camelCase | snake_case
-
-  test:
-    .js: kebab-case | snake_case
-
+  .config.js: point.case
   .d.ts: kebab-case
-  .js: kebab-case | point.case
-  .test.js: kebab-case
+  .js: kebab-case
+  .jsx: kebab-case
   .ts: kebab-case
+  .tsx: kebab-case
 
 ignore:
   - '.git'

.prettierignore

@@ -1,14 +1,13 @@
-src/index.html
 *.json
-.*.sw[po]
-*.xml
-*.sh
-Dockerfile
-.DS_Store
 *.md
-*.png
 *.mp4
+*.png
 *.po
+*.sh
+*.xml
+.*.sw[po]
+.DS_Store
+Dockerfile
 test/cypress.env.json.template
-test/cypress/fixtures/
 test/cypress/e2e/*/compose.env
+test/cypress/fixtures/

.prettierrc.yaml

@@ -6,6 +6,7 @@ importOrder:
   - '^[.][.]/app.scss'
   - '<THIRD_PARTY_MODULES>'
   - "^src/"
+  - "^static/"
   - "^[./]"
 importOrderSortSpecifiers: true
 plugins:

.stylelintrc.json

@@ -2,6 +2,7 @@
   "extends": "stylelint-config-standard-scss",
   "rules": {
     "custom-property-pattern": "^([a-z][a-z0-9]*)(-+[a-zA-Z0-9_]+)*$",
+    "scss/at-import-partial-extension": null,
     "selector-class-pattern": null
   }
 }

CHANGES/2163.misc

@@ -0,0 +1 @@
+community - add trustarc

CHANGES/2790.misc

@@ -0,0 +1 @@
+role namespaces: Change provider namespace

CHANGES/2833.misc

@@ -0,0 +1 @@
+Add an import button for import/reimport roles in the UI

CHANGES/2866.misc

@@ -0,0 +1 @@
+role namespaces: Change provider namespace

CHANGES/3039.misc

@@ -0,0 +1 @@
+support preview and stable assets in frontend container build

CHANGES/3040.misc

@@ -0,0 +1 @@
+Bump patternfly to v5

CHANGES/3073.misc

@@ -0,0 +1 @@
+insights: hardcode list of default filter tags

CHANGES/5415.bug

@@ -0,0 +1 @@
+Collection documentation: treat options of type `boolean` the same as options of type `bool`.

CHANGES/5416.bug

@@ -0,0 +1 @@
+Collection documentation: process markup in deprecation messages.

CHANGES/5417.bug

@@ -0,0 +1 @@
+Collection documentation: fix zero width of spacer columns indenting suboptions and sub-return values.

Dockerfile

@@ -1,7 +1,7 @@
 # WARNING
 # This Dockerfile is intended for development purposes only. Do not use it for production deployments
 
-FROM node:16-alpine
+FROM node:20-alpine
 WORKDIR /hub/
 
 RUN mkdir -p /hub/app/ && \

README.md

@@ -1,109 +1,119 @@
 # Ansible Automation Hub UI
 
-Frontend for Ansible Automation Hub. The backend for this project can be [found here](https://github.com/ansible/galaxy_ng/).
+Frontend for Ansible Hub and Galaxy. The backend for this project can be found at [ansible/galaxy\_ng](https://github.com/ansible/galaxy_ng/),
+developer docs at [ansible.readthedocs.io](https://ansible.readthedocs.io/projects/galaxy-ng/en/latest/), and an outdated wiki at [ansibe/galaxy\_ng wiki](https://github.com/ansible/galaxy_ng/wiki/Development-Setup).
+Also read [developer\_guidelines](./developer_guidelines.md).
 
-# Setting up Your Dev Environment
+The project is built on React & Patternfly, using components from [patternfly-react](https://github.com/patternfly/patternfly-react), with [lingui](https://github.com/lingui/js-lingui/) for l10n.
 
-## Develop using Docker Compose (Recommended)
 
-This project can now be run as a container alongside the API. Just follow the instructions on the [ansibe/galaxy_ng wiki](https://github.com/ansible/galaxy_ng/wiki/Development-Setup).
+## Setting up Your Dev Environment
 
-## Develop without containers
+### Backend
 
-This app can be developed in standalone, community, or insights mode. Insights mode compiles the app to be run on the Red Hat cloud services platform (insights). Standalone mode only requires a running instance of the galaxy API for the UI to connect to. Community mode is similar to standalone, with github login and Roles.
+The development version of the backend runs in a docker-compose.
 
-For every mode, you first need to:
+Set up:
 
-1. Clone the [galaxy_ng](https://github.com/ansible/galaxy_ng) repo and follow the setup instructions
-2. Install node. Node v16+ is known to work. Older versions may work as well.
-3. `npm install` in the UI
+```
+git clone https://github.com/ansible/galaxy_ng
 
-### Develop in Standalone Mode (default)
+```
 
-1. Start the API with `COMPOSE_PROFILE=standalone` (compose) or `COMPOSE_PROFILE=galaxy_ng/base` (oci-env)
-2. `npm run start-standalone`
+Run:
 
-The app will run on http://localhost:8002/ui and proxy requests for `/api/automation-hub` to the api on `http://localhost:5001`.
+```
+cd galaxy_ng
+make compose/aap
+```
 
-### Develop in Community Mode
+The backend can be run in multiple modes - `standalone`, `community`, `insights`, `certified-sync` and `aap`.
+Depending on the mode, it will listen on http://localhost:5001, under `/api/galaxy/`, `/api/` or `/api/automation-hub/`.
 
-1. Start the API with `COMPOSE_PROFILE=standalone-community` (compose)
-2. `npm run start-community`
+Or, use the [simplified compose stack](https://github.com/ansible/galaxy_ng/tree/master/dev/compose#galaxy-simplified-compose-stack).
 
-The app will run on http://localhost:8002/ui and proxy requests for `/api` to the api on `http://localhost:5001`.
 
-### Develop in Insights Mode
+### Frontend
 
-**NOTE:** This option is only relevant to Red Hat employees. Community contributors should follow setup for [standalone mode](#develop-in-standalone-mode)
+UI can run either as part of the backend container, or locally. The development version of the frontend uses webpack dev server.
 
-1. Start the API with `COMPOSE_PROFILE=insights` (compose) or `COMPOSE_PROFILE=galaxy_ng/base:galaxy_ng/insights` (oci-env)
-2. `npm run start-insights`
+Set up:
 
-The app will run on http://localhost:8002/preview/ansible/automation-hub (and http://localhost:8002/beta/ansible/automation-hub) and proxy requests for `/api/automation-hub` to the api on `http://localhost:5001`.
+Install node. Node v20+ is known to work. Other versions may work as well.
 
-## Deploying
+```
+git clone https://github.com/ansible/ansible-hub-ui
+cd ansible-hub-ui
+npm install
+```
 
-We're using GitHub Actions for deployment.
+Run:
 
-### How it works
+```
+cd ansible-hub-ui
+API_PROXY=http://localhost:5001 npm run start-standalone
+```
 
-The GitHub Action invokes the [RedHatInsights/insights-frontend-builder-common//bootstrap.sh](https://raw.githubusercontent.com/RedHatInsights/insights-frontend-builder-common/master/src/bootstrap.sh) script, which builds the local branch and pushes the results to [RedHatInsights/ansible-hub-ui-build](https://github.com/RedHatInsights/ansible-hub-ui-build/branches). There, a separate Jenkins process awaits.
+(Or run `API_PROXY=https://my-server.example.com npm run start-standalone` to run with external backend.)
 
-- any push to the `master` branch will deploy to `ansible-hub-ui-build` `qa-beta` branch
-- any push to the `master` branch will ALSO deploy to `ansible-hub-ui-build` `qa-stable` branch when `.cloud-stage-cron.enabled` exists
-- any push to the `prod-beta` branch will deploy to a `ansible-hub-ui-build` `prod-beta` branch
-- any push to the `prod-stable` branch will deploy to a `ansible-hub-ui-build` `prod-stable` branch
-- the `ansible-hub-ui-build` `master` branch is not used, as PRs against `master` end up in `qa-beta`
+This app can be developed in standalone, community, or insights mode. Insights mode compiles the app to be run on the Red Hat cloud services platform (insights). Standalone mode only requires a running instance of the galaxy API for the UI to connect to. Community mode is similar to standalone, with github login and roles.
 
-- `qa-beta` builds end up on `console.stage.redhat.com/preview` (and `/beta`)
-- `qa-stable` builds end up on `console.stage.redhat.com`
-- `prod-beta` builds end up on `console.redhat.com/preview` (and `/beta`)
-- `prod-stable` builds end up on `console.redhat.com`
 
-### Workflows
+#### Modes
+
+* `start-standalone`: assumes `compose/standalone` or `compose/dab`, http://localhost:8002/ui/ and http://localhost:5001/api/galaxy/
+* `start-community`: assumes `compose/community`, http://localhost:8002/ui/ and http://localhost:5001/api/
+* `start-insights`: assumes `compose/insights`,  http://localhost:8002/preview/ansible/automation-hub/ and http://localhost:5001/api/automation-hub/
+  * **NOTE:** This option is only relevant to Red Hat employees.
+
+
+### Tests
+
+For more information about UI testing go to [test/README.md](./test/README.md).
+
+Set up:
+
+```
+pip install galaxykit ansible
+
+cd ansible-hub-ui/test/
+npm install
+```
+
+And create a `cypress.env.json` from the `cypress.env.json.template` template.
+
+Run:
+
+```
+cd ansible-hub-ui/test/
+npm run cypress
+```
+
+
+## GitHub Workflows
 
 List of all workflows:
 
-- `backported-labels`: Add a backported-* label when a PR is backported to stable-*; on patchback merges
-- `cloud-stage-disable`: Disable deploy-cloud from master to stage-stable (stage-beta always on); manual
-- `cloud-stage-enable`: Enable deploy-cloud from master to stage-stable (stage-beta always on); manual
 - `cypress`: Run Cypress integration tests; on PRs, pushes and cron
-- `deploy-cloud`: Deploy to c.r.c; when the relevant branch is updated
 - `dev-release`: Build and upload to github releases, update `dev` tag; when master is updated
-- `i18n`: Extract and merge l10n strings for 4.5+; cron
+- `i18n`: Extract and merge l10n strings; cron
 - `pr-checks`: Check for linter errors, obsolete package-lock.json and merge commits; on PRs only
 - `stable-release`: Build and upload to github releases; when a stable release is created
-- `update-manifest`: Update https://github.com/RedHatInsights/manifests ; when master is updated
 
 List by branches:
 
-- `master`: `backported-labels`, `cypress`, `deploy-cloud`, `dev-release`, `i18n`, `pr-checks`, `stable-release`, `update-manifest`
-- `prod-beta`, `prod-stable`: `deploy-cloud`
-- `stable-4.5`, `stable-4.6`, `stable-4.7`, `stable-4.8`: `backported-labels`, `cypress`, `pr-checks`, `stable-release` (and `i18n` via cron from master)
+- `master`: `cypress`, `dev-release`, `i18n`, `pr-checks`, `stable-release`
+- `stable-*`: `cypress`, `i18n` (via cron from master), `pr-checks`, `stable-release`
+
 
-### Version mapping
+## Version mapping
 
 Our branches, backport labels, releases and tags use AAH versions, but Jira uses AAP versions.
 To map between the two:
 
-|AAP version|AAH version|notes|
-|-|-|-|
-|2.2|4.5||
-|2.3|4.6||
-|2.4|4.7||
-|2.4|4.8|django 4, still part of 2.4|
+|AAP version|AAH version|
+|-|-|
+|2.4|4.9|
+|2.5|4.10|
 
 [Table with component versions](https://github.com/ansible/galaxy_ng/wiki/Galaxy-NG-Version-Matrix)
-
-## Patternfly
-
-- This project imports Patternfly components:
-  - [Patternfly React](https://github.com/patternfly/patternfly-react)
-
-## Insights Components
-
-Insights Platform will deliver components and static assets through [npm](https://www.npmjs.com/package/@red-hat-insights/insights-frontend-components). [insights-chrome](https://github.com/RedHatInsights/insights-chrome) takes care of the header, sidebar, and footer.
-
-## UI Testing
-
-For more information about UI testing go to [test README](https://github.com/ansible/ansible-hub-ui/tree/master/test/README.md).

ansible-hub-ui/__init__.py

@@ -1 +1 @@
-__version__ = "4.9.0dev"
+__version__ = "4.11.0dev"

build_deploy.sh

@@ -9,7 +9,7 @@ export WORKSPACE=${WORKSPACE:-$APP_ROOT} # if running in jenkins, use the build'
 export APP_ROOT=$(pwd)
 COMMON_BUILDER=https://raw.githubusercontent.com/RedHatInsights/insights-frontend-builder-common/master
 
-export NODE_BUILD_VERSION=16
+export NODE_BUILD_VERSION=20
 export IMAGE="quay.io/cloudservices/ansible-hub-ui"
 
 set -exv

ci.sh

@@ -5,7 +5,22 @@ npm ci
 
 npm run gettext:extract
 npm run gettext:compile
-npm run build-insights
+
+if [ "$IS_PR" = true ]; then
+    npm run build-insights
+else
+    export HUB_CLOUD_BETA=false
+    npm run build-insights
+    mv ${DIST_FOLDER} stable
+
+    export HUB_CLOUD_BETA=true
+    npm run build-insights
+    mv ${DIST_FOLDER} preview
+
+    mkdir -p ${DIST_FOLDER}
+    mv stable ${DIST_FOLDER}/stable
+    mv preview ${DIST_FOLDER}/preview
+fi
 
 # do not use dev dockerfile
-rm "$APP_ROOT"/Dockerfile "$APP_ROOT"/.dockerignore || true
+rm "$APP_ROOT"/Dockerfile "$APP_ROOT"/.dockerignore /workspace/source/source/.dockerignore || true

community/Dockerfile

@@ -1,8 +1,9 @@
-FROM node:16-alpine
+FROM node:20-alpine
 WORKDIR /workspace/
 RUN mkdir -p /workspace/ && \
     apk add --no-cache git
 COPY . /workspace/
+COPY community/index.html /workspace/src/index.html
 RUN npm ci && \
     npm run gettext:extract && \
     npm run gettext:compile && \

community/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8" />
+    <title><%= htmlWebpackPlugin.options.applicationName %></title>
+
+    <script
+      id="trustarc"
+      type="text/javascript"
+      src="//static.redhat.com/libs/redhat/marketing/latest/trustarc/trustarc.js"
+      defer
+      data-domain="redhat2.com"
+      data-debug=""
+    ></script>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <footer style="display: none">
+      <span id="teconsent">
+        <!-- trustarc -->
+      </span>
+    </footer>
+
+    <div
+      id="consent_blackbar"
+      style="position: fixed; bottom: 0; width: 100%; z-index: 5; padding: 10px"
+    ></div>
+  </body>
+</html>

config/community.dev.webpack.config.js

@@ -1,11 +1,11 @@
-const webpackBase = require('./webpack.base.config');
+const { webpackBase, proxy, fake } = require('./webpack.base.config');
 
 const collectionRatings = require('../static/scores/collection.json');
 const roleRatings = require('../static/scores/role.json');
 
 // Used for getting the correct host when running in a container
-const proxyHost = process.env.API_PROXY_HOST || 'localhost';
-const proxyPort = process.env.API_PROXY_PORT || '5001';
+const proxyTarget = process.env.API_PROXY || 'http://localhost:5001';
+
 const apiBasePath = process.env.API_BASE_PATH || '/api/';
 const uiExternalLoginURI =
   process.env.UI_EXTERNAL_LOGIN_URI || '/login/github/';
@@ -17,19 +17,18 @@ module.exports = webpackBase({
   // Path to the API on the API host. EX: /api/automation-hub
   API_BASE_PATH: apiBasePath,
 
+  // Determines the title of the app
+  APPLICATION_NAME: 'Ansible Galaxy',
+
   // Path on the host where the UI is found. EX: /apps/automation-hub
   UI_BASE_PATH: '/ui/',
 
   // Port that the UI is served over
   UI_PORT: 8002,
 
-  // Determines if the app should be compiled to run on insights or on
-  // another platform. Options: insights, standalone
-  DEPLOYMENT_MODE: 'standalone',
+  // Determines if the app should be compiled to run as community galaxy
   IS_COMMUNITY: true,
 
-  NAMESPACE_TERM: 'namespaces',
-
   // Serve the UI over http or https. Options: true, false
   UI_USE_HTTPS: false,
 
@@ -39,29 +38,27 @@ module.exports = webpackBase({
   // Login URI to allow stand alone with and without keycloak
   UI_EXTERNAL_LOGIN_URI: uiExternalLoginURI,
 
-  //required?
+  // required?
   WEBPACK_PUBLIC_PATH: '/',
 
   // Value for webpack.devServer.proxy
   // https://webpack.js.org/configuration/dev-server/#devserverproxy
   // used to get around CORS requirements when running in dev mode
-  WEBPACK_PROXY: {
-    '/api/': `http://${proxyHost}:${proxyPort}`,
-    '/complete/': `http://${proxyHost}:${proxyPort}`,
-    '/login/': `http://${proxyHost}:${proxyPort}`,
-    '/pulp/api/': `http://${proxyHost}:${proxyPort}`,
-    '/static/rest_framework/': `http://${proxyHost}:${proxyPort}`,
-    '/static/scores/': {
-      bypass: function (req, res) {
-        if (req.url === '/static/scores/collection.json') {
-          res.send(collectionRatings);
-          return false;
-        }
-        if (req.url === '/static/scores/role.json') {
-          res.send(roleRatings);
-          return false;
-        }
-      },
-    },
-  },
+  WEBPACK_PROXY: [
+    proxy('/api/', proxyTarget),
+    proxy('/pulp/api/', proxyTarget),
+    proxy('/complete/', proxyTarget),
+    proxy('/login/', proxyTarget),
+    proxy('/static/rest_framework/', proxyTarget),
+    fake('/static/scores/', (req, res) => {
+      if (req.url === '/static/scores/collection.json') {
+        res.send(collectionRatings);
+        return false;
+      }
+      if (req.url === '/static/scores/role.json') {
+        res.send(roleRatings);
+        return false;
+      }
+    }),
+  ],
 });

config/community.prod.webpack.config.js

@@ -1,16 +1,13 @@
-process.env.NODE_ENV = 'production';
-const webpackBase = require('./webpack.base.config');
+const { webpackBase } = require('./webpack.base.config');
 
 // Compile configuration for stnadalone mode
 module.exports = webpackBase({
-  API_HOST: '',
   API_BASE_PATH: '/api/',
-  UI_BASE_PATH: '/ui/',
-  DEPLOYMENT_MODE: 'standalone',
+  APPLICATION_NAME: 'Ansible Galaxy',
   IS_COMMUNITY: true,
-  NAMESPACE_TERM: 'namespaces',
-  UI_USE_HTTPS: false,
+  UI_BASE_PATH: '/ui/',
   UI_DEBUG: false,
   UI_EXTERNAL_LOGIN_URI: '/login/github/',
+  UI_USE_HTTPS: false,
   WEBPACK_PUBLIC_PATH: '/',
 });

config/insights.dev.webpack.config.js

@@ -1,7 +1,7 @@
-const webpackBase = require('./webpack.base.config');
+const { webpackBase } = require('./webpack.base.config');
 
-const proxyHost = process.env.API_PROXY_HOST || 'localhost';
-const proxyPort = process.env.API_PROXY_PORT || '5001';
+// Used for getting the correct host when running in a container
+const proxyTarget = process.env.API_PROXY || 'http://localhost:5001';
 
 const cloudBeta = process.env.HUB_CLOUD_BETA; // "true" | "false" | undefined (=default)
 
@@ -13,7 +13,7 @@ module.exports = webpackBase({
   API_BASE_PATH: '/api/automation-hub/',
 
   // Value for standalone.api.target
-  API_PROXY_TARGET: `http://${proxyHost}:${proxyPort}`,
+  API_PROXY: proxyTarget,
 
   // Path on the host where the UI is found. EX: /apps/automation-hub
   UI_BASE_PATH:
@@ -24,14 +24,9 @@ module.exports = webpackBase({
   // Port that the UI is served over
   UI_PORT: 8002,
 
-  // Determines if the app should be compiled to run on insights or on
-  // another platform. Options: insights, standalone
-  DEPLOYMENT_MODE: 'insights',
+  // Determines if the app should be compiled to run on insights
   IS_INSIGHTS: true,
 
-  // Determines the title of the "namespaces" page
-  NAMESPACE_TERM: 'partners',
-
   // Determines the title of the app
   APPLICATION_NAME: 'Automation Hub',
 

config/insights.prod.webpack.config.js

@@ -1,18 +1,14 @@
-process.env.NODE_ENV = 'production';
-const webpackBase = require('./webpack.base.config');
+const { webpackBase } = require('./webpack.base.config');
 const cloudBeta = process.env.HUB_CLOUD_BETA; // "true" | "false" | undefined (=default)
 
 // Compile configuration for deploying to insights
 module.exports = webpackBase({
-  API_HOST: '',
   API_BASE_PATH: '/api/automation-hub/',
   UI_BASE_PATH:
     cloudBeta === 'true'
       ? '/preview/ansible/automation-hub/'
       : '/ansible/automation-hub/',
-  DEPLOYMENT_MODE: 'insights',
   IS_INSIGHTS: true,
-  NAMESPACE_TERM: 'partners',
   UI_USE_HTTPS: false,
   UI_DEBUG: false,
   APPLICATION_NAME: 'Automation Hub',

config/standalone.dev.webpack.config.js

@@ -1,12 +1,12 @@
-const webpackBase = require('./webpack.base.config');
+const { webpackBase, proxy, fake } = require('./webpack.base.config');
 
 const collectionRatings = require('../static/scores/collection.json');
 const roleRatings = require('../static/scores/role.json');
 
 // Used for getting the correct host when running in a container
-const proxyHost = process.env.API_PROXY_HOST || 'localhost';
-const proxyPort = process.env.API_PROXY_PORT || '5001';
-const apiBasePath = process.env.API_BASE_PATH || '/api/automation-hub/';
+const proxyTarget = process.env.API_PROXY || 'http://localhost:5001';
+
+const apiBasePath = process.env.API_BASE_PATH || '/api/galaxy/';
 const uiExternalLoginURI = process.env.UI_EXTERNAL_LOGIN_URI || '/login';
 
 module.exports = webpackBase({
@@ -22,14 +22,9 @@ module.exports = webpackBase({
   // Port that the UI is served over
   UI_PORT: 8002,
 
-  // Determines if the app should be compiled to run on insights or on
-  // another platform. Options: insights, standalone
-  DEPLOYMENT_MODE: 'standalone',
   // dev-mode only, support `IS_COMMUNITY=1 npm run start-standalone` in addition to `npm run start-community`
   IS_COMMUNITY: !!process.env.IS_COMMUNITY,
 
-  NAMESPACE_TERM: 'namespaces',
-
   // Serve the UI over http or https. Options: true, false
   UI_USE_HTTPS: false,
 
@@ -42,23 +37,21 @@ module.exports = webpackBase({
   // Value for webpack.devServer.proxy
   // https://webpack.js.org/configuration/dev-server/#devserverproxy
   // used to get around CORS requirements when running in dev mode
-  WEBPACK_PROXY: {
-    '/api/': `http://${proxyHost}:${proxyPort}`,
-    '/pulp/api/': `http://${proxyHost}:${proxyPort}`,
-    '/v2/': `http://${proxyHost}:${proxyPort}`,
-    '/extensions/v2/': `http://${proxyHost}:${proxyPort}`,
-    '/static/rest_framework/': `http://${proxyHost}:${proxyPort}`,
-    '/static/scores/': {
-      bypass: function (req, res) {
-        if (req.url === '/static/scores/collection.json') {
-          res.send(collectionRatings);
-          return false;
-        }
-        if (req.url === '/static/scores/role.json') {
-          res.send(roleRatings);
-          return false;
-        }
-      },
-    },
-  },
+  WEBPACK_PROXY: [
+    proxy('/api/', proxyTarget),
+    proxy('/pulp/api/', proxyTarget),
+    proxy('/v2/', proxyTarget),
+    proxy('/extensions/v2/', proxyTarget),
+    proxy('/static/rest_framework/', proxyTarget),
+    fake('/static/scores/', (req, res) => {
+      if (req.url === '/static/scores/collection.json') {
+        res.send(collectionRatings);
+        return false;
+      }
+      if (req.url === '/static/scores/role.json') {
+        res.send(roleRatings);
+        return false;
+      }
+    }),
+  ],
 });

config/standalone.prod.webpack.config.js

@@ -1,13 +1,9 @@
-process.env.NODE_ENV = 'production';
-const webpackBase = require('./webpack.base.config');
+const { webpackBase } = require('./webpack.base.config');
 
 // Compile configuration for stnadalone mode
 module.exports = webpackBase({
-  API_HOST: '',
   API_BASE_PATH: '/api/galaxy/',
   UI_BASE_PATH: '/ui/',
-  DEPLOYMENT_MODE: 'standalone',
-  NAMESPACE_TERM: 'namespaces',
   UI_USE_HTTPS: false,
   UI_DEBUG: false,
   UI_EXTERNAL_LOGIN_URI: '/login',

config/webpack.base.config.js

@@ -1,13 +1,12 @@
-const { resolve } = require('path'); // node:path
+const { resolve } = require('node:path');
 const config = require('@redhat-cloud-services/frontend-components-config');
 const {
-  rbac,
-  defaultServices,
-} = require('@redhat-cloud-services/frontend-components-config-utilities/standalone');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+  default: { rbac, defaultServices },
+} = require('@redhat-cloud-services/frontend-components-config-utilities/standalone/services');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const { execSync } = require('child_process'); // node:child_process
+const { execSync } = require('node:child_process');
 
 const isBuild = process.env.NODE_ENV === 'production';
 const cloudBeta = process.env.HUB_CLOUD_BETA; // "true" | "false" | undefined (=default)
@@ -23,7 +22,7 @@ const gitCommit =
   execSync('git rev-parse HEAD', { encoding: 'utf-8' }).trim();
 
 const docsURL =
-  'https://access.redhat.com/documentation/en-us/red_hat_ansible_automation_platform/';
+  'https://docs.redhat.com/en/documentation/red_hat_ansible_automation_platform/';
 
 // Default user defined settings
 const defaultConfigs = [
@@ -34,83 +33,73 @@ const defaultConfigs = [
   { name: 'APPLICATION_NAME', default: 'Galaxy NG', scope: 'global' },
   { name: 'IS_COMMUNITY', default: false, scope: 'global' },
   { name: 'IS_INSIGHTS', default: false, scope: 'global' },
-  { name: 'NAMESPACE_TERM', default: 'namespaces', scope: 'global' },
   { name: 'UI_BASE_PATH', default: '', scope: 'global' },
   { name: 'UI_COMMIT_HASH', default: gitCommit, scope: 'global' },
   { name: 'UI_DOCS_URL', default: docsURL, scope: 'global' },
   { name: 'UI_EXTERNAL_LOGIN_URI', default: '/login', scope: 'global' },
 
   // Webpack scope: only available in customConfigs here, not exposed to the UI
-  { name: 'API_PROXY_TARGET', default: undefined, scope: 'webpack' },
-  { name: 'DEPLOYMENT_MODE', default: 'standalone', scope: 'webpack' },
+  { name: 'API_PROXY', default: undefined, scope: 'webpack' },
   { name: 'UI_DEBUG', default: false, scope: 'webpack' },
   { name: 'UI_PORT', default: 8002, scope: 'webpack' },
   { name: 'UI_USE_HTTPS', default: false, scope: 'webpack' },
   { name: 'WEBPACK_PROXY', default: undefined, scope: 'webpack' },
   { name: 'WEBPACK_PUBLIC_PATH', default: undefined, scope: 'webpack' },
 ];
 
-const insightsMockAPIs = ({ app }) => {
-  // GET
-  [
-    {
-      url: '/api/chrome-service/v1/user',
-      response: {
-        data: {
-          lastVisited: [],
-          favoritePages: [],
-          visitedBundles: {},
-        },
-      },
-    },
-    { url: '/api/featureflags/v0', response: { toggles: [] } },
-    { url: '/api/quickstarts/v1/progress', response: { data: [] } },
-    { url: '/api/rbac/v1/access', response: { data: [] } },
-    { url: '/api/rbac/v1/cross-account-requests', response: { data: [] } },
-  ].forEach(({ url, response }) =>
-    app.get(url, (_req, res) => res.send(response)),
-  );
-
-  // POST
-  [
-    { url: '/api/chrome-service/v1/last-visited', response: { data: [] } },
-    {
-      url: '/api/chrome-service/v1/user/visited-bundles',
-      response: { data: [] },
+const proxy = (route, target) => {
+  const u = new URL(target);
+  return {
+    context: [route],
+    target,
+    secure: false,
+    router: (req) => {
+      req.headers.host = u.host;
+      req.headers.origin = u.origin;
+      req.headers.referer = u.href;
     },
-    { url: '/api/featureflags/v0/client/metrics', response: {} },
-  ].forEach(({ url, response }) =>
-    app.post(url, (_req, res) => res.send(response)),
-  );
+  };
 };
 
-module.exports = (inputConfigs) => {
+const fake = (route, bypass) => ({
+  context: [route],
+  target: {
+    bypass,
+  },
+});
+
+const webpackBase = (inputConfigs) => {
   const customConfigs = {};
   const globals = {};
 
   defaultConfigs.forEach((item) => {
-    // == will match null and undefined, but not false
-    if (inputConfigs[item.name] == null) {
-      customConfigs[item.name] = item.default;
-    } else {
-      customConfigs[item.name] = inputConfigs[item.name];
-    }
-    if (item.scope === 'global') {
-      globals[item.name] = JSON.stringify(
-        inputConfigs[item.name] || item.default,
-      );
-    }
+    customConfigs[item.name] = inputConfigs[item.name] ?? item.default;
   });
 
+  defaultConfigs
+    .filter(({ scope }) => scope === 'global')
+    .forEach((item) => {
+      globals[item.name] = JSON.stringify(customConfigs[item.name]);
+    });
+
   // 4.6+: pulp APIs live under API_BASE_PATH now, ignore previous overrides
   globals.PULP_API_BASE_PATH = JSON.stringify(
     customConfigs.API_BASE_PATH + 'pulp/api/v3/',
   );
 
-  const isStandalone = customConfigs.DEPLOYMENT_MODE !== 'insights';
+  // community is also considered standalone
+  const isStandalone = !customConfigs.IS_INSIGHTS;
+
+  const rootFolder = resolve(__dirname, '../');
+  const appEntry = resolve(
+    rootFolder,
+    'src',
+    isStandalone ? 'entry-standalone.tsx' : 'entry-insights.tsx',
+  );
 
   const { config: webpackConfig, plugins } = config({
-    rootFolder: resolve(__dirname, '../'),
+    appEntry,
+    rootFolder,
     definePlugin: globals,
     debug: customConfigs.UI_DEBUG,
     https: customConfigs.UI_USE_HTTPS,
@@ -137,17 +126,16 @@ module.exports = (inputConfigs) => {
         standalone: {
           api: {
             context: [customConfigs.API_BASE_PATH],
-            target: customConfigs.API_PROXY_TARGET,
+            target: customConfigs.API_PROXY,
           },
           rbac,
           ...defaultServices,
         },
-        registry: [insightsMockAPIs],
       }),
 
     // insights deployments from master
     ...(!isStandalone &&
-      cloudBeta && {
+      isBuild && {
         deployment: cloudBeta === 'true' ? 'beta/apps' : 'apps',
       }),
   });
@@ -195,32 +183,24 @@ module.exports = (inputConfigs) => {
 
         // imports relative to repo root
         src: resolve(__dirname, '../src'),
+        static: resolve(__dirname, '../static'),
       },
     },
-
-    // ignore editor files when watching
     watchOptions: {
+      // ignore editor files when watching
       ignored: ['**/.*.sw[po]'],
     },
   };
 
   if (customConfigs.WEBPACK_PROXY) {
+    // array since webpack-dev-server 5
     newWebpackConfig.devServer.proxy = customConfigs.WEBPACK_PROXY;
   }
 
   if (customConfigs.WEBPACK_PUBLIC_PATH) {
-    console.log(`New output.publicPath: ${customConfigs.WEBPACK_PUBLIC_PATH}`);
     newWebpackConfig.output.publicPath = customConfigs.WEBPACK_PUBLIC_PATH;
   }
 
-  if (customConfigs.DEPLOYMENT_MODE === 'standalone') {
-    console.log('Overriding configs for standalone mode.');
-
-    const newEntry = resolve(__dirname, '../src/entry-standalone.tsx');
-    console.log(`New entry.App: ${newEntry}`);
-    newWebpackConfig.entry.App = newEntry;
-  }
-
   // ForkTsCheckerWebpackPlugin is part of default config since @redhat-cloud-services/frontend-components-config 4.6.24
 
   // keep HtmlWebpackPlugin for standalone, inject src/index.html
@@ -234,26 +214,21 @@ module.exports = (inputConfigs) => {
     );
   }
 
-  if (customConfigs.DEPLOYMENT_MODE === 'insights') {
-    /**
-     * Generates remote containers for chrome 2
-     */
+  if (customConfigs.IS_INSIGHTS) {
+    // insights federated modules
+    // FIXME: still needed?
     plugins.push(
-      require('@redhat-cloud-services/frontend-components-config/federated-modules')(
+      require('@redhat-cloud-services/frontend-components-config-utilities/federated-modules')(
         {
-          root: resolve(__dirname, '../'),
+          root: rootFolder,
           exposes: {
-            './RootApp': resolve(__dirname, '../src/entry-insights.tsx'),
+            './RootApp': appEntry,
           },
           shared: [
             {
-              'react-router-dom': { singleton: true, requiredVersion: '*' },
+              'react-router-dom': { singleton: true, version: '*' },
             },
           ],
-          ...(!isBuild && {
-            // fixes "Shared module is not available for eager consumption"
-            exclude: ['@patternfly/react-core'],
-          }),
         },
       ),
     );
@@ -266,8 +241,19 @@ module.exports = (inputConfigs) => {
     }),
   );
 
+  // webpack-dev-server 5
+  if (!isBuild && 'https' in newWebpackConfig.devServer) {
+    delete newWebpackConfig.devServer.https;
+  }
+
   return {
     ...newWebpackConfig,
     plugins,
   };
 };
+
+module.exports = {
+  fake,
+  proxy,
+  webpackBase,
+};

deploy/frontend.yaml

@@ -19,19 +19,25 @@ objects:
           - /apps/automation-hub
       image: ${IMAGE}:${IMAGE_TAG}
       navItems:
-        - appId: "automationHub"
+        - id: "collections"
+          appId: "automationHub"
           title: "Collections"
-          href: "/ansible/automation-hub"
+          href: "/ansible/automation-hub/"
+          icon: "AnsibleIcon"
           product: "Ansible Automation Hub"
-        - appId: "automationHub"
+          description: "Find and download Ansible Content Collections from Red Hat and partners."
+        - id: "partners"
+          appId: "automationHub"
           title: "Partners"
           href: "/ansible/automation-hub/partners"
           product: "Ansible Automation Hub"
-        - appId: "automationHub"
+        - id: "taskManagement"
+          appId: "automationHub"
           title: "Task Management"
           href: "/ansible/automation-hub/tasks"
           product: "Ansible Automation Hub"
-        - appId: "automationHub"
+        - id: "connectToHub"
+          appId: "automationHub"
           title: "Connect to Hub"
           href: "/ansible/automation-hub/token"
           product: "Ansible Automation Hub"

developer_guidelines.md

@@ -4,16 +4,9 @@ These are the rules we try to follow to make sure this project is as consistent
 
 ## Imports
 
-### Ordering
-
-Imports should be ordered as follows:
-
-1. Any imports from 'react'
-2. Stylesheets
-3. Any imports from 3rd party libraries such as patternfly, lodash, etc.
-4. Local imports
-
-### Importing and exporting local components
+Imports get automatically sorted by prettier. For local imports, make sure to import from
+`src/SUBDIR` without the full path, or `./FILE`. Only use the file extension for scss &
+images.
 
 All components in local directories should be exported and imported via the index.ts file
 at the directory's root.
@@ -58,7 +51,7 @@ Updating the params keyword should be done with the `ParamHelper` object found i
 be used to update `params` as well as mixins that can be used to update the pages's
 query params when the state changes.
 
-An example of how this works is the `Sort` component (`src/components/patternfly-wrappers/sort.tsx`).
+An example of how this works is the `Sort` component (`src/components/sort.tsx`).
 This component loads the field being sorted and direction to sort by from `params['sort']`.
 When the component is changed it calls the `updateParams` callback which updates the component's
 `params` object, the page's query params and optionally calls the API with the new params to

docker/entrypoint.sh

@@ -5,7 +5,7 @@ then
   echo 'ANSIBLE_HUB_UI_PATH not supported in insights mode' 1>&2
   echo 1>&2
   echo 'please run' 1>&2
-  echo '  npm run start' 1>&2
+  echo '  npm run start-insights' 1>&2
   echo 'in the UI dir manually' 1>&2
   echo 1>&2
 else

eslint.config.mjs

@@ -0,0 +1,142 @@
+import eslint from '@eslint/js';
+import prettierConfig from 'eslint-config-prettier';
+import pluginLingui from 'eslint-plugin-lingui';
+import reactPlugin from 'eslint-plugin-react';
+import globals from 'globals';
+import {
+  config,
+  parser,
+  configs as tsConfigs,
+  plugin as tsPlugin,
+} from 'typescript-eslint';
+
+// require('eslint-plugin-react/configs/recommended') does the right thing but can't be imported
+// and the .configs.recommended export adds flatconfig-invalid .plugins and .parserOptions .. remove
+const reactConfig = {
+  ...reactPlugin.configs.recommended,
+  plugins: { react: reactPlugin }, // fix for plugins: ['react']
+};
+delete reactConfig.parserOptions;
+
+export default config(
+  eslint.configs.recommended,
+  reactConfig,
+  ...tsConfigs.recommended,
+  ...tsConfigs.stylistic,
+  prettierConfig,
+  pluginLingui.configs['flat/recommended'],
+  {
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+      react: reactPlugin,
+    },
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      parser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+    rules: {
+      curly: ['error', 'all'],
+      'eol-last': ['error', 'always'],
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { fixStyle: 'inline-type-imports' },
+      ],
+      'lingui/no-expression-in-message': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              importNames: [
+                'Alert',
+                'Breadcrumb',
+                'Chip',
+                'ChipGroup',
+                'ClipboardCopy',
+                'ClipboardCopyButton',
+                'FileUpload',
+                'Icon',
+                'LabelGroup',
+                'LoginForm',
+                'NavList',
+                'Pagination',
+                'Popover',
+                'SearchInput',
+                'Spinner',
+                'Tooltip',
+              ],
+              message: 'Import from src/components instead.',
+              name: '@patternfly/react-core',
+            },
+            {
+              importNames: ['CodeEditor'],
+              message: 'Import from src/components instead.',
+              name: '@patternfly/react-code-editor',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    files: ['config/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+    },
+  },
+  {
+    files: ['src/components/patternfly-wrappers/*.{js,jsx,ts,tsx}'],
+    rules: {
+      'no-restricted-imports': 'off',
+    },
+  },
+  {
+    files: ['test/**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        Cypress: 'readonly',
+        after: 'readonly',
+        before: 'readonly',
+        beforeEach: 'readonly',
+        cy: 'readonly',
+        describe: 'readonly',
+        expect: 'readonly',
+        it: 'readonly',
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+    },
+  },
+);

lingui.config.js

@@ -1,13 +1,14 @@
-const po = require("@lingui/format-po").formatter({ lineNumbers: false });
+import { defineConfig } from '@lingui/cli';
+import { formatter } from '@lingui/format-po';
 
-export default {
+export default defineConfig({
   catalogs: [
     {
       path: '<rootDir>/locale/{locale}',
       include: ['<rootDir>/src'],
     },
   ],
-  format: po,
-  locales: ['en', 'es', 'fr', 'ko', 'nl', 'ja', 'zh'],
+  format: formatter({ lineNumbers: false }),
+  locales: ['en', 'es', 'fr', 'ja', 'ko', 'nl', 'ru', 'zh'],
   sourceLocale: 'en',
-};
+});