Skip to content

Commit

Permalink
✨ Add review fields to archetype drawer (#1499)
Browse files Browse the repository at this point in the history 
https://issues.redhat.com/browse/MTA-1326

---------

Signed-off-by: ibolton336 <ibolton@redhat.com>
  • Loading branch information
@ibolton336
ibolton336 committed Nov 2, 2023
1 parent 82f8b7b commit 9eb3dbd
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 104 deletions.
34 changes: 24 additions & 10 deletions client/src/app/pages/applications/components/application-detail-drawer/review-fields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
Title,
TextContent,
} from "@patternfly/react-core";
import { Application, Review } from "@app/api/models";
import { Application, Archetype, Review } from "@app/api/models";
import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
import { useFetchReviewById, useFetchReviews } from "@app/queries/reviews";
import { useFetchArchetypes } from "@app/queries/archetypes";
Expand All @@ -21,14 +21,16 @@ export type ReviewDrawerLabelItem = {
isArchetype?: boolean;
};

export const ReviewFields: React.FC<{ application: Application | null }> = ({
application,
}) => {
export const ReviewFields: React.FC<{
application?: Application | null;
archetype?: Archetype | null;
}> = ({ application, archetype }) => {
const { archetypes } = useFetchArchetypes();
const { reviews } = useFetchReviews();
const { t } = useTranslation();

const { review: appReview } = useFetchReviewById(application?.review?.id);
const { review: archetypeReview } = useFetchReviewById(archetype?.review?.id);

const notYetReviewed = (
<EmptyTextMessage message={t("terms.notYetReviewed")} />
Expand All @@ -47,11 +49,24 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({
.filter(Boolean);

const groupedReviewList: ReviewDrawerLabelItem[] = [
{
review: appReview,
name: appReview?.application?.name,
isArchetype: false,
},
...(archetypeReview
? [
{
review: archetypeReview,
name: archetypeReview?.archetype?.name,
isArchetype: true,
},
]
: []),
...(appReview
? [
{
review: appReview,
name: appReview?.application?.name,
isArchetype: false,
},
]
: []),
...matchedArchetypeReviews.map((archetypeReview) => ({
review: archetypeReview,
name: archetypeReview?.archetype?.name,
Expand Down Expand Up @@ -134,7 +149,6 @@ export const ReviewFields: React.FC<{ application: Application | null }> = ({
{groupedReviewList.length === 0
? notYetReviewed
: groupedReviewList.map((item, index) => {
const labelText = item?.review?.comments;
return (
<ReviewLabel
key={index}
Expand Down
1 change: 1 addition & 0 deletions client/src/app/pages/archetypes/components/archetype-detail-drawer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@
--pf-v5-c-description-list__description--FontSize: var(
--pf-v5-global--FontSize--md
);
margin-top: 1.4em;
}
233 changes: 139 additions & 94 deletions client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import {
DescriptionListDescription,
Stack,
StackItem,
Tabs,
Tab,
TabTitleText,
} from "@patternfly/react-core";
import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";

Expand All @@ -21,12 +24,18 @@ import { PageDrawerContent } from "@app/components/PageDrawerContext";

import { dedupeArrayOfObjects } from "@app/utils/utils";
import { LabelsFromItems } from "@app/components/labels-from-items/labels-from-items";
import { ReviewFields } from "@app/pages/applications/components/application-detail-drawer/review-fields";

export interface IArchetypeDetailDrawerProps {
onCloseClick: () => void;
archetype: Archetype | null;
}

enum TabKey {
Details = 0,
Reviews,
}

const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
onCloseClick,
archetype,
Expand All @@ -44,7 +53,11 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
archetype?.tags?.filter((t) => t?.source === "assessment") ?? [];
return dedupeArrayOfObjects<TagRef>(rawAssessmentTags, "name");
}, [archetype?.tags]);
console.log("archetype", archetype);

const [activeTabKey, setActiveTabKey] = React.useState<TabKey>(
TabKey.Details
);

return (
<PageDrawerContent
isExpanded={!!archetype}
Expand All @@ -62,105 +75,137 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
</TextContent>
}
>
<DescriptionList className="archetype-detail-drawer-list">
<DescriptionListGroup>
<DescriptionListTerm>{t("terms.description")}</DescriptionListTerm>
<DescriptionListDescription>
{archetype?.description || (
<EmptyTextMessage message={t("terms.notAvailable")} />
)}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>{t("terms.applications")}</DescriptionListTerm>
<DescriptionListDescription>
{archetype?.applications?.length ?? 0 > 0 ? (
<ApplicationLabels applicationRefs={archetype?.applications} />
) : (
<EmptyTextMessage message={t("terms.none")} />
)}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>{t("terms.tagsCriteria")}</DescriptionListTerm>
<DescriptionListDescription>
{archetype?.criteria?.length ?? 0 > 0 ? (
<TagLabels tags={archetype?.criteria} />
) : (
<EmptyTextMessage message={t("terms.none")} />
)}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>{t("terms.tagsArchetype")}</DescriptionListTerm>
<DescriptionListDescription>
{manualTags.length > 0 ? (
<TagLabels tags={manualTags} />
) : (
<EmptyTextMessage message={t("terms.none")} />
)}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>{t("terms.tagsAssessment")}</DescriptionListTerm>
<DescriptionListDescription>
{assessmentTags.length > 0 ? (
<TagLabels tags={assessmentTags} />
) : (
<EmptyTextMessage message={t("terms.none")} />
)}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>{t("terms.maintainers")}</DescriptionListTerm>
<DescriptionListDescription>
<Stack>
<StackItem>
<TextContent>
<Text>{t("terms.stakeholder(s)")}</Text>
</TextContent>
</StackItem>
<StackItem>
{archetype?.stakeholders?.length ?? 0 > 0 ? (
<StakeholderLabels archetype={archetype as Archetype} />
<Tabs
activeKey={activeTabKey}
onSelect={(_event, tabKey) => setActiveTabKey(tabKey as TabKey)}
>
<Tab
eventKey={TabKey.Details}
title={<TabTitleText>{t("terms.details")}</TabTitleText>}
>
<DescriptionList className="archetype-detail-drawer-list">
<DescriptionListGroup>
<DescriptionListTerm>
{t("terms.description")}
</DescriptionListTerm>
<DescriptionListDescription>
{archetype?.description || (
<EmptyTextMessage message={t("terms.notAvailable")} />
)}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>
{t("terms.applications")}
</DescriptionListTerm>
<DescriptionListDescription>
{archetype?.applications?.length ?? 0 > 0 ? (
<ApplicationLabels
applicationRefs={archetype?.applications}
/>
) : (
<EmptyTextMessage message={t("terms.none")} />
)}
</StackItem>
</Stack>
</DescriptionListDescription>
<DescriptionListDescription>
<Stack>
<StackItem>
<TextContent>
<Text>{t("terms.stakeholderGroup(s)")}</Text>
</TextContent>
</StackItem>
<StackItem>
{archetype?.stakeholderGroups?.length ?? 0 > 0 ? (
<StakeholderGroupsLabels archetype={archetype as Archetype} />
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>
{t("terms.tagsCriteria")}
</DescriptionListTerm>
<DescriptionListDescription>
{archetype?.criteria?.length ?? 0 > 0 ? (
<TagLabels tags={archetype?.criteria} />
) : (
<EmptyTextMessage message={t("terms.none")} />
)}
</StackItem>
</Stack>
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>{t("terms.comments")}</DescriptionListTerm>
<DescriptionListDescription>
{archetype?.comments || (
<EmptyTextMessage message={t("terms.notAvailable")} />
)}
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>
{t("terms.tagsArchetype")}
</DescriptionListTerm>
<DescriptionListDescription>
{manualTags.length > 0 ? (
<TagLabels tags={manualTags} />
) : (
<EmptyTextMessage message={t("terms.none")} />
)}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>
{t("terms.tagsAssessment")}
</DescriptionListTerm>
<DescriptionListDescription>
{assessmentTags.length > 0 ? (
<TagLabels tags={assessmentTags} />
) : (
<EmptyTextMessage message={t("terms.none")} />
)}
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>
{t("terms.maintainers")}
</DescriptionListTerm>
<DescriptionListDescription>
<Stack>
<StackItem>
<TextContent>
<Text>{t("terms.stakeholder(s)")}</Text>
</TextContent>
</StackItem>
<StackItem>
{archetype?.stakeholders?.length ?? 0 > 0 ? (
<StakeholderLabels archetype={archetype as Archetype} />
) : (
<EmptyTextMessage message={t("terms.none")} />
)}
</StackItem>
</Stack>
</DescriptionListDescription>
<DescriptionListDescription>
<Stack>
<StackItem>
<TextContent>
<Text>{t("terms.stakeholderGroup(s)")}</Text>
</TextContent>
</StackItem>
<StackItem>
{archetype?.stakeholderGroups?.length ?? 0 > 0 ? (
<StakeholderGroupsLabels
archetype={archetype as Archetype}
/>
) : (
<EmptyTextMessage message={t("terms.none")} />
)}
</StackItem>
</Stack>
</DescriptionListDescription>
</DescriptionListGroup>

<DescriptionListGroup>
<DescriptionListTerm>{t("terms.comments")}</DescriptionListTerm>
<DescriptionListDescription>
{archetype?.comments || (
<EmptyTextMessage message={t("terms.notAvailable")} />
)}
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</Tab>
<Tab
eventKey={TabKey.Reviews}
title={<TabTitleText>{t("terms.review")}</TabTitleText>}
>
<ReviewFields archetype={archetype} />
</Tab>
</Tabs>

{/* TODO: action buttons -- primary: "Close", link: "Edit archetype" */}
</PageDrawerContent>
Expand Down

0 comments on commit 9eb3dbd

Please sign in to comment.