Merge pull request #434 from Esri/add-share-manager

use instant app share directly

package.json

@@ -27,7 +27,8 @@
     "test:clean": "npm run clean:src && npm run lint:ts:fix && stencil test --spec --e2e --detectOpenHandles",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
-    "update-browserslist": "npx browserslist@latest --update-db"
+    "update-browserslist": "npx browserslist@latest --update-db",
+    "copy:instant-app-component-assests": "ncp node_modules/@esri/instant-apps-components/dist/assets src/assets && ncp node_modules/@esri/instant-apps-components/dist/assets src/demos/assets"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -60,6 +61,8 @@
     "gh-release": "^6.0.3",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
+    "mkdirp": "3.0.1",
+    "ncp": "^2.0.0",
     "pify": "^5.0.0",
     "prettier": "2.4.1",
     "puppeteer": "^21.3.1",
@@ -78,6 +81,7 @@
     "@esri/arcgis-rest-service-admin": "^3.4.2",
     "@esri/calcite-components": "1.11.1-next.1",
     "@esri/calcite-design-tokens": "1.1.1-next.2",
+    "@esri/instant-apps-components": "1.0.0-beta.157",
     "@esri/hub-common": "^12.37.1",
     "@esri/hub-initiatives": "^12.4.1",
     "@esri/hub-sites": "^12.6.0",

src/components.d.ts

