@esri/hub-web-components 0.37.1 → 0.37.3

package/dist/components/arcgis-hub-entity-view-layout/customElement.js

@@ -1,19 +1,19 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/0.37/LICENSE.txt */
 import { c as k } from "../../chunks/runtime.js";
 import { LitElement as L, createEvent as y, noShadowRoot as A } from "@arcgis/lumina";
-import { getProp as a, getWithDefault as H, MetricVisibility as p, getTypeFromEntity as E, Logger as c, cloneObject as m, updateHubEntity as P, capitalize as S } from "@esri/hub-common";
+import { getProp as i, getWithDefault as H, MetricVisibility as p, getTypeFromEntity as E, Logger as c, cloneObject as m, updateHubEntity as P, capitalize as S } from "@esri/hub-common";
 import { u as R } from "../../chunks/useT9n.js";
 import { isTargetEntityScopeConfigured as n, showNotice as b } from "@esri/hub-components";
 import { g as $ } from "../../chunks/state.js";
 import { constants as w, dictionary as v } from "@esri/telemetry-dictionary-hub";
 import { html as f } from "lit";
 const I = async (t, e) => {
-  const i = !!t.summary, s = !!t.description, r = !!a(t, "view.embeds[0]"), C = !!a(t, "view.featuredImageUrl"), O = i || s || r || C;
+  const a = !!t.summary, r = !!t.description, s = !!i(t, "view.embeds[0]"), C = !!i(t, "view.featuredImageUrl"), O = a || r || s || C;
   let d = "";
   e?.isAuthenticated && (d = `?token=${e.session.token}`);
-  const T = `${a(t, "view.featuredImageUrl")}${d}`, u = H(t, "view.metricDisplays", []), g = u.filter((o) => o.visibility === p.featured), x = u.filter((o) => o.visibility !== p.hidden);
+  const T = `${i(t, "view.featuredImageUrl")}${d}`, u = H(t, "view.metricDisplays", []), g = u.filter((o) => o.visibility === p.featured), x = u.filter((o) => o.visibility !== p.hidden);
   let h = [];
-  h = a(t, "typeKeywords");
+  h = i(t, "typeKeywords");
   const l = h.filter(
     (o) => o.startsWith("ref|initiative")
   );
@@ -103,35 +103,41 @@ const I = async (t, e) => {
                                         html: "<h2>{{about:translate}}</h2>"
                                       }
                                     },
