Merge pull request #386 from OpenCatalogi/feature/OP-60/ResultsDispla…

…ySwitch-NLDS

feature/OP-60/ResultsDisplaySwitch-NLDS

pwa/package.json

@@ -25,7 +25,7 @@
     "prepare": "cd .. && husky install"
   },
   "dependencies": {
-    "@conduction/components": "2.2.22",
+    "@conduction/components": "2.2.24",
     "@conduction/theme": "1.0.52",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.4.2",

pwa/src/apiService/resources/organization.ts

@@ -1,7 +1,6 @@
 import { Send } from "../apiService";
 import { AxiosInstance } from "axios";
 import { IFiltersContext } from "../../context/filters";
-import { filtersToQueryParams } from "../../services/filtersToQueryParams";
 
 export default class Organization {
   private _instance: AxiosInstance;
@@ -34,8 +33,8 @@ export default class Organization {
     return data;
   };
 
-  public getCount = async (filters: IFiltersContext): Promise<any> => {
-    const { data } = await Send(this._instance, "GET", `/organizations?limit=1${filtersToQueryParams(filters)}`);
+  public getCount = async (): Promise<any> => {
+    const { data } = await Send(this._instance, "GET", `/organizations?limit=1`);
 
     return data.total;
   };

pwa/src/components/categoryCard/CategoryCard.tsx

@@ -12,11 +12,12 @@ export interface CategoryCardProps {
   description: string | JSX.Element;
   icon: JSX.Element;
   domain?: boolean;
+  titleHrefOnly?: boolean;
 }
 
-export const CategoryCard: React.FC<CategoryCardProps> = ({ title, description, icon, domain }) => {
+export const CategoryCard: React.FC<CategoryCardProps> = ({ title, description, icon, domain, titleHrefOnly }) => {
   return (
-    <CardWrapper className={styles.container} onClick={() => navigate(title.href)}>
+    <CardWrapper className={styles.container} onClick={() => !titleHrefOnly && navigate(title.href)}>
       <CardHeader>
         <CardHeaderTitle>
           <Link className={styles.titleLink} onClick={() => navigate(title.href)}>

pwa/src/components/index.ts

@@ -1,6 +1,4 @@
 export * from "./applicationCard/ApplicationCard";
-export * from "./buttonLink/ButtonLink";
 export * from "./categoryCard/CategoryCard";
 export * from "./componentCard/ComponentCard";
 export * from "./organizationCard/OrganizationCard";
-export * from "./resultsDisplaySwitch/ResultsDisplaySwitch";

pwa/src/context/filters.ts

@@ -1,20 +1,8 @@
 import * as React from "react";
 import { GlobalContext } from "./global";
 
-export type TComponentResultsLayout = "table" | "cards" | "layer";
-export type TComponentDependenciesLayout = "layer" | "relations";
-export type TLandingDisplayLayout = "layer" | "cards";
-export type TCatagoryDisplayLayout = "table" | "cards" | "layer";
-export type TOrganizationsResultDisplayLayout = "table" | "cards";
-
 export interface IFiltersContext {
-  resultDisplayLayout: TComponentResultsLayout;
-  dependenciesDisplayLayout: TComponentDependenciesLayout;
-  landingDisplayLayout: TLandingDisplayLayout;
-  catagoryDisplayLayout: TCatagoryDisplayLayout;
   isForked: boolean;
-
-  organizationsResultDisplayLayout: TOrganizationsResultDisplayLayout;
   organizationSearch?: string;
 
   _search?: string;
@@ -38,11 +26,6 @@ export interface IFiltersContext {
 }
 
 export const defaultFiltersContext: IFiltersContext = {
-  resultDisplayLayout: "table",
-  dependenciesDisplayLayout: "layer",
-  landingDisplayLayout: "cards",
-  catagoryDisplayLayout: "table",
-  organizationsResultDisplayLayout: "cards",
   _search: "",
   organizationSearch: "",
   isForked: true,

pwa/src/context/global.ts

@@ -3,13 +3,15 @@ import { defaultGatsbyContext, IGatsbyContext } from "./gatsby";
 import { defaultFiltersContext, IFiltersContext } from "./filters";
 import { defaultPaginationContext, IPaginationContext } from "./pagination";
 import { defaultQueryLimitContext, IQueryLimitContext } from "./queryLimit";
+import { defaultResultDisplayLayoutContext, IResultDisplayLayoutContext } from "./resultDisplayLayout";
 
 export interface IGlobalContext {
   initiated: boolean;
   gatsby: IGatsbyContext;
   filters: IFiltersContext;
   pagination: IPaginationContext;
   queryLimit: IQueryLimitContext;
+  resultDisplayLayout: IResultDisplayLayoutContext;
 }
 
 export const defaultGlobalContext: IGlobalContext = {
@@ -18,6 +20,7 @@ export const defaultGlobalContext: IGlobalContext = {
   filters: defaultFiltersContext,
   pagination: defaultPaginationContext,
   queryLimit: defaultQueryLimitContext,
+  resultDisplayLayout: defaultResultDisplayLayoutContext,
 };
 
 export const GlobalContext = React.createContext<

pwa/src/context/resultDisplayLayout.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { GlobalContext } from "./global";
+
+export type TComponentResultsLayout = "table" | "cards" | "layer";
+export type TComponentDependenciesLayout = "layer" | "relations";
+export type TLandingDisplayLayout = "layer" | "cards";
+export type TCatagoryDisplayLayout = "table" | "cards" | "layer";
+export type TOrganizationsResultDisplayLayout = "table" | "cards";
+
+export interface IResultDisplayLayoutContext {
+  componentsDisplayLayout: TComponentResultsLayout;
+  dependenciesDisplayLayout: TComponentDependenciesLayout;
+  landingDisplayLayout: TLandingDisplayLayout;
+  catagoryDisplayLayout: TCatagoryDisplayLayout;
+  organizationsResultDisplayLayout: TOrganizationsResultDisplayLayout;
+}
+
+export const defaultResultDisplayLayoutContext: IResultDisplayLayoutContext = {
+  componentsDisplayLayout: "table",
+  dependenciesDisplayLayout: "layer",
+  landingDisplayLayout: "cards",
+  catagoryDisplayLayout: "table",
+  organizationsResultDisplayLayout: "cards",
+};
+
+export const useResultDisplayLayoutContext = () => {
+  const [globalContext, setGlobalContext] = React.useContext(GlobalContext);
+
+  const resultDisplayLayout: IResultDisplayLayoutContext = globalContext.resultDisplayLayout;
+
+  const setResultDisplayLayout = (query: IResultDisplayLayoutContext) => {
+    setGlobalContext((context) => ({
+      ...context,
+      resultDisplayLayout: { ...globalContext.resultDisplayLayout, ...query },
+    }));
+  };
+
+  return { setResultDisplayLayout, resultDisplayLayout };
+};

pwa/src/hooks/organization.ts

@@ -35,8 +35,8 @@ export const useOrganization = (queryClient: QueryClient) => {
       },
     });
 
-  const getCount = (filters: IFiltersContext) =>
-    useQuery<any, Error>(["organizations_count", filters], () => API?.Organization.getCount(filters), {
+  const getCount = () =>
+    useQuery<any, Error>(["organizations_count"], () => API?.Organization.getCount(), {
       onError: (error) => {
         throw new Error(error.message);
       },

pwa/src/templates/applicationsDetailTemplate/ApplicationsDetailTemplate.tsx

@@ -36,7 +36,13 @@ export const ApplicationsDetailTemplate: React.FC<ApplicationsDetailTemplateProp
 
   return (
     <Container layoutClassName={styles.container}>
-      <Link className={styles.backButton} onClick={() => navigate("/applications")}>
+      <Link
+        className={styles.backButton}
+        onClick={(e) => {
+          e.preventDefault(), navigate("/applications");
+        }}
+        href="/applications"
+      >
         <Icon>
           <FontAwesomeIcon icon={faArrowLeft} />
         </Icon>

pwa/src/templates/applicationsTemplate/ApplicationsTemplate.module.css

@@ -51,6 +51,10 @@
   align-items: baseline !important;
 }
 
+.loading > span > br {
+  display: none;
+}
+
 /* pagination */
 
 .paginationContainer {