feat: Custom JSON view (#84)

* feat: initial custom views implementation * feat: initial json render experience * feat: complete json view * fix: more tests * fix: remove console.log * fix: formatting * fix: test * fix: logo, remove custom views logic from switchEnv * feat: data stats, sorting * fix: total stat, unused elements * fix: localization of json view * fix: spectrum 2 updates * fix: remove tabs, update test * fix: RUM tracking * Update src/extension/app/components/search/search.js Co-authored-by: Raphael Wegmueller <github@rofe.com> * Update src/extension/app/spectrum-2.css.js Co-authored-by: Raphael Wegmueller <github@rofe.com> * fix: rename custom-views to views * fix: use RESTRICTED_PATHS from contstants.js * fix: special views support, don't wait for status * fix: hitting enter refreshes the page --------- Co-authored-by: Raphael Wegmueller <github@rofe.com>
adobe · Mar 27, 2024 · ce525c1 · ce525c1
1 parent 7009ea2
commit ce525c1
Show file tree

Hide file tree

Showing 20 changed files with 2,343 additions and 289 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,11 +47,14 @@
     "@spectrum-web-components/icon": "0.40.3",
     "@spectrum-web-components/icons": "0.40.3",
     "@spectrum-web-components/icons-workflow": "0.40.3",
+    "@spectrum-web-components/illustrated-message": "0.40.3",
     "@spectrum-web-components/menu": "0.40.3",
     "@spectrum-web-components/overlay": "0.40.3",
     "@spectrum-web-components/picker": "0.40.2",
     "@spectrum-web-components/progress-circle": "0.40.3",
+    "@spectrum-web-components/search": "0.40.5",
     "@spectrum-web-components/status-light": "0.40.3",
+    "@spectrum-web-components/table": "0.40.3",
     "@spectrum-web-components/textfield": "0.40.3",
     "@spectrum-web-components/theme": "0.40.3",
     "@spectrum-web-components/toast": "0.40.3",

diff --git a/rollup.config.js b/rollup.config.js
@@ -21,23 +21,23 @@ import replace from '@rollup/plugin-replace';
 import { babel } from '@rollup/plugin-babel';
 import sidekickManifestBuildPlugin from './build/build.js';
 
-function shared(browser) {
+function shared(browser, path = '') {
   return {
     output: {
       entryFileNames: '[name].js',
       chunkFileNames: '[name].js',
       assetFileNames: '[name][extname]',
       exports: 'named',
       format: 'es',
-      dir: `dist/${browser}`,
+      dir: `dist/${browser}${path}`,
       sourcemap: true,
     },
 
     preserveEntrySignatures: true,
   };
 }
 
-function plugins(browser) {
+function commonPlugins() {
   return [
     /** Resolve bare module imports */
     nodeResolve(),
@@ -48,6 +48,26 @@ function plugins(browser) {
       minify: true,
       target: ['chrome64', 'firefox67', 'safari11.1'],
     }),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+  ];
+}
+
+function extensionPlugins(browser) {
+  return [
+    /** Resolve bare module imports */
+    nodeResolve(),
+    /** Transform decorators with babel */
+    babel({ babelHelpers: 'bundled' }),
+    /** Minify JS, compile JS to a lower language target */
+    esbuild({
+      minify: true,
+      target: ['chrome64', 'firefox67', 'safari11.1'],
+    }),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
     /** Bundle assets references via import.meta.url */
     importMetaAssets(),
     /** Copy static assets */
@@ -66,7 +86,14 @@ function plugins(browser) {
 function extensionBuild(browser) {
   return {
     ...shared(browser),
-    plugins: [...plugins(browser)],
+    plugins: [...commonPlugins(), ...extensionPlugins(browser)],
+  };
+}
+
+function viewBuild(browser, path) {
+  return {
+    ...shared(browser, path),
+    plugins: [...commonPlugins()],
   };
 }
 
@@ -79,4 +106,8 @@ export default [
     input: 'src/extension/index.js',
     ...extensionBuild('safari'),
   },
+  {
+    input: 'src/extension/views/json/json.js',
+    ...viewBuild('chrome', '/views/json'),
+  },
 ];
diff --git a/src/extension/_locales/en/messages.json b/src/extension/_locales/en/messages.json
@@ -441,7 +441,7 @@
       "message": "Information"
     },
     "json_view_description": {
-      "message": "User-friendly data rendition."
+      "message": "Data rendition"
     },
     "live": {
       "message": "Live"
@@ -613,6 +613,18 @@
     "login_wait": {
       "message": "Please sign in..."
     },
+    "json_results_stat": {
+      "message": "Showing $1 of $2 results"
+    },
+    "search": {
+      "message": "Search"
+    },
+    "no_results": {
+      "message": "No Results Found"
+    },
+    "no_results_subheading": {
+      "message": "Try refining your search term"
+    },
     "destructive_confirmation": {
       "message": "Are you sure you want to $1 this?"
     },

diff --git a/src/extension/app/aem-sidekick.css.js b/src/extension/app/aem-sidekick.css.js
@@ -19,122 +19,6 @@ export const style = css`
     width: 100%;
     pointer-events: none;
     z-index: 999999999999;
-
-    --preview-background-default-light: #EEFAFEFF;
-    --preview-background-default-dark: #002B3BFF;
-    --preview-background-hover-light: #D9F4FDFF;
-    --preview-background-hover-dark: #00394EFF;
-    --preview-content-default-light: #1286CDFF;
-    --preview-content-default-dark: #5CC0FFFF;
-    --preview-border-default-light: #B7E7FCFF;
-    --preview-border-default-dark: #004762FF;
-    --preview-border-hover-light: #5CC0FFFF;
-    --preview-border-hover-dark: #046691FF;
-    --preview-border-open-light: #30A7FEFF;
-    --preview-border-open-dark: #0B78B3FF;
-    --live-content-default-light: #079355FF;
-    --live-content-default-dark: #2BD17DFF;
-    --live-background-default-light: #EDFCF1FF;
-    --live-background-default-dark: #002E22FF;
-    --live-background-hover-light: #D7F7E1FF;
-    --live-background-hover-dark: #003D2CFF;
-    --live-border-default-light: #ADEEC5FF;
-    --live-border-default-dark: #014C34FF;
-    --live-border-hover-light: #2BD17DFF;
-    --live-border-hover-dark: #036E45FF;
-    --live-border-open-light: #12B867FF;
-    --live-border-open-dark: #05834EFF;
-    --edit-content-default-light: #292929FF;
-    --edit-content-default-dark: #DADADAFF;
-    --edit-background-default-light: #F8F8F8FF;
-    --edit-background-default-dark: #292929FF;
-    --edit-background-hover-light: #F3F3F3FF;
-    --edit-background-hover-dark: #292929FF;
-    --edit-border-default-light: #DADADAFF;
-    --edit-border-default-dark: #505050FF;
-    --edit-border-hover-light: #C6C6C6FF;
-    --edit-border-hover-dark: #717171FF;
-    --edit-border-open-light: #8F8F8FFF;
-    --edit-border-open-dark: #8F8F8FFF;
-
-    --sidekick-background-light: #FFFFFFCC;
-    --sidekick-background-dark: #222222CC;
-    --sidekick-border-color-dark: #393939;
-    --sidekick-border-color-light: #DADADA;
-
-
-    --spectrum2-edit-content-default: var(--edit-content-default-dark);
-    --spectrum2-edit-background-default: var(--edit-background-default-dark);
-    --spectrum2-edit-background-hover: var(--edit-background-hover-dark);
-    --spectrum2-edit-border-default: var(--edit-border-default-dark);
-    --spectrum2-edit-border-hover: var(--edit-border-hover-dark);
-    --spectrum2-edit-border-open: var(--edit-border-open-dark);
-
-    --spectrum2-preview-background-default: var(--preview-background-default-dark);
-    --spectrum2-preview-background-hover: var(--preview-background-hover-dark);
-    --spectrum2-preview-content-default: var(--preview-content-default-dark);
-    --spectrum2-preview-border-default: var(--preview-border-default-dark);
-    --spectrum2-preview-border-hover: var(--preview-border-hover-dark);
-    --spectrum2-preview-border-open: var(--preview-border-open-dark);
-
-    --spectrum2-live-content-default: var(--live-content-default-dark);
-    --spectrum2-live-background-default: var(--live-background-default-dark);
-    --spectrum2-live-background-hover: var(--live-background-hover-dark);
-    --spectrum2-live-border-default: var(--live-border-default-dark);
-    --spectrum2-live-border-hover: var(--live-border-hover-dark);
-    --spectrum2-live-border-open: var(--live-border-open-dark);
-
-    --spectrum2-small-border-radius: 4px;
-    --spectrum2-default-border-radius: 8px;
-    --spectrum2-medium-border-radius: 10px;
-    --spectrum2-large-border-radius: 16px;
-
-    --spectrum2-form-input-border-radius: var(--spectrum2-medium-border-radius);
-    --spectrum2-dialog-border-radius: var(--spectrum2-large-border-radius);
-
-    --spectrum2-sidekick-border-radius: var(--spectrum2-large-border-radius);
-    --spectrum2-sidekick-background: var(--sidekick-background-dark);
-    --spectrum2-sidekick-border-color: var(--sidekick-border-color-dark);
-    --spectrum2-sidekick-backdrop-filter: blur(12px);
-    --spectrum2-sidekick-box-shadow: 
-      0px 0px 3px 0px rgba(0, 0, 0, 0.12), 
-      0px 3px 8px 0px rgba(0, 0, 0, 0.04), 
-      0px 4px 16px 0px rgba(0, 0, 0, 0.08);
-
-    /** global spectrum modifiers */
-    --mod-divider-background-color: var(--spectrum2-sidekick-border-color);
-    --mod-textfield-corner-radius: var(--spectrum2-form-input-border-radius);
-    --mod-textfield-spacing-block-end: 6px;
-    --mod-textfield-border-width: 2px;
-    --mod-button-border-radius: var(--spectrum2-default-border-radius);
-  }
-
-  @media (prefers-color-scheme: light) {
-    :host {
-      --spectrum2-preview-background-default: var(--preview-background-default-light);
-      --spectrum2-preview-background-hover: var(--preview-background-hover-light);
-      --spectrum2-preview-content-default: var(--preview-content-default-light);
-      --spectrum2-preview-border-default: var(--preview-border-default-light);
-      --spectrum2-preview-border-hover: var(--preview-border-hover-light);
-      --spectrum2-preview-border-open: var(--preview-border-open-light);
-  
-      --spectrum2-live-content-default: var(--live-content-default-light);
-      --spectrum2-live-background-default: var(--live-background-default-light);
-      --spectrum2-live-background-hover: var(--live-background-hover-light);
-      --spectrum2-live-border-default: var(--live-border-default-light);
-      --spectrum2-live-border-hover: var(--live-border-hover-light);
-      --spectrum2-live-border-open: var(--live-border-open-light);
-  
-      --spectrum2-edit-content-default: var(--edit-content-default-light);
-      --spectrum2-edit-background-default: var(--edit-background-default-light);
-      --spectrum2-edit-background-hover: var(--edit-background-hover-light);
-      --spectrum2-edit-border-default: var(--edit-border-default-light);
-      --spectrum2-edit-border-hover: var(--edit-border-hover-light);
-      --spectrum2-edit-border-open: var(--edit-border-open-light);
-  
-      --spectrum2-sidekick-background: var(--sidekick-background-light);
-      --spectrum2-sidekick-border-color: var(--sidekick-border-color-light);
-    }
   }
 
   :host([open='true']) {
@@ -151,5 +35,21 @@ export const style = css`
     transform: translate(-50%, 0px);
     bottom: 150px;
     pointer-events: auto;
+    z-index: 1;
+  }
+
+  .hlx-sk-special-view {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh; 
+  }
+  
+  .hlx-sk-special-view iframe {
+    border: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: auto;
   }
 `;
diff --git a/src/extension/app/aem-sidekick.js b/src/extension/app/aem-sidekick.js
@@ -17,12 +17,13 @@ import { MobxLitElement } from '@adobe/lit-mobx';
 import { customElement } from 'lit/decorators.js';
 import { log } from '../log.js';
 import { style } from './aem-sidekick.css.js';
+import { spectrum2 } from './spectrum-2.css.js';
 import { appStore } from './store/app.js';
 
 @customElement('aem-sidekick')
 export class AEMSidekick extends MobxLitElement {
   static get styles() {
-    return [style];
+    return [spectrum2, style];
   }
 
   constructor(config) {

diff --git a/src/extension/app/components/search/search.js b/src/extension/app/components/search/search.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// @ts-nocheck
+
+import { css } from 'lit';
+import { Search as SPSearch } from '@spectrum-web-components/search';
+
+export class Search extends SPSearch {
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        #textfield {
+            height: 32px;
+        }
+      `,
+    ];
+  }
+}
+
+customElements.define('sp-search', Search);