✨ Add facts modal/code viewer & detail drawer tab

client/src/app/api/models.ts

@@ -652,3 +652,10 @@ export interface WaveWithStatus extends MigrationWave {
   fullApplications: Application[];
   allStakeholders: StakeholderWithRole[];
 }
+export type UnstructuredFact = any;
+
+export type Fact = {
+  name: string;
+  //TODO: Address this when moving to structured facts api
+  data: any;
+};

client/src/app/api/rest.ts

@@ -44,6 +44,8 @@ import {
   Ref,
   TrackerProject,
   TrackerProjectIssuetype,
+  Fact,
+  UnstructuredFact,
 } from "./models";
 import { QueryKey } from "@tanstack/react-query";
 import { serializeRequestParamsForHub } from "@app/shared/hooks/table-controls";
@@ -77,6 +79,7 @@ export const TRACKERS = HUB + "/trackers";
 export const TRACKER_PROJECTS = "projects";
 export const TRACKER_PROJECT_ISSUETYPES = "issuetypes";
 export const TICKETS = HUB + "/tickets";
+export const FACTS = HUB + "/facts";
 
 export const RULESETS = HUB + "/rulesets";
 export const FILES = HUB + "/files";
@@ -697,3 +700,13 @@ export const createTagCategory = (
 
 export const updateTagCategory = (obj: TagCategory): Promise<TagCategory> =>
   axios.put(`${TAG_CATEGORIES}/${obj.id}`, obj);
+
+// Facts
+
+export const getFacts = (
+  id: number | string | undefined
+): Promise<UnstructuredFact> =>
+  //TODO: Address this when moving to structured facts api
+  id
+    ? axios.get(`${APPLICATIONS}/${id}/facts`).then((response) => response.data)
+    : Promise.reject();

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

@@ -13,14 +13,16 @@ import {
   ExclamationCircleIcon,
 } from "@patternfly/react-icons";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
-import { Identity, Task } from "@app/api/models";
+import { Fact, Identity, Task } from "@app/api/models";
 import { getKindIDByRef } from "@app/utils/model-utils";
 import { useFetchIdentities } from "@app/queries/identities";
 import {
   ApplicationDetailDrawer,
   IApplicationDetailDrawerProps,
 } from "./application-detail-drawer";
 import { EmptyTextMessage } from "@app/shared/components";
+import { useFetchFacts } from "@app/queries/facts";
+import { ApplicationFacts } from "./application-facts";
 
 export interface IApplicationDetailDrawerAnalysisProps
   extends Pick<
@@ -36,6 +38,7 @@ export const ApplicationDetailDrawerAnalysis: React.FC<
   const { t } = useTranslation();
 
   const { identities } = useFetchIdentities();
+  const { facts, isFetching } = useFetchFacts(application?.id);
 
   let matchingSourceCredsRef: Identity | undefined;
   let matchingMavenCredsRef: Identity | undefined;
@@ -137,6 +140,7 @@ export const ApplicationDetailDrawerAnalysis: React.FC<
           )}
         </TextContent>
       }
+      factsTabContent={!isFetching && <ApplicationFacts facts={facts} />}
     />
   );
 };

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

@@ -25,12 +25,14 @@ export interface IApplicationDetailDrawerProps
   applications?: Application[];
   detailsTabMainContent: React.ReactNode;
   reportsTabContent?: React.ReactNode;
+  factsTabContent?: React.ReactNode;
 }
 
 enum TabKey {
   Details = 0,
   Tags,
   Reports,
+  Facts,
 }
 
 export const ApplicationDetailDrawer: React.FC<
@@ -41,6 +43,7 @@ export const ApplicationDetailDrawer: React.FC<
   task,
   detailsTabMainContent,
   reportsTabContent = null,
+  factsTabContent = null,
 }) => {
   const [activeTabKey, setActiveTabKey] = React.useState<TabKey>(
     TabKey.Details
@@ -108,6 +111,14 @@ export const ApplicationDetailDrawer: React.FC<
             )}
           </Tab>
         )}
+        {factsTabContent && (
+          <Tab
+            eventKey={TabKey.Facts}
+            title={<TabTitleText>Facts</TabTitleText>}
+          >
+            {factsTabContent}
+          </Tab>
+        )}
       </Tabs>
     </PageDrawerContent>
   );

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