-                                    {
+                                    // NOTE: we use getProp here and elsewhere to conditionally include nodes in the layout based on the presence of data in the project entity.
+                                    // we could instead use syntax like {{entity.summary:optional}} or {{entity.view.timeline.stages:optional:2}} in the properties of a node
+                                    // so that interpolation removes them later. however, we should not do that because that means that our layout and our processed layout
+                                    // in the layout container have different shapes which could lead to bugs and makes it more difficult to reason about the code.
+                                    // by using getProp to conditionally include nodes in the layout, we ensure that the layout and processed layout have the same shape
+                                    // and we can be confident that if a node is in the layout then it will be rendered in the processed layout (assuming it's not filtered out for some reason).
+                                    i(t, "summary") && {
                                       id: "about-summary",
                                       tag: "arcgis-text-card",
                                       readOnly: !0,
                                       properties: {
-                                        html: "<p>{{entity.summary:optional:2}}</p>"
+                                        html: "<p>{{entity.summary}}</p>"
                                       }
                                     },
-                                    a(t, "view.embeds[0]") && {
+                                    i(t, "view.embeds[0]") && {
                                       id: "about-embed",
                                       tag: "arcgis-hub-embed-card",
                                       properties: {
-                                        embed: a(t, "view.embeds[0]")
+                                        embed: i(t, "view.embeds[0]")
                                       }
                                     },
-                                    {
+                                    i(t, "description") && {
                                       id: "about-description",
                                       tag: "arcgis-text-card",
                                       readOnly: !0,
                                       properties: {
-                                        html: "<p>{{entity.description:optional:2}}</p>"
+                                        html: "<p>{{entity.description}}</p>"
                                       }
                                     },
-                                    a(t, "view.featuredImageUrl") && {
+                                    i(t, "view.featuredImageUrl") && {
                                       id: "about-featured-image",
                                       tag: "arcgis-hub-image",
                                       properties: {
                                         src: T,
-                                        alt: a(t, "view.featuredImageAltText") || ""
+                                        alt: i(t, "view.featuredImageAltText") || ""
                                       }
                                     },
                                     g.length > 0 && {
@@ -149,14 +155,14 @@ const I = async (t, e) => {
                                         entity: "{{entity}}"
                                       }
                                     },
-                                    a(t, "view.featuredContentIds.length") > 0 && {
+                                    i(t, "view.featuredContentIds.length") > 0 && {
                                       id: "featured-content-header",
                                       tag: "arcgis-text-card",
                                       properties: {
                                         html: "<h2>{{featuredContent:translate}}</h2>"
                                       }
                                     },
-                                    a(t, "view.featuredContentIds.length") > 0 && {
+                                    i(t, "view.featuredContentIds.length") > 0 && {
                                       id: "featured-content-gallery",
                                       tag: "arcgis-hub-gallery-card",
                                       properties: {
@@ -178,7 +184,7 @@ const I = async (t, e) => {
                                               {
                                                 predicates: [
                                                   {
-                                                    id: a(t, "view.featuredContentIds")
+                                                    id: i(t, "view.featuredContentIds")
                                                   }
                                                 ]
                                               }
@@ -210,13 +216,13 @@ const I = async (t, e) => {
                                         entity: "{{entity}}"
                                       }
                                     },
-                                    {
+                                    i(t, "view.timeline.stages")?.length && {
                                       id: "status-timeline",
                                       tag: "arcgis-hub-timeline",
                                       readOnly: !0,
                                       properties: {
                                         canCollapse: "{{entity.view.timeline.canCollapse:optional}}",
-                                        stages: "{{entity.view.timeline.stages:optional:2}}"
+                                        stages: "{{entity.view.timeline.stages}}"
                                       }
                                     },
                                     {
@@ -425,7 +431,7 @@ const I = async (t, e) => {
     ]
   };
 }, V = async (t, e) => {
-  const i = !!t.summary, s = !!t.description;
+  const a = !!t.summary, r = !!t.description;
   return {
     schemaVersion: 2,
     history: [],
@@ -505,27 +511,27 @@ const I = async (t, e) => {
                                   columnProps: { width: { xs: 12, md: 8 } },
                                   properties: {},
                                   children: [
-                                    (i || s) && {
+                                    (a || r) && {
                                       id: "about-header",
                                       tag: "arcgis-text-card",
                                       properties: {
                                         html: "<h2>{{about:translate}}</h2>"
                                       }
                                     },
-                                    {
+                                    i(t, "summary") && {
                                       id: "about-summary",
                                       tag: "arcgis-text-card",
                                       readOnly: !0,
                                       properties: {
-                                        html: "<p>{{entity.summary:optional:2}}</p>"
+                                        html: "<p>{{entity.summary}}</p>"
                                       }
                                     },
-                                    {
+                                    i(t, "description") && {
                                       id: "about-description",
                                       tag: "arcgis-text-card",
                                       readOnly: !0,
                                       properties: {
-                                        html: "<p>{{entity.description:optional:2}}</p>"
+                                        html: "<p>{{entity.description}}</p>"
                                       }
                                     }
                                   ].filter(Boolean)
@@ -660,8 +666,8 @@ const I = async (t, e) => {
     ]
   };
 }, _ = async (t, e) => {
-  let i;
-  return E(t) === "project" ? i = await I(t, e) : i = await V(t), i;
+  let a;
+  return E(t) === "project" ? a = await I(t, e) : a = await V(t), a;
 };
 class D extends L {
   constructor() {
@@ -680,20 +686,20 @@ class D extends L {
     return this.entity && E(this.entity);
   }
   willUpdate(e) {
-    e.has("entity") && this._init().catch((i) => {
-      c.error("Error initializing ArcgisHubEntityViewLayout >>>", i);
+    e.has("entity") && this._init().catch((a) => {
+      c.error("Error initializing ArcgisHubEntityViewLayout >>>", a);
     });
   }
   async _init() {
     let e;
-    this.entity && (e = a(this.entity, "layout"), e || (e = await _(this.entity, this._context)), this._layout = e);
+    this.entity && (e = i(this.entity, "layout"), e || (e = await _(this.entity, this._context)), this._layout = e);
   }
   async _handleLayoutPublished(e) {
-    const { layout: i, successCallback: s } = e.detail;
+    const { layout: a, successCallback: r } = e.detail;
     try {
-      this._isPublishing = !0, this._layout = i;
-      const r = m(this.entity);
-      r.layout = i, await P(this._entityType, r, this._context), s && await s(), c.info(`Successfully published layout for ${this._entityType} ${this.entity.id} >>>`, this._layout), b({
+      this._isPublishing = !0, this._layout = a;
+      const s = m(this.entity);
+      s.layout = a, await P(this._entityType, s, this._context), r && await r(), c.info(`Successfully published layout for ${this._entityType} ${this.entity.id} >>>`, this._layout), b({
         title: this._messages.publishSuccess,
         message: "",
         configuration: {
@@ -708,8 +714,8 @@ class D extends L {
         ...v.category.content.action.update.label.layout.details.publish,
         response: w.response.SUCCESS
       }), this.arcgisHubEntityViewPublished.emit();
-    } catch (r) {
-      c.error(`Error publishing layout for ${this._entityType} ${this.entity.id} >>>`, r), b({
+    } catch (s) {
+      c.error(`Error publishing layout for ${this._entityType} ${this.entity.id} >>>`, s), b({
         title: this._messages.publishError,
         message: "",
         configuration: {
@@ -729,8 +735,8 @@ class D extends L {
     }
   }
   async _handleLayoutReset(e) {
-    const i = m(this.entity);
-    i.layout && delete i.layout, this._layout = await _(i, this._context), e.detail.successCallback && await e.detail.successCallback();
+    const a = m(this.entity);
+    a.layout && delete a.layout, this._layout = await _(a, this._context), e.detail.successCallback && await e.detail.successCallback();
   }
   render() {
     return this._layout ? f`<calcite-alert auto-close auto-close-duration=slow icon=information label="internal layout alert" kind=info open><div slot=title>${S(this._entityType || "")} view rendered as layout</div><div slot=message>We are rendering ${this._entityType} views on dev/QA alpha orgs using the new layout system. This system is