Skip to content

Commit

Permalink
✨ Add app detail to drawer (#1505)
Browse files Browse the repository at this point in the history
  • Loading branch information
ibolton336 authored Nov 2, 2023
1 parent e10fecf commit b66abc1
Show file tree
Hide file tree
Showing 7 changed files with 194 additions and 49 deletions.
3 changes: 3 additions & 0 deletions client/public/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@
"applicationImports": "Application imports",
"applicationName": "Application name",
"archetypeName": "Archetype name",
"applicationInformation": "Application information",
"applications": "Applications",
"archetype": "Archetype",
"archetypes": "Archetypes",
Expand All @@ -248,6 +249,7 @@
"assessmentSummary": "Assessment summary",
"autoTagging": "Automated Tagging",
"binary": "Binary",
"branch": "Branch",
"binaryArtifact": "Artifact",
"binaryGroup": "Group",
"binaryPackaging": "Packaging",
Expand Down Expand Up @@ -360,6 +362,7 @@
"reviewComments": "Review comments",
"risk": "Risk",
"riskFromApplication": "Application risk",
"rootPath": "Root path",
"scheduled": "Scheduled",
"select": "Select",
"settingsAllowApps": "Allow reviewing applications without running an assessment first",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -770,6 +770,9 @@ export const ApplicationsTableAnalyze: React.FC = () => {
application={activeItem}
applications={applications}
onCloseClick={clearActiveItem}
onEditClick={() => {
setSaveApplicationModalState(activeItem);
}}
task={activeItem ? getTask(activeItem) : null}
/>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -791,6 +791,7 @@ export const ApplicationsTable: React.FC = () => {
<ApplicationDetailDrawerAssessment
application={activeItem}
onCloseClick={clearActiveItem}
onEditClick={() => setSaveApplicationModalState(activeItem)}
task={activeItem ? getTask(activeItem) : null}
/>
<Modal
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ import { useSetting } from "@app/queries/settings";
export interface IApplicationDetailDrawerAnalysisProps
extends Pick<
IApplicationDetailDrawerProps,
"application" | "applications" | "onCloseClick"
"application" | "applications" | "onCloseClick" | "onEditClick"
> {
task: Task | undefined | null;
}

export const ApplicationDetailDrawerAnalysis: React.FC<
IApplicationDetailDrawerAnalysisProps
> = ({ application, applications, onCloseClick, task }) => {
> = ({ application, applications, onCloseClick, task, onEditClick }) => {
const { t } = useTranslation();

const { identities } = useFetchIdentities();
Expand All @@ -69,16 +69,7 @@ export const ApplicationDetailDrawerAnalysis: React.FC<
task={task}
application={updatedApplication || null}
onCloseClick={onCloseClick}
detailsTabMainContent={
<TextContent className={spacing.mtLg}>
<Title headingLevel="h3" size="md">
{t("terms.comments")}
</Title>
<Text component="small" cy-data="comments">
{application?.comments || notAvailable}
</Text>
</TextContent>
}
onEditClick={onEditClick}
reportsTabContent={
<TextContent className={spacing.mtMd}>
<Title headingLevel="h3" size="md">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
TextContent,
Text,
Title,
Label,
} from "@patternfly/react-core";
import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";

Expand All @@ -24,21 +23,25 @@ import { RiskLabel } from "@app/components/RiskLabel";
import { LabelsFromItems } from "@app/components/labels-from-items/labels-from-items";

export interface IApplicationDetailDrawerAssessmentProps
extends Pick<IApplicationDetailDrawerProps, "application" | "onCloseClick"> {
extends Pick<
IApplicationDetailDrawerProps,
"application" | "onCloseClick" | "onEditClick"
> {
task: Task | undefined | null;
}

export const ApplicationDetailDrawerAssessment: React.FC<
IApplicationDetailDrawerAssessmentProps
> = ({ application, onCloseClick, task }) => {
> = ({ application, onCloseClick, task, onEditClick }) => {
const { t } = useTranslation();

return (
<ApplicationDetailDrawer
application={application}
task={task}
onCloseClick={onCloseClick}
detailsTabMainContent={
onEditClick={onEditClick}
detailTabContent={
<>
<Title headingLevel="h3" size="md">
{t("terms.archetypes")}
Expand Down Expand Up @@ -88,14 +91,6 @@ export const ApplicationDetailDrawerAssessment: React.FC<
<Text component="small" cy-data="comments">
<RiskLabel risk={application?.risk || "unknown"} />
</Text>
<Title headingLevel="h3" size="md">
{t("terms.commentsFromApplication")}
</Title>
<Text component="small" cy-data="comments">
{application?.comments || (
<EmptyTextMessage message={t("terms.notAvailable")} />
)}
</Text>
</TextContent>
</>
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,19 @@ import {
getDependenciesUrlFilteredByAppName,
getIssuesSingleAppSelectedLocation,
} from "@app/pages/issues/helpers";
import { ApplicationBusinessService } from "../application-business-service";
import { ApplicationTags } from "../application-tags";
import { ApplicationDetailFields } from "./application-detail-fields";

export interface IApplicationDetailDrawerProps
extends Pick<IPageDrawerContentProps, "onCloseClick"> {
application: Application | null;
task: Task | undefined | null;
applications?: Application[];
detailsTabMainContent: React.ReactNode;
detailTabContent?: React.ReactNode;
reportsTabContent?: React.ReactNode;
factsTabContent?: React.ReactNode;
reviewsTabContent?: React.ReactNode;
onEditClick: () => void;
}

enum TabKey {
Expand All @@ -50,9 +51,10 @@ export const ApplicationDetailDrawer: React.FC<
IApplicationDetailDrawerProps
> = ({
onCloseClick,
onEditClick,
application,
task,
detailsTabMainContent,
detailTabContent = null,
reportsTabContent = null,
factsTabContent = null,
reviewsTabContent = null,
Expand Down Expand Up @@ -112,35 +114,24 @@ export const ApplicationDetailDrawer: React.FC<
</>
) : null}
</List>
<Title headingLevel="h3" size="md">
{t("terms.businessService")}
</Title>
<Text component="small">
{application?.businessService ? (
<ApplicationBusinessService
id={application.businessService.id}
/>
) : (
t("terms.unassigned")
)}
</Text>
<Title headingLevel="h3" size="md">
{t("terms.migrationWave")}
</Title>
<Text component="small">
{application?.migrationWave
? application.migrationWave.name
: t("terms.unassigned")}
</Text>
<Title headingLevel="h3" size="md">
{t("terms.effort")}
</Title>
<Text component="small">
{application?.effort ?? t("terms.unassigned")}
<Text component="small">
{application?.effort !== 0 && application?.effort !== undefined
? application?.effort
: t("terms.unassigned")}
</Text>
</Text>
</TextContent>

{detailsTabMainContent}
{detailTabContent}
<ApplicationDetailFields
application={application}
onEditClick={onEditClick}
onCloseClick={onCloseClick}
/>
</Tab>

<Tab eventKey={TabKey.Tags} title={<TabTitleText>Tags</TabTitleText>}>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
import React from "react";
import { useTranslation } from "react-i18next";
import {
Title,
TextContent,
Text,
TextVariants,
Button,
Grid,
GridItem,
} from "@patternfly/react-core";
import { Application } from "@app/api/models";
import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
import { ApplicationBusinessService } from "../application-business-service";
import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
import { EditIcon } from "@patternfly/react-icons";

export const ApplicationDetailFields: React.FC<{
application: Application | null;
onEditClick: () => void;
onCloseClick: () => void;
}> = ({ application, onEditClick, onCloseClick }) => {
const { t } = useTranslation();

return (
<>
<TextContent className={spacing.mtLg}>
<Grid>
<GridItem span={6}>
<Title headingLevel="h3" size="md">
{t("terms.applicationInformation")}
</Title>
</GridItem>
<GridItem span={1}>
<Button
style={{ paddingTop: "0px", paddingBottom: "0px" }}
variant="link"
aria-label="Edit"
onClick={() => {
onEditClick();
onCloseClick();
}}
icon={<EditIcon />}
/>
</GridItem>
</Grid>
</TextContent>
<Title headingLevel="h3" size="md">
{t("terms.owner")}
</Title>
<Text
component={TextVariants.small}
className="pf-v5-u-color-200 pf-v5-u-font-weight-light"
>
{application?.owner ?? t("terms.notAvailable")}
</Text>
<Title headingLevel="h3" size="md">
{t("terms.contributors")}
</Title>
<Text
component={TextVariants.small}
className="pf-v5-u-color-200 pf-v5-u-font-weight-light"
>
{application?.contributors?.length
? application.contributors
.map((contributor) => contributor.name)
.join(", ")
: t("terms.notAvailable")}
</Text>
<Title headingLevel="h3" size="md">
{t("terms.sourceCode")}
</Title>
<Text
component={TextVariants.small}
className="pf-v5-u-color-200 pf-v5-u-font-weight-light"
>
{t("terms.repositoryType")}
{": "}
</Text>
<Text
component={TextVariants.small}
className="pf-v5-u-color-200 pf-v5-u-font-weight-light"
>
{application?.repository?.kind}
</Text>
<br />
<Text
component={TextVariants.small}
className="pf-v5-u-color-200 pf-v5-u-font-weight-light"
>
<a href={application?.repository?.url} target="_">
{application?.repository?.url}
</a>
</Text>
<br />
<Text
component={TextVariants.small}
className="pf-v5-u-color-200 pf-v5-u-font-weight-light"
>
{t("terms.branch")}
{": "}
</Text>
<Text
component={TextVariants.small}
className="pf-v5-u-color-200 pf-v5-u-font-weight-light"
>
{application?.repository?.branch}
</Text>
<br />
<Text
component={TextVariants.small}
className="pf-v5-u-color-200 pf-v5-u-font-weight-light"
>
{t("terms.rootPath")}
{": "}
</Text>
<Text
component={TextVariants.small}
className="pf-v5-u-color-200 pf-v5-u-font-weight-light"
>
{application?.repository?.path}
</Text>
<br />
<Title headingLevel="h3" size="md">
{t("terms.binary")}
</Title>
<Text
component={TextVariants.small}
className="pf-v5-u-color-200 pf-v5-u-font-weight-light"
>
{application?.binary}
</Text>
<Title headingLevel="h3" size="md">
{t("terms.businessService")}
</Title>
<Text component="small">
{application?.businessService ? (
<ApplicationBusinessService id={application.businessService.id} />
) : (
t("terms.unassigned")
)}
</Text>
<Title headingLevel="h3" size="md">
{t("terms.migrationWave")}
</Title>
<Text component="small">
{application?.migrationWave
? application.migrationWave.name
: t("terms.unassigned")}
</Text>
<Title headingLevel="h3" size="md">
{t("terms.commentsFromApplication")}
</Title>
<Text component="small" cy-data="comments">
{application?.comments || (
<EmptyTextMessage message={t("terms.notAvailable")} />
)}
</Text>
</>
);
};

0 comments on commit b66abc1

Please sign in to comment.