fix(report-portal): Fixed search for projects page

plugins/report-portal/README.md

@@ -72,6 +72,9 @@ It is only meant for local development, and the setup for it can be found inside
 
   ```yaml
   reportPortal:
+    # Contact email for support
+    supportEmail: ${REPORT_PORTAL_SUPPORT_MAIL}
+
     # under integrations you can configure-
     # multiple instances of report portal
     integrations:

plugins/report-portal/app-config.janus-idp.yaml

@@ -7,6 +7,7 @@ dynamicPlugins:
       mountPoints: []
       routeBindings: []
 reportPortal:
+  supportEmail: ${REPORT_PORTAL_SUPPORT_MAIL}
   integrations:
     - host: ${REPORT_PORTAL_HOST}
       filterType: ${REPORT_PORTAL_FILTER_TYPE}

plugins/report-portal/config.d.ts

@@ -3,6 +3,11 @@ export interface Config {
    * Configuration values for Report Portal plugin
    */
   reportPortal: {
+    /**
+     * Email to connect for adding more instances
+     * @visibility frontend
+     */
+    supportEmail: string;
     integrations: Array<{
       /**
        * Host of report portal url

plugins/report-portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appdev-platform/backstage-plugin-report-portal",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",

plugins/report-portal/src/components/LaunchesPage/LaunchesPage.tsx

@@ -5,37 +5,47 @@ import {
   Content,
   Header,
   HeaderIconLinkRow,
+  IconLinkVertical,
   Link,
   Page,
   useQueryParamState,
 } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
+import { Button, makeStyles } from '@material-ui/core';
 import AssessmentIcon from '@material-ui/icons/Assessment';
+import Launch from '@material-ui/icons/Launch';
 
 import { projectsRouteRef, rootRouteRef } from '../../routes';
 import { LaunchesPageContent } from './LaunchesPageContent/LaunchesPageContent';
 
-export const LaunchesPage = () => {
+const useStyles = makeStyles(theme => ({
+  'prj-button': {
+    color: '#fff',
+    backdropFilter: 'blur(10px)',
+    marginTop: theme.spacing(4),
+    alignItems: 'initial',
+    textTransform: 'none',
+    fontSize: '1rem',
+  },
+}));
+
+export const LaunchesPage = (props: { themeId?: string }) => {
   const rootPage = useRouteRef(rootRouteRef);
   const projectsPage = useRouteRef(projectsRouteRef);
   const hostName = useQueryParamState('host')[0] as string;
   const projectName = useQueryParamState('project')[0] as string;
+  const classes = useStyles();
 
   return (
-    <Page themeId="app">
+    <Page themeId={props.themeId ?? 'app'}>
       <Header
         pageTitleOverride="Launches"
         title={
           <>
-            <Breadcrumbs>
-              <Link color="inherit" to={rootPage()}>
-                report-portal
-              </Link>
-              <Link
-                color="inherit"
-                to={projectsPage().concat(`?host=${hostName}`)}
-              >
+            <Breadcrumbs style={{ color: '#fff', marginBottom: '8px' }}>
+              <Link to={rootPage()}>Report Portal</Link>
+              <Link to={projectsPage().concat(`?host=${hostName}`)}>
                 {hostName}
               </Link>
               {projectName}
@@ -44,16 +54,15 @@ export const LaunchesPage = () => {
           </>
         }
       >
-        <HeaderIconLinkRow
-          links={[
-            {
-              label: 'Project Detials',
-              href: `https://${hostName}/ui/#${projectName}`,
-              title: 'Project Detials',
-              icon: <AssessmentIcon />,
-            },
-          ]}
-        />
+        <Button
+          endIcon={<Launch />}
+          variant="text"
+          href={`https://${hostName}/ui/#${projectName}`}
+          target="_blank"
+          className={classes['prj-button']}
+        >
+          Project Details
+        </Button>
       </Header>
       <Content>
         <LaunchesPageContent host={hostName} project={projectName} />

plugins/report-portal/src/components/LaunchesPage/LaunchesPageContent/LaunchesPageContent.tsx

