From 11fc0beb77246e3981552070e9178bfadcb25955 Mon Sep 17 00:00:00 2001 From: Radoslaw Szwajkowski Date: Fri, 31 May 2024 18:21:11 +0200 Subject: [PATCH] Move Analysis Details to full page view Signed-off-by: Radoslaw Szwajkowski --- client/src/app/Paths.ts | 7 +++ client/src/app/Routes.tsx | 9 +++- client/src/app/components/BreadCrumbPath.tsx | 6 ++- client/src/app/components/PageHeader.tsx | 2 +- .../app/components/SimpleDocumentViewer.tsx | 4 +- .../analysis-details/AnalysisDetails.tsx | 50 +++++++++++++++++++ .../applications/analysis-details/index.ts | 1 + .../applications-table/applications-table.tsx | 27 ++++------ 8 files changed, 85 insertions(+), 21 deletions(-) create mode 100644 client/src/app/pages/applications/analysis-details/AnalysisDetails.tsx create mode 100644 client/src/app/pages/applications/analysis-details/index.ts diff --git a/client/src/app/Paths.ts b/client/src/app/Paths.ts index caf4868433..57708283ad 100644 --- a/client/src/app/Paths.ts +++ b/client/src/app/Paths.ts @@ -1,6 +1,8 @@ export const DevPaths = { // Developer perspective applications: "/applications", + applicationsAnalysisDetails: + "/applications/:applicationId/analysis-details/:taskId", applicationsAnalysisTab: "/applications/analysis-tab", applicationsAssessmentTab: "/applications/assessment-tab", applicationsImports: "/applications/application-imports", @@ -86,3 +88,8 @@ export interface ReviewRoute { export interface ImportSummaryRoute { importId: string; } + +export interface AnalysisDetailsRoute { + applicationId: string; + taskId: string; +} diff --git a/client/src/app/Routes.tsx b/client/src/app/Routes.tsx index 65437e9df6..46cf40bd04 100644 --- a/client/src/app/Routes.tsx +++ b/client/src/app/Routes.tsx @@ -24,7 +24,9 @@ const ManageImports = lazy(() => import("./pages/applications/manage-imports")); const ImportDetails = lazy( () => import("./pages/applications/manage-imports-details") ); - +const AnalysisDetails = lazy( + () => import("./pages/applications/analysis-details") +); const Reports = lazy(() => import("./pages/reports")); const Controls = lazy(() => import("./pages/controls")); const Identities = lazy(() => import("./pages/identities")); @@ -74,6 +76,11 @@ export const devRoutes: IRoute[] = [ comp: ImportDetails, exact: false, }, + { + path: Paths.applicationsAnalysisDetails, + comp: AnalysisDetails, + exact: false, + }, { path: Paths.applicationsImports, comp: ManageImports, diff --git a/client/src/app/components/BreadCrumbPath.tsx b/client/src/app/components/BreadCrumbPath.tsx index b4d6f4f3bc..51dc83dc9d 100644 --- a/client/src/app/components/BreadCrumbPath.tsx +++ b/client/src/app/components/BreadCrumbPath.tsx @@ -3,7 +3,7 @@ import { Link } from "react-router-dom"; import { Breadcrumb, BreadcrumbItem, Button } from "@patternfly/react-core"; export interface BreadCrumbPathProps { - breadcrumbs: { title: string; path: string | (() => void) }[]; + breadcrumbs: { title: string; path?: string | (() => void) }[]; } export const BreadCrumbPath: React.FC = ({ @@ -12,6 +12,10 @@ export const BreadCrumbPath: React.FC = ({ return ( {breadcrumbs.map((crumb, i, { length }) => { + if (!crumb.path) { + return {crumb.title}; + } + const isLast = i === length - 1; const link = diff --git a/client/src/app/components/PageHeader.tsx b/client/src/app/components/PageHeader.tsx index 25a12c7680..7382ea54ec 100644 --- a/client/src/app/components/PageHeader.tsx +++ b/client/src/app/components/PageHeader.tsx @@ -13,7 +13,7 @@ import { HorizontalNav } from "./HorizontalNav"; export interface PageHeaderProps { title: string; description?: React.ReactNode; - breadcrumbs: { title: string; path: string | (() => void) }[]; + breadcrumbs: { title: string; path?: string | (() => void) }[]; btnActions?: React.ReactNode; navItems?: { title: string; path: string }[]; } diff --git a/client/src/app/components/SimpleDocumentViewer.tsx b/client/src/app/components/SimpleDocumentViewer.tsx index 91dc6c4a32..a1d52c89b4 100644 --- a/client/src/app/components/SimpleDocumentViewer.tsx +++ b/client/src/app/components/SimpleDocumentViewer.tsx @@ -61,7 +61,7 @@ export const SimpleDocumentViewer = ({ documentId, downloadFilename, language = Language.yaml, - height = "450px", + height, }: ISimpleDocumentViewerProps) => { const editorRef = React.useRef(); const [currentLanguage, setCurrentLanguage] = React.useState(language); @@ -118,7 +118,7 @@ export const SimpleDocumentViewer = ({ isDownloadEnabled isLineNumbersVisible isReadOnly - height={height === "full" ? "100%" : height} + height={height ?? "sizeToFit"} downloadFileName={downloadFilename} language={currentLanguage} code={code} diff --git a/client/src/app/pages/applications/analysis-details/AnalysisDetails.tsx b/client/src/app/pages/applications/analysis-details/AnalysisDetails.tsx new file mode 100644 index 0000000000..d795baec53 --- /dev/null +++ b/client/src/app/pages/applications/analysis-details/AnalysisDetails.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import { useParams } from "react-router-dom"; +import { useTranslation } from "react-i18next"; + +import { PageSection } from "@patternfly/react-core"; + +import { AnalysisDetailsRoute, Paths } from "@app/Paths"; +import { PageHeader } from "@app/components/PageHeader"; +import { formatPath } from "@app/utils/utils"; +import { SimpleDocumentViewer } from "@app/components/SimpleDocumentViewer"; + +export const AnalysisDetails: React.FC = () => { + // i18 + const { t } = useTranslation(); + + // Router + const { applicationId, taskId } = useParams(); + + return ( + <> + + + + + + + + ); +}; diff --git a/client/src/app/pages/applications/analysis-details/index.ts b/client/src/app/pages/applications/analysis-details/index.ts new file mode 100644 index 0000000000..bbd98b98fe --- /dev/null +++ b/client/src/app/pages/applications/analysis-details/index.ts @@ -0,0 +1 @@ +export { AnalysisDetails as default } from "./AnalysisDetails"; diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx index 59eb559a2e..53aac563d5 100644 --- a/client/src/app/pages/applications/applications-table/applications-table.tsx +++ b/client/src/app/pages/applications/applications-table/applications-table.tsx @@ -104,7 +104,6 @@ import { ApplicationDependenciesForm } from "@app/components/ApplicationDependen import { useState } from "react"; import { ApplicationAnalysisStatus } from "../components/application-analysis-status"; import { ApplicationDetailDrawer } from "../components/application-detail-drawer/application-detail-drawer"; -import { SimpleDocumentViewerModal } from "@app/components/SimpleDocumentViewer"; import { AnalysisWizard } from "../analysis-wizard/analysis-wizard"; import { TaskGroupProvider } from "../analysis-wizard/components/TaskGroupContext"; import { ApplicationIdentityForm } from "../components/application-identity-form/application-identity-form"; @@ -553,11 +552,6 @@ export const ApplicationsTable: React.FC = () => { const [isApplicationImportModalOpen, setIsApplicationImportModalOpen] = useState(false); - const [taskToView, setTaskToView] = useState<{ - name: string; - task: number | undefined; - }>(); - const userScopes: string[] = token?.scope.split(" ") || [], importWriteAccess = checkAccess(userScopes, importsWriteScopes), applicationWriteAccess = checkAccess(userScopes, applicationsWriteScopes), @@ -1072,11 +1066,17 @@ export const ApplicationsTable: React.FC = () => { ? [ { title: t("actions.analysisDetails"), - onClick: () => - setTaskToView({ - name: application.name, - task: getTask(application)?.id, - }), + onClick: () => { + history.push( + formatPath( + Paths.applicationsAnalysisDetails, + { + applicationId: application.id, + taskId: getTask(application)?.id, + } + ) + ); + }, }, ] : []), @@ -1153,11 +1153,6 @@ export const ApplicationsTable: React.FC = () => { onClose={() => setSaveApplicationModalState(null)} /> )} - setTaskToView(undefined)} - />