feat(theme): retheme UI for Konflux

integration-tests/support/constants/PageTitle.ts

@@ -13,4 +13,4 @@ export enum NavItem {
   secrets = 'Secrets',
 }
 
-export const FULL_APPLICATION_TITLE = 'Red Hat Trusted Application Pipeline';
+export const FULL_APPLICATION_TITLE = 'Konflux';

src/components/ApplicationDetails/ApplicationThumbnail.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import asset1 from '../../imgs/app-thumbnails/Asset 1.svg';
 import asset10 from '../../imgs/app-thumbnails/Asset 10.svg';
+import asset11 from '../../imgs/app-thumbnails/Asset 11.svg';
 import asset2 from '../../imgs/app-thumbnails/Asset 2.svg';
 import asset3 from '../../imgs/app-thumbnails/Asset 3.svg';
 import asset4 from '../../imgs/app-thumbnails/Asset 4.svg';
@@ -11,7 +12,19 @@ import asset8 from '../../imgs/app-thumbnails/Asset 8.svg';
 import asset9 from '../../imgs/app-thumbnails/Asset 9.svg';
 import { ApplicationKind } from '../../types';
 
-const ICONS = [asset1, asset2, asset3, asset4, asset5, asset6, asset7, asset8, asset9, asset10];
+const ICONS = [
+  asset1,
+  asset2,
+  asset3,
+  asset4,
+  asset5,
+  asset6,
+  asset7,
+  asset8,
+  asset9,
+  asset10,
+  asset11,
+];
 
 export const THUMBNAIL_ANNOTATION = 'application.thumbnail';
 

src/components/ApplicationDetails/tabs/__tests__/__snapshots__/useWhatsNextItems.spec.ts.snap

