✨ Add app detail to drawer

client/public/locales/en/translation.json

@@ -235,6 +235,7 @@
     "applicationImports": "Application imports",
     "applicationName": "Application name",
     "archetypeName": "Archetype name",
+    "applicationInformation": "Application information",
     "applications": "Applications",
     "archetype": "Archetype",
     "archetypes": "Archetypes",
@@ -247,6 +248,7 @@
     "assessmentSummary": "Assessment summary",
     "autoTagging": "Automated Tagging",
     "binary": "Binary",
+    "branch": "Branch",
     "binaryArtifact": "Artifact",
     "binaryGroup": "Group",
     "binaryPackaging": "Packaging",
@@ -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",

client/src/app/pages/applications/applications-table-analyze/applications-table-analyze.tsx

@@ -770,6 +770,9 @@ export const ApplicationsTableAnalyze: React.FC = () => {
           application={activeItem}
           applications={applications}
           onCloseClick={clearActiveItem}
+          onEditClick={() => {
+            setSaveApplicationModalState(activeItem);
+          }}
           task={activeItem ? getTask(activeItem) : null}
         />
 

client/src/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx

@@ -762,6 +762,7 @@ export const ApplicationsTable: React.FC = () => {
         <ApplicationDetailDrawerAssessment
           application={activeItem}
           onCloseClick={clearActiveItem}
+          onEditClick={() => setSaveApplicationModalState(activeItem)}
           task={activeItem ? getTask(activeItem) : null}
         />
         <Modal

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-analysis.tsx

@@ -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();
@@ -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">

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-assessment.tsx

@@ -8,7 +8,6 @@ import {
   TextContent,
   Text,
   Title,
-  Label,
 } from "@patternfly/react-core";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 
@@ -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")}
@@ -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>
         </>
       }

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx

@@ -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 {
@@ -50,9 +51,10 @@ export const ApplicationDetailDrawer: React.FC<
   IApplicationDetailDrawerProps
 > = ({
   onCloseClick,
+  onEditClick,
   application,
   task,
-  detailsTabMainContent,
+  detailTabContent = null,
   reportsTabContent = null,
   factsTabContent = null,
   reviewsTabContent = null,
@@ -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>}>

client/src/app/pages/applications/components/application-detail-drawer/application-detail-fields.tsx

@@ -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>
+    </>
+  );
+};