feat: add displayConfig in Hub Catalog, update GalleryDisplayConfigSc…

…hema (#1747)

packages/common/src/content/compose.ts

@@ -219,6 +219,9 @@ const getMetadataUpdatedDateInfo = (item: IItem, metadata?: any) => {
 };
 
 // public API
+// AGO has a util for determining display name and item type icons
+// that we can use for reference
+// https://devtopia.esri.com/WebGIS/arcgis-app-components/blob/master/src/components/arcgis-item-type/utils.ts
 /**
  * Compute the content type calcite-icon based on the content type
  * @param content type

packages/common/src/core/schemas/shared/CatalogSchema.ts

@@ -1,5 +1,6 @@
 import { EntityType, targetEntities } from "../../../search/types/IHubCatalog";
 import { IConfigurationSchema } from "../types";
+import { CARD_TITLE_TAGS, CORNERS, DROP_SHADOWS } from "./enums";
 
 /** JSON schema for an IPredicate */
 export const PredicateSchema: IConfigurationSchema = {
@@ -82,7 +83,38 @@ export const GalleryDisplayConfigSchema: IConfigurationSchema = {
   type: "object",
   properties: {
     hidden: { type: "boolean", default: false },
-    // TODO: fill in properties
+    layout: {
+      type: "string",
+      enum: ["list", "grid", "table", "map", "compact"],
+      default: "list",
+    },
+    cardTitleTag: {
+      type: "string",
+      enum: Object.keys(CARD_TITLE_TAGS),
+      default: CARD_TITLE_TAGS.h3,
+    },
+    showThumbnail: {
+      type: "string",
+      enum: ["show", "hide", "grid"],
+      default: "show",
+    },
+    corners: {
+      type: "string",
+      enum: Object.keys(CORNERS),
+      default: CORNERS.square,
+    },
+    shadow: {
+      type: "string",
+      enum: Object.keys(DROP_SHADOWS),
+      default: DROP_SHADOWS.none,
+    },
+    showLinkButton: { type: "boolean", default: false },
+    linkButtonStyle: {
+      type: "string",
+      enum: ["outline", "outline-filled"],
+      default: "outline-filled",
+    },
+    linkButtonText: { type: "string", default: "Explore" },
   },
 };
 

packages/common/src/core/schemas/shared/enums.ts

@@ -28,3 +28,15 @@ export enum DROP_SHADOWS {
   medium = "medium",
   heavy = "heavy",
 }
+
+/**
+ * Tags to wrap the title on each card
+ */
+export enum CARD_TITLE_TAGS {
+  h1 = "h1",
+  h2 = "h2",
+  h3 = "h3",
+  h4 = "h4",
+  h5 = "h5",
+  h6 = "h6",
+}

packages/common/src/search/Catalog.ts

@@ -22,6 +22,7 @@ import {
   IQuery,
   IFilter,
   IHubCollection,
+  IGalleryDisplayConfig,
 } from "./types";
 import { upgradeCatalogSchema } from "./upgradeCatalogSchema";
 
@@ -128,6 +129,13 @@ export class Catalog implements IHubCatalog {
     return Object.keys(this.scopes) as unknown as EntityType[];
   }
 
+  /**
+   * Return the display configuration for the gallery
+   */
+  get displayConfig(): IGalleryDisplayConfig {
+    return this._catalog.displayConfig;
+  }
+
   /**
    * Get the scope's query for a particular entity type
    * @param type

packages/common/src/search/types/IHubCatalog.ts

@@ -1,3 +1,8 @@
+import {
+  CARD_TITLE_TAGS,
+  CORNERS,
+  DROP_SHADOWS,
+} from "../../core/schemas/shared/enums";
 import { WellKnownCollection } from "../wellKnownCatalog";
 
 export type CatalogType = "content" | "exclusion";
@@ -35,6 +40,11 @@ export interface IHubCatalog {
     scopes: string;
     collections: string;
   };
+
+  /**
+   * Optional display configuration to control a catalog's appearance in the UI
+   */
+  displayConfig?: IGalleryDisplayConfig;
 }
 
 export interface ICatalogScope extends Partial<Record<EntityType, IQuery>> {}
@@ -185,4 +195,12 @@ export interface IGalleryDisplayConfig {
    * If this is true on a collection's display config, that collection will not be shown in the gallery.
    */
   hidden?: boolean;
+  layout?: "list" | "grid" | "map" | "table" | "calendar" | "compact";
+  cardTitleTag?: CARD_TITLE_TAGS;
+  showThumbnail?: "show" | "hide" | "grid";
+  corners?: CORNERS;
+  shadow?: DROP_SHADOWS;
+  showLinkButton?: boolean;
+  linkButtonStyle?: "solid" | "outline" | "outline-fill" | "transparent";
+  linkButtonText?: string;
 }

packages/common/test/search/Catalog.test.ts

@@ -4,18 +4,19 @@ import { ArcGISContextManager } from "../../src/ArcGISContextManager";
 import {
   ICatalogScope,
   IFilter,
+  IGalleryDisplayConfig,
   IHubCatalog,
   IHubCollection,
   IHubSearchResponse,
   IHubSearchResult,
-  IPredicate,
   IQuery,
 } from "../../src/search";
 import { Catalog } from "../../src";
 import * as FetchEntityCatalogModule from "../../src/search/fetchEntityCatalog";
 import * as HubSearchModule from "../../src/search/hubSearch";
 import * as CatalogContainsModule from "../../src/core/catalogContains";
 import { MOCK_AUTH } from "../mocks/mock-auth";
+import { CORNERS, DROP_SHADOWS } from "../../src/core/schemas/shared/enums";
 
 const catalogJson: IHubCatalog = {
   title: "Demo Catalog",
@@ -95,6 +96,16 @@ const catalogJson: IHubCatalog = {
       },
     },
   ],
+  displayConfig: {
+    hidden: false,
+    showThumbnail: "show",
+    showLinkButton: true,
+    linkButtonStyle: "outline",
+    linkButtonText: "Explore",
+    corners: CORNERS.square,
+    shadow: DROP_SHADOWS.none,
+    layout: "list",
+  },
 };
 
 const noScopeCatalog: IHubCatalog = {
@@ -157,6 +168,9 @@ describe("Catalog Class:", () => {
       instance.title = "Changed Title";
       expect(instance.title).toBe("Changed Title");
       expect(instance.availableScopes).toEqual(["item", "group", "user"]);
+      expect(instance.displayConfig).toEqual(
+        catalogJson.displayConfig as IGalleryDisplayConfig
+      );
     });
     it("allows null scopes", () => {
       const instance = Catalog.fromJson(cloneObject(noScopeCatalog), context);