@@ -19,7 +19,45 @@ Array [
     "description": "Grow your application by adding components.",
     "helpId": "stonesoup-whatsnext-add-component",
     "icon": "test-file-stub",
-    "title": "Add a component",
+    "title": "Grow your application",
+  },
+  Object {
+    "cta": Object {
+      "analytics": Object {
+        "app_name": "test-application",
+        "link_location": "whats-next",
+        "link_name": "add-test",
+        "workspace": undefined,
+      },
+      "disabled": false,
+      "disabledTooltip": "You don't have access to add an integration test",
+      "href": "/application-pipeline/workspaces/undefined/applications/test-application/integrationtests/add",
+      "label": "Add a test",
+      "testId": "add-test",
+    },
+    "description": "Integration tests run in parallel, validating each new component build with the latest version of all other components.",
+    "helpLink": "https://redhat-appstudio.github.io/docs.appstudio.io/Documentation/main/how-to-guides/testing_applications/proc_adding_an_integration_test/",
+    "icon": "test-file-stub",
+    "title": "Add integration tests",
+  },
+  Object {
+    "cta": Object {
+      "analytics": Object {
+        "app_name": "test-application",
+        "link_location": "whats-next",
+        "link_name": "add-release-plan",
+        "workspace": undefined,
+      },
+      "disabled": false,
+      "disabledTooltip": "You don't have access to create a release plan",
+      "href": "/application-pipeline/release/workspaces/undefined/release-plan/create",
+      "label": "Create a plan",
+      "testId": "add-release-plan",
+    },
+    "description": "A release object represents deployable snapshot of your application. To release your code, create a release plan with release details.",
+    "helpLink": "https://redhat-appstudio.github.io/docs.appstudio.io/Documentation/main/how-to-guides/con_release_application/",
+    "icon": "test-file-stub",
+    "title": "Create a release plan",
   },
   Object {
     "cta": Object {

src/components/ApplicationDetails/tabs/__tests__/useWhatsNextItems.spec.ts

@@ -26,7 +26,7 @@ describe('useWhatsNextItems', () => {
   it('should return a list of whats next items', () => {
     const applicationName = 'test-application';
     const { result } = renderHook(() => useWhatsNextItems(applicationName));
-    expect(result.current).toHaveLength(4);
+    expect(result.current).toHaveLength(6);
     expect(result.current).toMatchSnapshot();
   });
 
@@ -42,7 +42,7 @@ describe('useWhatsNextItems', () => {
     const showModal = jest.fn();
     (useModalLauncher as jest.Mock).mockReturnValueOnce(showModal);
     const { result } = renderHook(() => useWhatsNextItems(applicationName));
-    result.current[3].cta.onClick();
+    result.current[5].cta.onClick();
     expect(showModal).toHaveBeenCalled();
   });
 });

src/components/ApplicationDetails/tabs/useWhatsNextItems.ts

@@ -1,9 +1,11 @@
 import { useApplicationPipelineGitHubApp } from '../../../hooks/useApplicationPipelineGitHubApp';
-import componentsIcon from '../../../imgs/illustrations/Components.svg';
-import editCodeIcon from '../../../imgs/illustrations/Edit code.svg';
-import githubAppIcon from '../../../imgs/illustrations/Github app.svg';
-import pipelineIcon from '../../../imgs/illustrations/Pipeline.svg';
-import { ComponentModel } from '../../../models';
+import componentsIcon from '../../../imgs/Components.svg';
+import editCodeIcon from '../../../imgs/Edit code.svg';
+import gitAppIcon from '../../../imgs/git-app.svg';
+import integrationTestIcon from '../../../imgs/Integration-test.svg';
+import pipelineIcon from '../../../imgs/Pipeline.svg';
+import releaseIcon from '../../../imgs/Release.svg';
+import { ComponentModel, IntegrationTestScenarioModel, ReleasePlanModel } from '../../../models';
 import { useAccessReviewForModel } from '../../../utils/rbac';
 import { useWorkspaceInfo } from '../../../utils/workspace-context-utils';
 import { createCustomizeAllPipelinesModalLauncher } from '../../CustomizedPipeline/CustomizePipelinesModal';
@@ -15,10 +17,15 @@ export const useWhatsNextItems = (applicationName: string) => {
   const { workspace, namespace } = useWorkspaceInfo();
   const { url: githubAppURL } = useApplicationPipelineGitHubApp();
   const [canCreateComponent] = useAccessReviewForModel(ComponentModel, 'create');
+  const [canCreateIntegrationTest] = useAccessReviewForModel(
+    IntegrationTestScenarioModel,
+    'create',
+  );
+  const [canCreateReleasePlan] = useAccessReviewForModel(ReleasePlanModel, 'create');
 
   const whatsNextItems: WhatsNextItem[] = [
     {
-      title: 'Add a component',
+      title: 'Grow your application',
       description: 'Grow your application by adding components.',
       icon: componentsIcon,
       cta: {
@@ -36,10 +43,52 @@ export const useWhatsNextItems = (applicationName: string) => {
       },
       helpId: 'stonesoup-whatsnext-add-component',
     },
+    {
+      title: 'Add integration tests',
+      description:
+        'Integration tests run in parallel, validating each new component build with the latest version of all other components.',
+      icon: integrationTestIcon,
+      cta: {
+        label: 'Add a test',
+        href: `/application-pipeline/workspaces/${workspace}/applications/${applicationName}/integrationtests/add`,
+        disabled: !canCreateIntegrationTest,
+        disabledTooltip: "You don't have access to add an integration test",
+        testId: 'add-test',
+        analytics: {
+          link_name: 'add-test',
+          link_location: 'whats-next',
+          app_name: applicationName,
+          workspace,
+        },
+      },
+      helpLink:
+        'https://redhat-appstudio.github.io/docs.appstudio.io/Documentation/main/how-to-guides/testing_applications/proc_adding_an_integration_test/',
+    },
+    {
+      title: 'Create a release plan',
+      description:
+        'A release object represents deployable snapshot of your application. To release your code, create a release plan with release details.',
+      icon: releaseIcon,
+      cta: {
+        label: 'Create a plan',
+        href: `/application-pipeline/release/workspaces/${workspace}/release-plan/create`,
+        disabled: !canCreateReleasePlan,
+        disabledTooltip: "You don't have access to create a release plan",
+        testId: 'add-release-plan',
+        analytics: {
+          link_name: 'add-release-plan',
+          link_location: 'whats-next',
+          app_name: applicationName,
+          workspace,
+        },
+      },
+      helpLink:
+        'https://redhat-appstudio.github.io/docs.appstudio.io/Documentation/main/how-to-guides/con_release_application/',
+    },
     {
       title: 'Install our GitHub app',
       description: 'Install the GitHub app to monitor your work from a commit to deployment.',
-      icon: githubAppIcon,
+      icon: gitAppIcon,
       cta: {
         label: 'Start the flow',
         href: githubAppURL,

src/components/NamespacedPage/NamespacedPage.scss

@@ -16,4 +16,28 @@
     flex: 1 1 auto;
     overflow: auto;
   }
+
+  .pf-v5-c-button.pf-m-primary:not(.pf-m-disabled):not(.pf-m-aria-disabled) {
+    background-color: #fc783d;
+
+    &:hover {
+      background-color: #d36634;
+    }
+  }
+
+  .pf-v5-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled):not(.pf-m-aria-disabled) {
+    background-color: #fc783d;
+
+    &:hover {
+      background-color: #d36634;
+    }
+  }
+
+  .pf-v5-c-menu-toggle.pf-m-primary:not(.pf-m-disabled):not(.pf-m-aria-disabled) {
+    background-color: #fc783d;
+
+    &:hover {
+      background-color: #d36634;
+    }
+  }
 }

src/components/NamespacedPage/NamespacedPage.tsx

@@ -14,10 +14,12 @@ import './NamespacedPage.scss';
 
 type NamespacedPageProps = {
   children: React.ReactNode;
+  hideAppBanner?: boolean;
 };
 
 const NamespacedPage: React.FunctionComponent<React.PropsWithChildren<NamespacedPageProps>> = ({
   children,
+  hideAppBanner,
 }) => {
   const { workspacesLoaded } = React.useContext(WorkspaceContext);
 
@@ -42,7 +44,7 @@ const NamespacedPage: React.FunctionComponent<React.PropsWithChildren<Namespaced
   return (
     <ErrorBoundary>
       <ModalProvider>
-        <AppBanner />
+        {!hideAppBanner && <AppBanner />}
         <div className="main-layout-container">{children}</div>
       </ModalProvider>
     </ErrorBoundary>

src/components/NamespacedPage/__tests__/NamespacedPage.spec.tsx

@@ -29,5 +29,17 @@ describe('Application List', () => {
       </NamespacedPage>,
     );
     expect(screen.getByText('Test Component')).toBeInTheDocument();
+    expect(screen.getByText('Private Preview')).toBeInTheDocument();
+  });
+
+  it('should not render app banner if hideAppBanner prop is passed', () => {
+    activeNamepaceMock.mockReturnValue({ namespace: 'test-ns', workspacesLoaded: true });
+    render(
+      <NamespacedPage hideAppBanner>
+        <h1>Test Component</h1>
+      </NamespacedPage>,
+    );
+    expect(screen.queryByText('Private Preview')).not.toBeInTheDocument();
+    expect(screen.getByText('Test Component')).toBeInTheDocument();
   });
 });

src/components/Overview/AboutSection.tsx

@@ -60,15 +60,6 @@ const AboutSection: React.FC<React.PropsWithChildren<unknown>> = () => (
               each pull request introspecting your direct and transitive dependencies.
             </CardBody>
           </Card>
-          <Card isPlain isCompact>
-            <CardTitle>Add some GitOps</CardTitle>
-            <CardBody>
-              Add SDLC environments for your applications, each defined to deploy the application to
-              a Red Hat OpenShift or Kubernetes cluster on your desired cloud platforms via GitOps.
-              You can easily define deployment, scaling, and application settings for each
-              environment.
-            </CardBody>
-          </Card>
           <Card isPlain isCompact>
             <CardTitle>Become Continuous</CardTitle>
             <CardBody>

src/components/Overview/InfoBanner.scss

@@ -0,0 +1,15 @@
+.info-banner {
+  &__circle {
+    width: 80px;
+    height: 80px;
+    border: 1px solid var(--pf-v5-global--Color--dark-100);
+    border-radius: 50%;
+  }
+
+  &__icon {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 80px;
+  }
+}

src/components/Overview/InfoBanner.tsx

@@ -14,6 +14,8 @@ import overviewInfo1 from '../../imgs/overview/overview-info1.svg';
 import overviewInfo2 from '../../imgs/overview/overview-info2.svg';
 import overviewInfo3 from '../../imgs/overview/overview-info3.svg';
 
+import './InfoBanner.scss';
+
 const InfoBanner = () => (
   <Card isLarge>
     <CardBody style={{ paddingLeft: '16px' }}>
@@ -26,12 +28,15 @@ const InfoBanner = () => (
           <Card isPlain isCompact>
             <CardTitle>
               <Bullseye>
-                <img
-                  src={overviewInfo1}
-                  alt="OpenShift and Kubernetes"
-                  width="30px"
-                  height="30px"
-                />
+                <div className="info-banner__circle">
+                  <Bullseye>
+                    <img
+                      src={overviewInfo1}
+                      className="info-banner__icon"
+                      alt="OpenShift and Kubernetes"
+                    />
+                  </Bullseye>
+                </div>
               </Bullseye>
             </CardTitle>
             <CardBody>
@@ -53,7 +58,15 @@ const InfoBanner = () => (
           <Card isPlain isCompact>
             <CardTitle>
               <Bullseye>
-                <img src={overviewInfo2} alt="Secure supply chain" width="30px" height="30px" />
+                <div className="info-banner__circle">
+                  <Bullseye>
+                    <img
+                      src={overviewInfo2}
+                      className="info-banner__icon"
+                      alt="Secure supply chain"
+                    />
+                  </Bullseye>
+                </div>
               </Bullseye>
             </CardTitle>
             <CardBody>
@@ -72,11 +85,17 @@ const InfoBanner = () => (
           <Card isPlain isCompact>
             <CardTitle>
               <Bullseye>
-                <img src={overviewInfo3} alt="Cloud deployment" width="30px" height="30px" />
+                <div className="info-banner__circle">
+                  <Bullseye>
+                    <img src={overviewInfo3} className="info-banner__icon" alt="Cloud deployment" />
+                  </Bullseye>
+                </div>
               </Bullseye>
             </CardTitle>
             <CardBody>
-              <Bullseye>Simplified deployment across multiple clouds</Bullseye>
+              <Bullseye>
+                Execute integration tests for complex applications and see results in your SCM
+              </Bullseye>
             </CardBody>
           </Card>
         </FlexItem>

src/components/Overview/IntroBanner.scss

@@ -1,19 +1,19 @@
 .intro-banner {
+  background: url(/src/imgs/overview/Rectangle.svg);
+  background-size: cover;
+
   &__content {
-    color: var(--pf-v5-global--Color--light-100);
-    background-color: var(--pf-v5-global--BackgroundColor--dark-100);
+    background-color: transparent;
   }
 
   &__image {
     background: url(/src/imgs/overview/overview-banner.svg);
-    background-color: var(--pf-v5-global--BackgroundColor--dark-100);
     background-size: cover;
   }
 
   &__cta {
     margin-top: var(--pf-v5-global--spacer--sm);
     margin-right: var(--pf-v5-global--spacer--md);
-    color: var(--pf-v5-global--Color--light-100);
 
     & + &__cta {
       margin-right: none;

src/components/Overview/IntroBanner.tsx

@@ -54,7 +54,7 @@ const IntroBanner: React.FC<React.PropsWithChildren<unknown>> = () => {
   );
 
   return (
-    <Grid>
+    <Grid className="intro-banner">
       <GridItem span={8}>
         <Card className="intro-banner__content" isLarge>
           <CardTitle>

src/components/Overview/__tests__/InfoBanner.spec.tsx

@@ -10,6 +10,8 @@ describe('Info banner', () => {
       'Start with source code and containerize your applications for OpenShift and Kubernetes',
     );
     screen.getByText("Rapidly improve the security of your application's software supply chain");
-    screen.getByText('Simplified deployment across multiple clouds');
+    screen.getByText(
+      'Execute integration tests for complex applications and see results in your SCM',
+    );
   });
 });