From 00d896a31b4053e1b9b2cf4f76f96f5c3d1c75c7 Mon Sep 17 00:00:00 2001
From: John Hauck <jhauck@esri.com>
Date: Wed, 16 Oct 2024 07:49:54 -0600
Subject: [PATCH] set appLayout in share

---
 src/components.d.ts                           | 16 +++++++
 .../crowdsource-manager.tsx                   |  2 +
 src/components/layer-table/layer-table.tsx    | 17 ++++++-
 src/components/layer-table/readme.md          | 45 ++++++++++---------
 src/components/map-card/map-card.tsx          | 24 +++++++++-
 src/components/map-card/readme.md             |  1 +
 6 files changed, 80 insertions(+), 25 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 5896d8524..aa50e748a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -795,6 +795,10 @@ export namespace Components {
         "showNextIcon"?: boolean;
     }
     interface LayerTable {
+        /**
+          * AppLayout: the current app layout
+         */
+        "appLayout": AppLayout;
         /**
           * Closes the filter
          */
@@ -899,6 +903,10 @@ export namespace Components {
     interface LocationFlowItem {
     }
     interface MapCard {
+        /**
+          * AppLayout: the current app layout
+         */
+        "appLayout": AppLayout;
         /**
           * Array of objects containing proxy information for premium platform services.
          */
@@ -3488,6 +3496,10 @@ declare namespace LocalJSX {
         "showNextIcon"?: boolean;
     }
     interface LayerTable {
+        /**
+          * AppLayout: the current app layout
+         */
+        "appLayout"?: AppLayout;
         /**
           * boolean: create filter modal optional (default true) boolean value to create filter modal in layer table
          */
@@ -3588,6 +3600,10 @@ declare namespace LocalJSX {
     interface LocationFlowItem {
     }
     interface MapCard {
+        /**
+          * AppLayout: the current app layout
+         */
+        "appLayout"?: AppLayout;
         /**
           * Array of objects containing proxy information for premium platform services.
          */
diff --git a/src/components/crowdsource-manager/crowdsource-manager.tsx b/src/components/crowdsource-manager/crowdsource-manager.tsx
index b4d3aa2c3..5ac238f01 100644
--- a/src/components/crowdsource-manager/crowdsource-manager.tsx
+++ b/src/components/crowdsource-manager/crowdsource-manager.tsx
@@ -831,6 +831,7 @@ export class CrowdsourceManager {
     return (
       <div class={`${mapContainerClass} overflow-hidden`} id="card-mapView">
         <map-card
+          appLayout={this.appLayout}
           appProxies={this.appProxies}
           basemapConfig={this.basemapConfig}
           class="width-full"
@@ -991,6 +992,7 @@ export class CrowdsourceManager {
         }
         <div class={`width-full height-full position-relative z-index-0 ${tableClass}`}>
           <layer-table
+            appLayout={this.appLayout}
             createFilterModal={false}
             defaultGlobalId={hasMapAndLayer ? globalId : undefined}
             defaultLayerId={hasMapAndLayer ? this.defaultLayer : ""}
diff --git a/src/components/layer-table/layer-table.tsx b/src/components/layer-table/layer-table.tsx
index 3c95250b3..7f7197ab0 100644
--- a/src/components/layer-table/layer-table.tsx
+++ b/src/components/layer-table/layer-table.tsx
@@ -21,7 +21,7 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 import { getFeatureLayerView, getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
 import { queryAllIds, queryAllOidsWithQueryFeatures, queryFeaturesByGlobalID } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
-import { EditType, IColumnsInfo, IExportInfos, ILayerDef, IMapClick, IMapInfo, IToolInfo, IToolSizeInfo, TooltipPlacement } from "../../utils/interfaces";
+import { AppLayout, EditType, IColumnsInfo, IExportInfos, ILayerDef, IMapClick, IMapInfo, IToolInfo, IToolSizeInfo, TooltipPlacement } from "../../utils/interfaces";
 import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
 import { LayerExpression } from "@esri/instant-apps-components";
 
@@ -44,6 +44,11 @@ export class LayerTable {
   //
   //--------------------------------------------------------------------------
 
+  /**
+   * AppLayout: the current app layout
+   */
+  @Prop() appLayout: AppLayout;
+
   /**
    * string: Global ID of the feature to select
    */
@@ -433,6 +438,14 @@ export class LayerTable {
   //
   //--------------------------------------------------------------------------
 
+  /**
+   * Update the url params when the appLayout changes
+   */
+  @Watch("appLayout")
+  appLayoutWatchHandler(): void {
+    this._updateShareUrl();
+  }
+
   /**
    * Handle url defaults when defaultOid is set
    */
@@ -1658,6 +1671,8 @@ export class LayerTable {
       urlObj.searchParams.delete("oid");
     }
 
+    urlObj.searchParams.set("applayout", this.appLayout);
+
     this._shareNode.shareUrl = urlObj.href;
   }
 
diff --git a/src/components/layer-table/readme.md b/src/components/layer-table/readme.md
index 636292085..4f87dc43d 100644
--- a/src/components/layer-table/readme.md
+++ b/src/components/layer-table/readme.md
@@ -7,28 +7,29 @@
 
 ## Properties
 
-| Property                  | Attribute                     | Description                                                                                                        | Type       | Default     |
-| ------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------- | ----------- |
-| `createFilterModal`       | `create-filter-modal`         | boolean: create filter modal optional (default true) boolean value to create filter modal in layer table           | `boolean`  | `true`      |
-| `defaultGlobalId`         | --                            | string: Global ID of the feature to select                                                                         | `string[]` | `undefined` |
-| `defaultLayerId`          | `default-layer-id`            | string: when provided this layer ID will be used when the app loads                                                | `string`   | `undefined` |
-| `defaultOid`              | --                            | number: when provided this will be used to select a feature in the table by default                                | `number[]` | `undefined` |
-| `enableAutoRefresh`       | `enable-auto-refresh`         | boolean: when true the layer table will auto refresh the data                                                      | `boolean`  | `undefined` |
-| `enableCSV`               | `enable-c-s-v`                | boolean: when true the export to csv button will be available                                                      | `boolean`  | `undefined` |
-| `enableColumnReorder`     | `enable-column-reorder`       | boolean: when true the layer table will support drag/drop of columns to adjust order                               | `boolean`  | `true`      |
-| `enableInlineEdit`        | `enable-inline-edit`          | boolean: when true edits can be applied directly within the table                                                  | `boolean`  | `undefined` |
-| `enableShare`             | `enable-share`                | boolean: when true the share widget will be available                                                              | `boolean`  | `undefined` |
-| `isMobile`                | `is-mobile`                   | When true the component will render an optimized view for mobile devices                                           | `boolean`  | `undefined` |
-| `mapHidden`               | `map-hidden`                  | boolean: when true the map is hidden and map specific controls should be hidden                                    | `boolean`  | `undefined` |
-| `mapInfo`                 | --                            | IMapInfo: key configuration details about the current map                                                          | `IMapInfo` | `undefined` |
-| `mapView`                 | --                            | esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html             | `MapView`  | `undefined` |
-| `onlyShowUpdatableLayers` | `only-show-updatable-layers`  | boolean: When true only editable layers that support the update capability will be available                       | `boolean`  | `undefined` |
-| `selectedIds`             | --                            | number[]: A list of ids that are currently selected                                                                | `number[]` | `[]`        |
-| `shareIncludeEmbed`       | `share-include-embed`         | boolean: When true the share options will include embed option                                                     | `boolean`  | `undefined` |
-| `shareIncludeSocial`      | `share-include-social`        | boolean: When true the share options will include social media sharing                                             | `boolean`  | `undefined` |
-| `showNewestFirst`         | `show-newest-first`           | boolean: when true the table will be sorted by objectid in descending order by default                             | `boolean`  | `undefined` |
-| `zoomAndScrollToSelected` | `zoom-and-scroll-to-selected` | boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table | `boolean`  | `undefined` |
-| `zoomToScale`             | `zoom-to-scale`               | number: default scale to zoom to when zooming to a single point feature                                            | `number`   | `undefined` |
+| Property                  | Attribute                     | Description                                                                                                        | Type                                      | Default     |
+| ------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------- | ----------- |
+| `appLayout`               | `app-layout`                  | AppLayout: the current app layout                                                                                  | `"mapView" \| "splitView" \| "tableView"` | `undefined` |
+| `createFilterModal`       | `create-filter-modal`         | boolean: create filter modal optional (default true) boolean value to create filter modal in layer table           | `boolean`                                 | `true`      |
+| `defaultGlobalId`         | --                            | string: Global ID of the feature to select                                                                         | `string[]`                                | `undefined` |
+| `defaultLayerId`          | `default-layer-id`            | string: when provided this layer ID will be used when the app loads                                                | `string`                                  | `undefined` |
+| `defaultOid`              | --                            | number: when provided this will be used to select a feature in the table by default                                | `number[]`                                | `undefined` |
+| `enableAutoRefresh`       | `enable-auto-refresh`         | boolean: when true the layer table will auto refresh the data                                                      | `boolean`                                 | `undefined` |
+| `enableCSV`               | `enable-c-s-v`                | boolean: when true the export to csv button will be available                                                      | `boolean`                                 | `undefined` |
+| `enableColumnReorder`     | `enable-column-reorder`       | boolean: when true the layer table will support drag/drop of columns to adjust order                               | `boolean`                                 | `true`      |
+| `enableInlineEdit`        | `enable-inline-edit`          | boolean: when true edits can be applied directly within the table                                                  | `boolean`                                 | `undefined` |
+| `enableShare`             | `enable-share`                | boolean: when true the share widget will be available                                                              | `boolean`                                 | `undefined` |
+| `isMobile`                | `is-mobile`                   | When true the component will render an optimized view for mobile devices                                           | `boolean`                                 | `undefined` |
+| `mapHidden`               | `map-hidden`                  | boolean: when true the map is hidden and map specific controls should be hidden                                    | `boolean`                                 | `undefined` |
+| `mapInfo`                 | --                            | IMapInfo: key configuration details about the current map                                                          | `IMapInfo`                                | `undefined` |
+| `mapView`                 | --                            | esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html             | `MapView`                                 | `undefined` |
+| `onlyShowUpdatableLayers` | `only-show-updatable-layers`  | boolean: When true only editable layers that support the update capability will be available                       | `boolean`                                 | `undefined` |
+| `selectedIds`             | --                            | number[]: A list of ids that are currently selected                                                                | `number[]`                                | `[]`        |
+| `shareIncludeEmbed`       | `share-include-embed`         | boolean: When true the share options will include embed option                                                     | `boolean`                                 | `undefined` |
+| `shareIncludeSocial`      | `share-include-social`        | boolean: When true the share options will include social media sharing                                             | `boolean`                                 | `undefined` |
+| `showNewestFirst`         | `show-newest-first`           | boolean: when true the table will be sorted by objectid in descending order by default                             | `boolean`                                 | `undefined` |
+| `zoomAndScrollToSelected` | `zoom-and-scroll-to-selected` | boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table | `boolean`                                 | `undefined` |
+| `zoomToScale`             | `zoom-to-scale`               | number: default scale to zoom to when zooming to a single point feature                                            | `number`                                  | `undefined` |
 
 
 ## Events
diff --git a/src/components/map-card/map-card.tsx b/src/components/map-card/map-card.tsx
index db057541a..f37b45fef 100644
--- a/src/components/map-card/map-card.tsx
+++ b/src/components/map-card/map-card.tsx
@@ -17,7 +17,7 @@
 import { Component, Element, Event, EventEmitter, Host, h, Listen, Prop, State, Watch, Method, VNode } from "@stencil/core";
 import MapCard_T9n from "../../assets/t9n/map-card/resources.json"
 import { loadModules } from "../../utils/loadModules";
-import { IBasemapConfig, IMapChange, IMapInfo, ISearchConfiguration, IToolInfo, IToolSizeInfo, theme, TooltipPlacement } from "../../utils/interfaces";
+import { AppLayout, IBasemapConfig, IMapChange, IMapInfo, ISearchConfiguration, IToolInfo, IToolSizeInfo, theme, TooltipPlacement } from "../../utils/interfaces";
 import { joinAppProxies } from "templates-common-library-esm/functionality/proxy";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { getFeatureLayerView, goToSelection } from "../../utils/mapViewUtils";
@@ -50,6 +50,11 @@ export class MapCard {
   //
   //--------------------------------------------------------------------------
 
+  /**
+   * AppLayout: the current app layout
+   */
+  @Prop() appLayout: AppLayout;
+
   /**
    * Array of objects containing proxy information for premium platform services.
    */
@@ -386,6 +391,14 @@ export class MapCard {
   //
   //--------------------------------------------------------------------------
 
+  /**
+   * Update the url params when the appLayout changes
+   */
+  @Watch("appLayout")
+  appLayoutWatchHandler(): void {
+    this._updateShareUrl();
+  }
+
   /**
    * Add/remove home widget
    */
@@ -621,6 +634,7 @@ export class MapCard {
       this._resizeObserver.observe(this._toolbar);
       this._observerSet = true;
     }
+    this._updateShareUrl();
   }
 
   //--------------------------------------------------------------------------
@@ -711,6 +725,7 @@ export class MapCard {
         mapView: this.mapView
       });
     }
+    this._updateShareUrl();
   }
 
   /**
@@ -974,7 +989,10 @@ export class MapCard {
           class="instant-app-share"
           embed={this.shareIncludeEmbed}
           popoverButtonIconScale="s"
-          ref={el => this._shareNode = el}
+          ref={el => {
+            this._shareNode = el;
+            this._updateShareUrl();
+          }}
           scale="m"
           shareButtonColor="neutral"
           shareButtonType="action"
@@ -1015,6 +1033,8 @@ export class MapCard {
       urlObj.searchParams.delete("oid");
     }
 
+    urlObj.searchParams.set("applayout", this.appLayout);
+
     this._shareNode.shareUrl = urlObj.href;
   }
 
diff --git a/src/components/map-card/readme.md b/src/components/map-card/readme.md
index 9441f87a2..32880f850 100644
--- a/src/components/map-card/readme.md
+++ b/src/components/map-card/readme.md
@@ -9,6 +9,7 @@
 
 | Property                  | Attribute                    | Description                                                                                                                                                                                                                                                                                     | Type                                                                                                                                                   | Default       |
 | ------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
+| `appLayout`               | `app-layout`                 | AppLayout: the current app layout                                                                                                                                                                                                                                                               | `"mapView" \| "splitView" \| "tableView"`                                                                                                              | `undefined`   |
 | `appProxies`              | `app-proxies`                | Array of objects containing proxy information for premium platform services.                                                                                                                                                                                                                    | `any`                                                                                                                                                  | `undefined`   |
 | `basemapConfig`           | --                           | IBasemapConfig: List of any basemaps to filter out from the basemap widget                                                                                                                                                                                                                      | `IBasemapConfig`                                                                                                                                       | `undefined`   |
 | `defaultLayerId`          | `default-layer-id`           | string: when provided this layer ID will be used when the app loads                                                                                                                                                                                                                             | `string`                                                                                                                                               | `undefined`   |