@@ -0,0 +1,98 @@
+import {
+  FilterCategory,
+  FilterToolbar,
+  FilterType,
+} from "@app/shared/components/FilterToolbar";
+import {
+  Button,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  ToolbarToggleGroup,
+} from "@patternfly/react-core";
+import React from "react";
+import FilterIcon from "@patternfly/react-icons/dist/esm/icons/filter-icon";
+import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
+import { useTranslation } from "react-i18next";
+import { useLegacyFilterState } from "@app/shared/hooks/useLegacyFilterState";
+import { Fact } from "@app/api/models";
+import { FactDetailModal } from "./fact-detail-modal/fact-detail-modal";
+
+export interface IApplicationRiskProps {
+  facts: Fact[];
+}
+
+export const ApplicationFacts: React.FC<IApplicationRiskProps> = ({
+  facts,
+}) => {
+  const { t } = useTranslation();
+  const sources = new Set<string>();
+
+  // TODO: work through how to store sources for facts in the ui for sorting
+  //   facts.forEach((fact) => sources.add(fact.source || ""));
+
+  const filterCategories: FilterCategory<Fact, "source">[] = [
+    {
+      key: "source",
+      title: t("terms.source"),
+      type: FilterType.multiselect,
+      placeholderText: t("terms.source"),
+      //   getItemValue: (fact) => fact.source || "Source default name",
+      selectOptions: Array.from(sources)
+        //TODO: Custom sorting for facts may be required
+        // .sort(compareSources)
+        .map((source) => source || "Source default name")
+        .map((source) => ({ key: source, value: source })),
+      logicOperator: "OR",
+    },
+  ];
+
+  const {
+    filterValues,
+    setFilterValues,
+    filteredItems: filteredFacts,
+  } = useLegacyFilterState(facts, filterCategories);
+
+  const [selectedFactForDetailModal, setSelectedFactForDetailModal] =
+    React.useState<Fact | null>(null);
+
+  return (
+    <>
+      <Toolbar
+        clearAllFilters={() => setFilterValues({})}
+        clearFiltersButtonText={t("actions.clearAllFilters")}
+      >
+        <ToolbarContent className={spacing.p_0}>
+          <ToolbarItem>Filter by:</ToolbarItem>
+          <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+            <FilterToolbar
+              filterCategories={filterCategories}
+              filterValues={filterValues}
+              setFilterValues={setFilterValues}
+              showFiltersSideBySide
+            />
+          </ToolbarToggleGroup>
+        </ToolbarContent>
+      </Toolbar>
+      {filteredFacts.map((fact) => {
+        return (
+          <div>
+            <Button
+              variant="link"
+              isInline
+              onClick={() => setSelectedFactForDetailModal(fact)}
+            >
+              {fact.name}
+            </Button>
+          </div>
+        );
+      })}
+      {selectedFactForDetailModal ? (
+        <FactDetailModal
+          fact={selectedFactForDetailModal}
+          onClose={() => setSelectedFactForDetailModal(null)}
+        />
+      ) : null}
+    </>
+  );
+};

client/src/app/pages/applications/components/application-detail-drawer/fact-detail-modal/fact-code-snip-viewer.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { CodeEditor, Language } from "@patternfly/react-code-editor";
+import { Fact } from "@app/api/models";
+import yaml from "js-yaml";
+export interface IFactCodeSnipViewerProps {
+  fact: Fact;
+}
+
+export const FactCodeSnipViewer: React.FC<IFactCodeSnipViewerProps> = ({
+  fact,
+}) => {
+  return (
+    <CodeEditor
+      isReadOnly
+      isDarkTheme
+      isLineNumbersVisible
+      language={Language.json}
+      height="450px"
+      code={yaml.dump(fact.data, { skipInvalid: true })}
+    />
+  );
+};

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { Button, Modal } from "@patternfly/react-core";
+import { FactCodeSnipViewer } from "./fact-code-snip-viewer";
+import { Fact } from "@app/api/models";
+
+export interface IFactDetailModalProps {
+  fact: Fact;
+  onClose: () => void;
+}
+
+export const FactDetailModal: React.FC<IFactDetailModalProps> = ({
+  fact,
+  onClose,
+}) => {
+  return (
+    <Modal
+      title={fact.name}
+      variant="large"
+      isOpen
+      onClose={onClose}
+      actions={[
+        <Button key="close" variant="primary" onClick={onClose}>
+          Close
+        </Button>,
+      ]}
+    >
+      <FactCodeSnipViewer fact={fact}></FactCodeSnipViewer>
+    </Modal>
+  );
+};

client/src/app/pages/applications/components/application-detail-drawer/fact-detail-modal/index.ts

@@ -0,0 +1 @@
+export * from "./fact-detail-modal";

client/src/app/queries/facts.ts

@@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getFacts } from "@app/api/rest";
+import { AxiosError } from "axios";
+import { Fact } from "@app/api/models";
+
+export const FactsQueryKey = "facts";
+
+export const useFetchFacts = (applicationID: number | string | undefined) => {
+  const { data, isLoading, error, refetch } = useQuery(
+    [FactsQueryKey, applicationID],
+    {
+      queryFn: () => getFacts(applicationID),
+      enabled: !!applicationID,
+      onError: (error: AxiosError) => console.log("error, ", error),
+      select: (facts): Fact[] =>
+        Object.keys(facts).map((fact) => ({ name: fact, data: facts[fact] })),
+    }
+  );
+
+  return {
+    facts: data || [],
+    isFetching: isLoading,
+    fetchError: error,
+    refetch,
+  };
+};