Skip to content

Commit

Permalink
✨ Add app detail to drawer
Browse files Browse the repository at this point in the history
Signed-off-by: ibolton336 <[email protected]>
  • Loading branch information
ibolton336 committed Nov 1, 2023
1 parent 2f8d58f commit f6dc474
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 46 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 @@ -235,6 +235,7 @@
"applicationImports": "Application imports",
"applicationName": "Application name",
"archetypeName": "Archetype name",
"applicationInformation": "Application information",
"applications": "Applications",
"archetype": "Archetype",
"archetypes": "Archetypes",
Expand All @@ -247,6 +248,7 @@
"assessmentSummary": "Assessment summary",
"autoTagging": "Automated Tagging",
"binary": "Binary",
"branch": "Branch",
"binaryArtifact": "Artifact",
"binaryGroup": "Group",
"binaryPackaging": "Packaging",
Expand Down Expand Up @@ -359,6 +361,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 @@ -69,16 +69,6 @@ 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>
}
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 Down Expand Up @@ -38,7 +37,7 @@ export const ApplicationDetailDrawerAssessment: React.FC<
application={application}
task={task}
onCloseClick={onCloseClick}
detailsTabMainContent={
detailTabContent={
<>
<Title headingLevel="h3" size="md">
{t("terms.archetypes")}
Expand Down Expand Up @@ -88,14 +87,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,15 +24,15 @@ 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;
Expand All @@ -52,7 +52,7 @@ export const ApplicationDetailDrawer: React.FC<
onCloseClick,
application,
task,
detailsTabMainContent,
detailTabContent = null,
reportsTabContent = null,
factsTabContent = null,
reviewsTabContent = null,
Expand All @@ -63,7 +63,7 @@ export const ApplicationDetailDrawer: React.FC<
);

const isTaskRunning = task?.state === "Running";

console.log("application", application);
return (
<PageDrawerContent
isExpanded={!!application}
Expand Down Expand Up @@ -112,35 +112,20 @@ 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
: t("terms.unassigned")}
</Text>
</Text>
</TextContent>

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

<Tab eventKey={TabKey.Tags} title={<TabTitleText>Tags</TabTitleText>}>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { Title, TextContent, Text, TextVariants } 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";

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

return (
<>
<TextContent className={spacing.mtLg}>
<Title headingLevel="h3" size="md">
{t("terms.applicationInformation")}
</Title>
</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 f6dc474

Please sign in to comment.