[stable] Update build

.github/CODEOWNERS

@@ -3,4 +3,4 @@
 
 # These owners will be the default owners for everything in
 # the repo. Unless a later match takes precedence.
-*       @Hyperkid123 @ryelo @karelhala
+*       @Hyperkid123 @ryelo @karelhala @florkbr

Caddyfile

@@ -10,43 +10,43 @@
     {$CADDY_TLS_CERT}
     log
     @app_match {
-        path_regexp /apps/chrome(.*)
+        path /apps/chrome*
     }
     handle @app_match {
         uri strip_prefix /apps/chrome
         file_server * {
-            root /opt/app-root/src/build 
-            index opt/app-root/src/build/index.html
+            root /opt/app-root/src/build/stable
+            index opt/app-root/src/build/stable/index.html
             browse
         }
     }
 
     @beta_match {
-        path_regexp /beta/apps/chrome(.*)
+        path /beta/apps/chrome*
     }
     handle @beta_match {
         uri strip_prefix /beta/apps/chrome
         file_server * {
-            root /opt/app-root/src/build 
-            index opt/app-root/src/build/index.html
+            root /opt/app-root/src/build/preview
+            index opt/app-root/src/build/preview/index.html
             browse
         }
     }
 
     @preview_match {
-        path_regexp /preview/apps/chrome(.*)
+        path /preview/apps/chrome*
     }
     handle @preview_match {
         uri strip_prefix /preview/apps/chrome
         file_server * {
-            root /opt/app-root/src/build 
-            index opt/app-root/src/build/index.html
+            root /opt/app-root/src/build/preview
+            index opt/app-root/src/build/preview/index.html
             browse
         }
     }
 
     @config_match {
-        path_regexp /config/(.*)
+        path /config*
     }
     handle @config_match {
         uri strip_prefix /config

Jenkinsfile

@@ -0,0 +1,32 @@
+def secrets = [
+    [path: params.VAULT_PATH_SVC_ACCOUNT_EPHEMERAL, engineVersion: 1, secretValues: [
+        [envVar: 'OC_LOGIN_TOKEN', vaultKey: 'oc-login-token'],
+        [envVar: 'OC_LOGIN_SERVER', vaultKey: 'oc-login-server']]],
+    [path: params.VAULT_PATH_SVC_ACCOUNT_EPHEMERAL, engineVersion: 1, secretValues: [
+        [envVar: 'OC_LOGIN_TOKEN_DEV', vaultKey: 'oc-login-token-dev'],
+        [envVar: 'OC_LOGIN_SERVER_DEV', vaultKey: 'oc-login-server-dev']]],
+    [path: params.VAULT_PATH_QUAY_PUSH, engineVersion: 1, secretValues: [
+        [envVar: 'QUAY_USER', vaultKey: 'user'],
+        [envVar: 'QUAY_TOKEN', vaultKey: 'token']]],
+    [path: params.VAULT_PATH_RHR_PULL, engineVersion: 1, secretValues: [
+        [envVar: 'RH_REGISTRY_USER', vaultKey: 'user'],
+        [envVar: 'RH_REGISTRY_TOKEN', vaultKey: 'token']]],
+]
+
+pipeline {
+    agent { label 'insights' }
+    options {
+        timestamps()
+    }
+    environment {
+        PROJECT_NAME="insights-chrome"
+    }
+
+    stages {
+        stage('Placeholder') {
+            steps {
+                sh 'echo Placeholder Jenkinsfile'
+            }
+        }
+    }
+}

build_deploy.sh

@@ -4,6 +4,7 @@ export COMPONENT="insights-chrome-frontend"
 export IMAGE="quay.io/cloudservices/$COMPONENT"
 export WORKSPACE=${WORKSPACE:-$APP_ROOT}  # if running in jenkins, use the build's workspace
 export APP_ROOT=$(pwd)
+export DIST_FOLDER=build
 export INCLUDE_CHROME_CONFIG="true"
 cat /etc/redhat-release
 COMMON_BUILDER=https://raw.githubusercontent.com/RedHatInsights/insights-frontend-builder-common/master

cypress.config.ts

@@ -41,7 +41,9 @@ export default defineConfig({
     // required for the SSO redirect
     chromeWebSecurity: false,
     video: false,
-    setupNodeEvents() {
+    setupNodeEvents(on, config) {
+      require('cypress-localstorage-commands/plugin')(on, config);
+      return config;
       // implement node event listeners here
     },
   },

cypress/support/commands.ts

@@ -42,7 +42,14 @@ Cypress.Commands.add('login', () => {
     () => {
       cy.intercept({ url: '/beta/apps/*', times: 1 }, {});
       cy.intercept({ url: '/api/', times: 4 }, {});
+      // This JS file causes randomly an uncaught exception on login page which blocks the tests
+      // Cannot read properties of undefined (reading 'setAttribute')
+      cy.intercept({ url: 'https://sso.stage.redhat.com/auth/resources/0833r/login/rhd-theme/dist/pfelements/bundle.js' }, {});
       cy.visit('/');
+      // disable analytics integrations
+      cy.setLocalStorage('chrome:analytics:disable', 'true');
+      cy.setLocalStorage('chrome:segment:disable', 'true');
+
       cy.wait(1000);
       // login into the session
       cy.get('#username-verification').type(Cypress.env('E2E_USER'));

cypress/support/e2e.ts

@@ -16,6 +16,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
+import 'cypress-localstorage-commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

package.json

@@ -71,6 +71,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.7.3",
     "cypress": "^12.7.0",
+    "cypress-localstorage-commands": "^2.2.3",
     "eslint": "^8.35.0",
     "fork-ts-checker-webpack-plugin": "^7.3.0",
     "git-revision-webpack-plugin": "^5.0.0",

src/analytics/SegmentProvider.tsx

@@ -236,7 +236,7 @@ const SegmentProvider: React.FC<SegmentProviderProps> = ({ activeModule, childre
         }
         analytics.current = AnalyticsBrowser.load(
           { writeKey: newKey },
-          { initialPageview: false, disableClientPersistence: true, integrations: { All: !isITLessEnv } }
+          { initialPageview: false, disableClientPersistence: true, integrations: { All: !isITLessEnv && !disableIntegrations } }
         );
         window.segment = analytics.current;
         resetIntegrations(analytics.current);

src/components/AllServices/AllServicesIcons.ts

@@ -12,6 +12,7 @@ import InfrastructureIcon from '@patternfly/react-icons/dist/js/icons/infrastruc
 import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
 import ShoppingCartIcon from '@patternfly/react-icons/dist/js/icons/shopping-cart-icon';
 import UsersIcon from '@patternfly/react-icons/dist/js/icons/users-icon';
+import MonitoringIcon from '@patternfly/react-icons/dist/js/icons/monitoring-icon';
 
 const AllServicesIcons = {
   CloudUploadAltIcon,
@@ -28,6 +29,7 @@ const AllServicesIcons = {
   ShoppingCartIcon,
   CubeIcon,
   BoxesIcon,
+  MonitoringIcon,
 };
 
 export default AllServicesIcons;

src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import ReactDOM from 'react-dom';
 import Tools from './Tools';
 import UnAuthtedHeader from './UnAuthtedHeader';
@@ -44,7 +44,11 @@ export const Header = ({ breadcrumbsProps }: { breadcrumbsProps?: Breadcrumbspro
   const isITLessEnv = ITLess();
   const { pathname } = useLocation();
   const noBreadcrumb = !['/', '/allservices', '/favoritedservices'].includes(pathname);
-  const { lg } = useWindowWidth();
+  const { md, lg } = useWindowWidth();
+  const [searchOpen, setSearchOpen] = useState(false);
+  const hideAllServices = (isOpen: boolean) => {
+    setSearchOpen(isOpen);
+  };
 
   return (
     <Fragment>
@@ -73,7 +77,7 @@ export const Header = ({ breadcrumbsProps }: { breadcrumbsProps?: Breadcrumbspro
             <ToolbarGroup variant="filter-group">
               {user && (
                 <ToolbarItem>
-                  <AllServicesDropdown />
+                  {!(!md && searchOpen) && <AllServicesDropdown />}
                   {isITLessEnv && user?.identity?.user?.is_org_admin && <SatelliteLink />}
                 </ToolbarItem>
               )}
@@ -84,7 +88,7 @@ export const Header = ({ breadcrumbsProps }: { breadcrumbsProps?: Breadcrumbspro
               )}
             </ToolbarGroup>
             <ToolbarGroup className="pf-u-flex-grow-1 pf-u-mr-0 pf-u-mr-md-on-2xl" variant="filter-group">
-              <SearchInput />
+              <SearchInput onStateChange={hideAllServices} />
             </ToolbarGroup>
             <ToolbarGroup
               className="pf-m-icon-button-group pf-u-ml-auto"

src/components/Search/SearchInput.scss

@@ -1,33 +1,47 @@
+@import "~@redhat-cloud-services/frontend-components-utilities/styles/_all";
+@import '~@patternfly/patternfly/patternfly-addons.scss';
 .chr-c-search {
-  &__input {
-    .pf-c-text-input-group {
-      --pf-c-text-input-group--BackgroundColor: var(--pf-global--palette--black-700);
-      --pf-c-text-input-group__icon--Color: var(--pf-global--primary-color--light-100);
-      --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--light-300);
-      --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--palette--black-500);
-      --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--palette--black-800);
-      --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--primary-color--light-100);
-      &:hover {
-        --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--light-100);
-        --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--active-color--300);
+    &__input {
+      .pf-c-input-group {
+        background-color: transparent !important;
       }
-      input:focus-visible {
-        outline: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BackgroundColor--dark-100);
+
+      .pf-c-text-input-group {
+        --pf-c-text-input-group--BackgroundColor: var(--pf-global--palette--black-700);
+        --pf-c-text-input-group__icon--Color: var(--pf-global--primary-color--light-100);
+        --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--light-300);
+        --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--palette--black-500);
+        --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--palette--black-800);
+        --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--primary-color--light-100);
+        &:hover {
+          --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--light-100);
+          --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--active-color--300);
+        }
+        input:focus-visible {
+          outline: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BackgroundColor--dark-100);
+        }
       }
     }
-  }
-  &__menu {
-    overflow-y: auto;
-    .pf-c-menu__group-title {
-      padding-bottom: var(--pf-global--spacer--md);
-      &:empty {
-        display: none;
+    &__menu {
+      overflow-y: auto;
+      .pf-c-menu__group-title {
+        padding-bottom: var(--pf-global--spacer--md);
+        &:empty {
+          display: none;
+        }
+      }
+    }
+    &__empty-state {
+      .pf-c-empty-state__icon {
+        font-size: 2rem;
       }
     }
   }
-  &__empty-state {
-    .pf-c-empty-state__icon {
-      font-size: 2rem;
+  @media screen and (max-width: 768px) {
+    .chr-c-search__input .chr-c-search__collapsed {
+      justify-content: flex-end;
+    }
+    .chr-c-search__input input {
+      color: white;
     }
   }
-}