Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐛 Add lists of associated apps & archetypes #1470

Merged
merged 2 commits into from
Oct 12, 2023
Merged

🐛 Add lists of associated apps & archetypes #1470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b80309
:bug: Add lists of associated apps & archetypes
ibolton336 Oct 12, 2023
e91a42f
Merge branch 'main' into associated-archetypes
ibolton336 Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions client/public/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,8 @@
"terms": {
"accepted": "Accepted",
"acceptedAppsAndDeps": "Accepted applications and dependencies",
"associatedApplications": "Associated applications",
"associatedArchetypes": "Associated archetypes",
"add": "Add",
"additionalNotesOrComments": "Additional notes or comments",
"adoptionCandidateDistribution": "Assessment confidence and risk",
Expand Down
29 changes: 28 additions & 1 deletion ...pplications/components/application-detail-drawer/application-detail-drawer-assessment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@ import {
Text,
Title,
Label,
LabelGroup,
} from "@patternfly/react-core";
import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";

import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
import { EFFORT_ESTIMATE_LIST, PROPOSED_ACTION_LIST } from "@app/Constants";
import { Task } from "@app/api/models";
import { Ref, Task } from "@app/api/models";
import { ApplicationRisk } from "./application-risk";
import {
ApplicationDetailDrawer,
Expand Down Expand Up @@ -52,6 +53,18 @@ export const ApplicationDetailDrawerAssessment: React.FC<
default: "14ch",
}}
>
<DescriptionListGroup>
<DescriptionListTerm>{t("terms.archetypes")}</DescriptionListTerm>
<DescriptionListDescription>
{application?.archetypes?.length ?? 0 > 0 ? (
<ArchetypeLabels
archetypeRefs={application?.archetypes as Ref[]}
/>
) : (
<EmptyTextMessage message={t("terms.none")} />
)}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>
{t("terms.proposedAction")}
Expand Down Expand Up @@ -134,3 +147,17 @@ export const ApplicationDetailDrawerAssessment: React.FC<
/>
);
};
const ArchetypeLabels: React.FC<{ archetypeRefs?: Ref[] }> = ({
archetypeRefs,
}) =>
(archetypeRefs?.length ?? 0) === 0 ? null : (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the length wrapper already in the description list, archetypeRefs should be required and this step can be skipped.

...or push the "None" text into this component

<LabelGroup>
{(archetypeRefs as Ref[])
.sort((a, b) => a.name.localeCompare(b.name))
.map((ref) => (
<Label color="grey" key={ref.id}>
{ref.name}
</Label>
))}
</LabelGroup>
);
39 changes: 29 additions & 10 deletions client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import "./archetype-detail-drawer.css";
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";

Expand All @@ -16,12 +17,10 @@ import {
} from "@patternfly/react-core";
import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";

import { Archetype, Tag, TagRef } from "@app/api/models";
import { Archetype, Ref, Tag, TagRef } from "@app/api/models";
import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
import { PageDrawerContent } from "@app/components/PageDrawerContext";
import { useFetchTagCategories } from "@app/queries/tags";

import "./archetype-detail-drawer.css";
import { dedupeArrayOfObjects } from "@app/utils/utils";

export interface IArchetypeDetailDrawerProps {
Expand All @@ -35,12 +34,6 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
}) => {
const { t } = useTranslation();

const { tagCategories } = useFetchTagCategories();
const tags = useMemo(
() => tagCategories.flatMap((tc) => tc.tags).filter(Boolean),
[tagCategories]
);

const manualTags: TagRef[] = useMemo(() => {
const rawManualTags: TagRef[] =
archetype?.tags?.filter((t) => !t?.source) ?? [];
Expand All @@ -52,7 +45,7 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
archetype?.tags?.filter((t) => t?.source === "assessment") ?? [];
return dedupeArrayOfObjects<TagRef>(rawAssessmentTags, "name");
}, [archetype?.tags]);

console.log("archetype", archetype);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extra console.log

return (
<PageDrawerContent
isExpanded={!!archetype}
Expand Down Expand Up @@ -80,6 +73,17 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
</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>
Expand Down Expand Up @@ -164,6 +168,21 @@ const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
);
};

const ApplicationLabels: React.FC<{ applicationRefs?: Ref[] }> = ({
applicationRefs,
}) =>
(applicationRefs?.length ?? 0) === 0 ? null : (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the length wrapper already in the description list, applicationRefs should be required and this step can be skipped.

<LabelGroup>
{(applicationRefs as Ref[])
.sort((a, b) => a.name.localeCompare(b.name))
.map((ref) => (
<Label color="grey" key={ref.id}>
{ref.name}
</Label>
))}
</LabelGroup>
);

const TagLabels: React.FC<{ tags?: Tag[] }> = ({ tags }) =>
(tags?.length ?? 0) === 0 ? null : (
<LabelGroup>
Expand Down
Loading