@@ -169,15 +169,15 @@ export const LaunchesPageContent = (props: {
   if (error) return <ErrorPanel error={error} />;
   return (
     <Table
-      title="Launches"
       options={{
         pageSizeOptions: [5, 10, 20],
-        sorting: false,
+        sorting: true,
         pageSize: tableData.page.size,
         searchFieldVariant: 'outlined',
         padding: 'dense',
         paginationPosition: 'both',
       }}
+      title="Latest Launches"
       columns={columns}
       data={tableData?.launches ?? []}
       page={tableData?.page.number - 1}

plugins/report-portal/src/components/ProjectsPage/ProjectsPage.tsx

@@ -6,45 +6,61 @@ import {
   Content,
   Header,
   HeaderIconLinkRow,
+  HeaderLabel,
+  IconLinkVertical,
+  LinkButton,
   Page,
   useQueryParamState,
 } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
+import { Box, Button, createStyles, makeStyles } from '@material-ui/core';
 import Assessment from '@material-ui/icons/Assessment';
+import Launch from '@material-ui/icons/Launch';
 
 import { rootRouteRef } from '../../routes';
 import { ProjectsPageContent } from './ProjectsPageContent/ProjectsPageContent';
 
-export const ProjectsPage = () => {
+const useStyles = makeStyles(theme => ({
+  'rp-button': {
+    color: '#fff',
+    backdropFilter: 'blur(10px)',
+    marginTop: theme.spacing(4),
+    alignItems: 'initial',
+    textTransform: 'none',
+    fontSize: '1rem',
+  },
+}));
+
+export const ProjectsPage = (props: { themeId?: string }) => {
   const rootPage = useRouteRef(rootRouteRef);
   const hostName = useQueryParamState('host')[0] as string;
 
+  const classes = useStyles();
+
   return (
-    <Page themeId="app">
+    <Page themeId={props.themeId ?? 'app'}>
       <Header
         pageTitleOverride="Projects"
         title={
           <>
-            <Breadcrumbs>
-              <Link color="inherit" to={rootPage()}>
-                report-portal
-              </Link>
+            <Breadcrumbs style={{ color: '#fff', marginBottom: '8px' }}>
+              <Link to={rootPage()}>Report Portal</Link>
+              {hostName}
             </Breadcrumbs>
             <div>{hostName}</div>
           </>
         }
       >
-        <HeaderIconLinkRow
-          links={[
-            {
-              label: 'Report Portal',
-              href: `https://${hostName}/`,
-              title: 'Report Portal',
-              icon: <Assessment />,
-            },
-          ]}
-        />
+        <Button
+          endIcon={<Launch />}
+          variant="text"
+          href={`https://${hostName}`}
+          target="_blank"
+          className={classes['rp-button']}
+        >
+          Report Portal
+        </Button>
       </Header>
       <Content>
         <ProjectsPageContent host={hostName} />

plugins/report-portal/src/components/ProjectsPage/ProjectsPageContent/ProjectsPageContent.tsx

@@ -86,8 +86,9 @@ export const ProjectsPageContent = (props: { host: string }) => {
 
   const columns: TableColumn<ProjectDetails>[] = [
     {
+      id: 0,
       title: 'Project',
-      field: 'name',
+      field: 'projectName',
       render: row => (
         <Link
           to={`${launchPageRoute()}?host=${host}&project=${row.projectName}`}
@@ -96,13 +97,16 @@ export const ProjectsPageContent = (props: { host: string }) => {
         </Link>
       ),
       width: '60%',
+      searchable: true,
     },
     {
+      id: 1,
       title: 'Launches',
       width: '30%',
       render: row => <UniqueLaunches host={host} projectId={row.projectName} />,
     },
     {
+      id: 2,
       title: 'Actions',
       align: 'center',
       render: row => (
@@ -135,18 +139,19 @@ export const ProjectsPageContent = (props: { host: string }) => {
 
   return (
     <Table
-      isLoading={loading}
       options={{
         padding: 'dense',
         pageSize: tableData.page.size,
         paginationPosition: 'both',
+        searchFieldVariant: 'outlined',
       }}
       title="Projects"
       columns={columns}
       data={tableData.content}
+      page={tableData.page.number - 1}
       totalCount={tableData.page.totalElements}
       onPageChange={handlePageChange}
-      page={tableData.page.number - 1}
+      isLoading={loading}
     />
   );
 };

plugins/report-portal/src/components/ReportPortalGlobalPage/GlobalPageContent/GlobalPageContent.tsx

@@ -103,7 +103,7 @@ export const GlobalPageContent = () => {
     <Table
       title="Instances"
       columns={columns}
-      options={{ padding: 'dense' }}
+      options={{ padding: 'dense', searchFieldVariant: 'outlined' }}
       data={instanceData}
     />
   );

plugins/report-portal/src/components/ReportPortalGlobalPage/ReportPortalGlobalPage.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
 import { Content, PageWithHeader } from '@backstage/core-components';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
 
-import { Grid } from '@material-ui/core';
+import { Button, Grid } from '@material-ui/core';
 
 import { GlobalPageContent } from './GlobalPageContent';
 
@@ -13,14 +14,46 @@ export type ReportPortalGlobalPageProps = {
 };
 
 export const ReportPortalGlobalPage = (props: ReportPortalGlobalPageProps) => {
+  const config = useApi(configApiRef);
+  const sendAddress = config.getString('reportPortal.supportEmail');
+  const subject = 'Request to add a report portal instance';
+  const body = `Requesting to add a new Report Portal instance to Red Hat Experience Platform.
+
+Hostname:
+Instance Project Manager:
+Instance Admin email:`;
   return (
     <PageWithHeader
       themeId={props.theme ?? 'app'}
       subtitle={props.subtitle ?? 'View all report portals'}
       title={props.title ?? 'Report Portal'}
     >
       <Content>
-        <Grid container wrap="nowrap">
+        <Grid container>
+          <Grid
+            xs={12}
+            item
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'right',
+            }}
+          >
+            Don't see your instance here? &nbsp;
+            <Button
+              style={{ textTransform: 'none', padding: '5px 10px' }}
+              color="primary"
+              variant="outlined"
+              target="_blank"
+              href={`https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=${encodeURIComponent(
+                sendAddress,
+              )}&su=${encodeURIComponent(subject)}&body=${encodeURIComponent(
+                body,
+              )}`}
+            >
+              Request to add
+            </Button>
+          </Grid>
           <Grid xs={12} item>
             <GlobalPageContent />
           </Grid>

plugins/report-portal/src/components/Router.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
+import { Content, PageWithHeader } from '@backstage/core-components';
+
 import { launchRouteRef, projectsRouteRef } from '../routes';
 import { LaunchesPage } from './LaunchesPage';
 import { ProjectsPage } from './ProjectsPage';
@@ -13,8 +15,14 @@ export const Router = (props: ReportPortalGlobalPageProps) => {
   return (
     <Routes>
       <Route path="/*" element={<ReportPortalGlobalPage {...props} />} />
-      <Route path={projectsRouteRef.path} element={<ProjectsPage />} />
-      <Route path={launchRouteRef.path} element={<LaunchesPage />} />
+      <Route
+        path={projectsRouteRef.path}
+        element={<ProjectsPage themeId={props.theme} />}
+      />
+      <Route
+        path={launchRouteRef.path}
+        element={<LaunchesPage themeId={props.theme} />}
+      />
     </Routes>
   );
 };