@@ -1259,7 +1259,6 @@ declare global {
     interface HTMLLayerTableElementEventMap {
         "featureSelectionChange": number[];
         "openFilterOptions": void;
-        "openShare": boolean;
     }
     interface HTMLLayerTableElement extends Components.LayerTable, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLayerTableElementEventMap>(type: K, listener: (this: HTMLLayerTableElement, ev: LayerTableCustomEvent<HTMLLayerTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2053,10 +2052,6 @@ declare namespace LocalJSX {
           * Emitted on demand when the filters button is clicked
          */
         "onOpenFilterOptions"?: (event: LayerTableCustomEvent<void>) => void;
-        /**
-          * Emitted on demand when the share button is clicked
-         */
-        "onOpenShare"?: (event: LayerTableCustomEvent<boolean>) => void;
         /**
           * boolean: When true only editable layers that support the update capability will be available
          */

src/components/crowdsource-manager/readme.md

@@ -128,6 +128,7 @@ graph TD;
   layer-table --> calcite-dropdown-item
   layer-table --> calcite-action
   layer-table --> calcite-button
+  layer-table --> instant-apps-social-share
   layer-table --> calcite-tooltip
   layer-table --> calcite-modal
   map-layer-picker --> calcite-tooltip
@@ -146,6 +147,9 @@ graph TD;
   calcite-combobox --> calcite-icon
   calcite-combobox-item --> calcite-icon
   calcite-dropdown-item --> calcite-icon
+  instant-apps-social-share --> calcite-popover
+  instant-apps-social-share --> calcite-button
+  instant-apps-social-share --> calcite-icon
   calcite-modal --> calcite-scrim
   calcite-modal --> calcite-icon
   style crowdsource-manager fill:#f9f,stroke:#333,stroke-width:4px

src/components/layer-table/layer-table.css

@@ -58,6 +58,10 @@
   height: 51px;
 }
 
+.height-50-px {
+  height: 50px;
+}
+
 .bottom-left {
   position: absolute;
   left: 0;
@@ -103,7 +107,13 @@ vaadin-grid-cell-content {
 
 .share-action {
   position: absolute;
-  right: 1;
+  right: 0;
+  margin-top: 9px;
+  margin-inline-end: 4px;
+}
+
+html[dir="rtl"] .share-action {
+  left: 0;
 }
 
 .disabled {

src/components/layer-table/layer-table.tsx

@@ -22,6 +22,7 @@ import { getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
 import { queryAllIds, queryFeaturesByGlobalID } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 import { IColumnsInfo, IExportInfos, ILayerInfo, IMapClick, IMapInfo, IToolInfo, IToolSizeInfo } from "../../utils/interfaces";
+import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
 
 @Component({
   tag: "layer-table",
@@ -235,6 +236,11 @@ export class LayerTable {
    */
   protected _selectAllElement: HTMLCalciteCheckboxElement;
 
+  /**
+   * HTMLInstantAppsSocialShareElement: Element to support app sharing to social media
+   */
+  protected _shareNode: HTMLInstantAppsSocialShareElement;
+
   /**
    * HTMLCalciteDropdownElement: Dropdown the will support show/hide of table columns
    */
@@ -343,6 +349,7 @@ export class LayerTable {
       this._mapClickHandle.remove();
     }
     if (this.mapView) {
+      this._updateShareUrl();
       this._mapClickHandle = this.reactiveUtils.on(
         () => this.mapView,
         "click",
@@ -360,6 +367,7 @@ export class LayerTable {
   async _layerWatchHandler(): Promise<void> {
     this._fetchingData = true;
     await this._resetTable();
+    this._updateShareUrl();
     this._fetchingData = false;
   }
 
@@ -368,6 +376,7 @@ export class LayerTable {
    */
   @Watch("_selectedIndexes")
   async _selectedIndexesWatchHandler(): Promise<void> {
+    this._updateShareUrl();
     this._validateEnabledActions();
   }
 
@@ -407,11 +416,6 @@ export class LayerTable {
     bubbles: true
   }) openFilterOptions: EventEmitter<void>;
 
-  /**
-   * Emitted on demand when the share button is clicked
-   */
-  @Event() openShare: EventEmitter<boolean>;
-
   /**
    * Scroll and zoom to the selected feature from the Features widget.
    *
@@ -1056,21 +1060,47 @@ export class LayerTable {
     icon: string
   ): VNode {
     return (
-      <div class={"share-action height-51 border-bottom"} id={this._getId(icon)}>
-        <calcite-action
-          appearance="solid"
-          class="height-51"
-          icon={icon}
-          id={icon}
-          onClick={() => this.openShare.emit(true)}
-          text=""
-          textEnabled={false}
+      <div class="share-action" id={this._getId(icon)}>
+        <instant-apps-social-share
+          autoUpdateShareUrl={false}
+          popoverButtonIconScale="s"
+          ref={el => this._shareNode = el}
+          scale="m"
+          shareButtonColor="neutral"
+          socialMedia={true}
+          view={this.mapView}
         />
         {this._getToolTip("bottom", icon, this._translations.share)}
       </div>
     )
   }
 
+  /**
+   * Called each time the values that are used for custom url params change
+   */
+  _updateShareUrl(): void {
+    const url = this._shareNode?.shareUrl;
+    if (!url) {
+      return;
+    }
+    const urlObj = new URL(url);
+
+    //set the additional search params
+    if (this.mapInfo?.id) {
+      urlObj.searchParams.set("webmap", this.mapInfo.id);
+    }
+
+    if (this._layer?.id) {
+      urlObj.searchParams.set("layer", this._layer.id);
+    }
+
+    if (this._selectedIndexes?.length > 0) {
+      urlObj.searchParams.set("oid", this._selectedIndexes.join(","));
+    }
+
+    this._shareNode.shareUrl = urlObj.href;
+  }
+
   /**
    * Get a tooltip
    *

src/components/layer-table/readme.md

@@ -31,7 +31,6 @@
 | ------------------------ | ---------------------------------------------------- | ----------------------- |
 | `featureSelectionChange` | Emitted on demand when a layer is selected           | `CustomEvent<number[]>` |
 | `openFilterOptions`      | Emitted on demand when the filters button is clicked | `CustomEvent<void>`     |
-| `openShare`              | Emitted on demand when the share button is clicked   | `CustomEvent<boolean>`  |
 
 
 ## Dependencies
@@ -52,6 +51,7 @@
 - calcite-dropdown-item
 - calcite-action
 - calcite-button
+- instant-apps-social-share
 - calcite-tooltip
 - calcite-modal
 
@@ -68,6 +68,7 @@ graph TD;
   layer-table --> calcite-dropdown-item
   layer-table --> calcite-action
   layer-table --> calcite-button
+  layer-table --> instant-apps-social-share
   layer-table --> calcite-tooltip
   layer-table --> calcite-modal
   calcite-panel --> calcite-action
@@ -103,6 +104,9 @@ graph TD;
   calcite-button --> calcite-icon
   calcite-combobox-item --> calcite-icon
   calcite-dropdown-item --> calcite-icon
+  instant-apps-social-share --> calcite-popover
+  instant-apps-social-share --> calcite-button
+  instant-apps-social-share --> calcite-icon
   calcite-modal --> calcite-scrim
   calcite-modal --> calcite-icon
   crowdsource-manager --> layer-table