From 1d56b697c108e4ee60de95be7a8639d75b837aaa Mon Sep 17 00:00:00 2001
From: Chris Millar <cmillar@adobe.com>
Date: Sat, 23 Mar 2024 08:32:50 -0600
Subject: [PATCH] GH-54 - Search & Replace

* Creates new search tab in browse view
* Ability to search in current folder
* Ability to replace found search term

Resolves: GH-54
---
 blocks/browse/da-browse/da-browse.css | 106 ++++++++++++++---
 blocks/browse/da-browse/da-browse.js  | 106 +++++++++++++----
 blocks/browse/da-browse/da-search.css | 144 +++++++++++++++++++++++
 blocks/browse/da-browse/da-search.js  | 162 ++++++++++++++++++++++++++
 blocks/shared/constants.js            |   1 +
 5 files changed, 481 insertions(+), 38 deletions(-)
 create mode 100644 blocks/browse/da-browse/da-search.css
 create mode 100644 blocks/browse/da-browse/da-search.js

diff --git a/blocks/browse/da-browse/da-browse.css b/blocks/browse/da-browse/da-browse.css
index aac6c44c..37a36570 100644
--- a/blocks/browse/da-browse/da-browse.css
+++ b/blocks/browse/da-browse/da-browse.css
@@ -19,6 +19,62 @@ input, button {
   font-family: var(--body-font-family);
 }
 
+/* Tab List */
+.da-browse-tab-header {
+  display: flex;
+  gap: 18px;
+  margin-bottom: 24px;
+}
+
+.da-browse-tab-header button {
+  position: relative;
+  display: block;
+  background: none;
+  border: none;
+  padding: 0 0 6px;
+  margin: 0;
+  box-sizing: border-box;
+  color: #8f8f8f;
+}
+
+.da-browse-tab-header button::after {
+  display: block;
+  content: '';
+  position: absolute;
+  bottom: 0;
+  height: 3px;
+  width: 100%;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  background: #131313;
+  border-radius: 3px;
+}
+
+.da-browse-tab-header h2 {
+  margin: 0;
+  text-transform: uppercase;
+  font-size: 22px;
+}
+
+.da-browse-tab-header button[aria-selected="true"] {
+  color: #131313;
+}
+
+.da-browse-tab-header button[aria-selected="true"]::after {
+  opacity: 1;
+}
+
+
+.da-browse-tab-panel {
+  display: none;
+}
+
+.da-browse-tab-panel-active {
+  display: block;
+}
+
+/* Tab List End */
+
 /* Item List */
 
 .da-item-list {
@@ -193,6 +249,10 @@ input[type="checkbox"] {
 }
 
 /* Breadcrumbs */
+.da-breadcrumb {
+  margin-bottom: 12px;
+}
+
 .da-breadcrumb-list {
   margin: 0 0 12px;
   padding: 0;
@@ -264,9 +324,18 @@ input[type="checkbox"] {
   height: 32px;
 }
 
+@media (width >= 600px) {
+  .da-breadcrumb-list {
+    margin: 0;
+  }
+
+  .da-breadcrumb:has(da-search) .da-breadcrumb-list {
+    margin-bottom: 12px;
+  }
+}
+
 /* Actions */
 .da-actions-create {
-  margin: 0 0 12px;
   padding: 0;
   display: flex;
   list-style: none;
@@ -324,19 +393,21 @@ input[type="checkbox"] {
 
 .da-actions-new-button,
 .da-actions-button {
-    position: relative;
-    display: block;
-    font-size: 14px;
-    font-weight: 700;
-    padding: 0px 10px;
-    line-height: 24px;
-    background: #EFEFEF;
-    border: none;
-    font-size: 14px;
-    background-color: #cee4ff;
-    color: #066ce7;
-    border-radius: 6px;
-    cursor: pointer;
+  background-color: var(--spectrum-blue-800);
+  border-radius: 8px;
+  border: 2px solid var(--spectrum-blue-800);
+  border-color: var(--spectrum-blue-800);
+  color: #FFF;
+  display: inline-block;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+  padding: 5px 14px;
+  text-decoration: none;
+  outline-offset: 0;
+  outline-color: var(--spectrum-blue-800);
+  transition: outline-offset .2s;
 }
 
 .da-actions-new-button {
@@ -438,7 +509,7 @@ li.da-actions-menu-item button:hover {
 /* Empty list */
 .empty-list {
   border: 1px solid rgb(234, 234, 234);
-  background-color: rgb(255, 255, 255);
+  background-color: rgb(248, 248, 248);
   border-radius: 6px;
   display: flex;
   justify-content: center;
@@ -449,7 +520,12 @@ li.da-actions-menu-item button:hover {
 
 @media (min-width: 900px) {
   .da-breadcrumb {
+    margin-bottom: 12px;
     display: flex;
     gap: 24px;
   }
+
+  .da-breadcrumb:has(da-search) {
+    display: block;
+  }
 }
diff --git a/blocks/browse/da-browse/da-browse.js b/blocks/browse/da-browse/da-browse.js
index 23a3d490..67571273 100644
--- a/blocks/browse/da-browse/da-browse.js
+++ b/blocks/browse/da-browse/da-browse.js
@@ -1,19 +1,24 @@
-import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
-import { getDaAdmin } from '../../shared/constants.js';
+import { LitElement, html, nothing } from '../../../deps/lit/lit-core.min.js';
+import { DA_ORIGIN } from '../../shared/constants.js';
 import inlinesvg from '../../shared/inlinesvg.js';
-
-import getSheet from '../../shared/sheet.js';
 import { saveToDa, daFetch } from '../../shared/utils.js';
+import { getNx } from '../../../scripts/utils.js';
 
-const sheet = await getSheet('/blocks/browse/da-browse/da-browse.css');
+// Components
+import './da-search.js';
 
-const DA_ORIGIN = getDaAdmin();
+// Styles
+const { default: getStyle } = await import(`${getNx()}/utils/styles.js`);
+const style = await getStyle(import.meta.url);
 
+// Icons
 const ICONS = ['/blocks/browse/da-browse/img/Smock_Settings_18_N.svg'];
 
 export default class DaBrowse extends LitElement {
   static properties = {
     details: { attribute: false },
+    searchItems: { attribute: false },
+    _tabItems: { state: true },
     _listItems: { state: true },
     _selectedItems: { state: true },
     _breadcrumbs: {},
@@ -27,11 +32,22 @@ export default class DaBrowse extends LitElement {
 
   constructor() {
     super();
+    this.searchItems = [];
     this._selectedItems = [];
     this._createShow = '';
     this._createName = '';
     this._createFile = '';
     this._fileLabel = 'Select file';
+    this._tabItems = [
+      { id: 'browse', label: 'Browse', selected: true },
+      { id: 'search', label: 'Search', selected: false },
+    ];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.shadowRoot.adoptedStyleSheets = [style];
+    inlinesvg({ parent: this.shadowRoot, paths: ICONS });
   }
 
   async getList() {
@@ -132,12 +148,6 @@ export default class DaBrowse extends LitElement {
     this._fileLabel = 'Select file';
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.shadowRoot.adoptedStyleSheets = [sheet];
-    inlinesvg({ parent: this.shadowRoot, paths: ICONS });
-  }
-
   async update(props) {
     if (props.has('details')) {
       this._listItems = await this.getList();
@@ -202,6 +212,20 @@ export default class DaBrowse extends LitElement {
     this._canPaste = false;
   }
 
+  handleTab(idx) {
+    const current = this._tabItems.find((item) => item.selected);
+    if (this._tabItems[idx].id === current.id) return;
+    this._tabItems.forEach((item) => {
+      item.selected = false;
+    });
+    this._tabItems[idx].selected = true;
+    this._tabItems = [...this._tabItems];
+  }
+
+  handeSearchList(e) {
+    this.searchItems = e.detail.items;
+  }
+
   renderConfig(length, crumb, idx) {
     if (this.details.depth <= 2 && idx + 1 === length) {
       return html`
@@ -281,17 +305,19 @@ export default class DaBrowse extends LitElement {
       </div>`;
   }
 
-  listView() {
+  listView(items, allowSelect) {
     return html`
       <ul class="da-item-list">
-        ${this._listItems.map((item, idx) => html`
+        ${items.map((item, idx) => html`
           <li class="da-item-list-item">
             <div class="da-item-list-item-inner">
-              <div class="checkbox-wrapper">
-                <input type="checkbox" name="item-selected" id="item-selected-${idx}" .checked="${item.isChecked}" @click="${() => { this.toggleChecked(item); }}">
-                <label class="checkbox-label" for="item-selected-${idx}"></label>
-              </div>
-              <input type="checkbox" name="select" style="display: none;">
+              ${allowSelect ? html`
+                <div class="checkbox-wrapper">
+                  <input type="checkbox" name="item-selected" id="item-selected-${idx}" .checked="${item.isChecked}" @click="${() => { this.toggleChecked(item); }}">
+                  <label class="checkbox-label" for="item-selected-${idx}"></label>
+                </div>
+                <input type="checkbox" name="select" style="display: none;">
+              ` : nothing}
               <a href="${item.ext ? this.getEditPath(item) : `#${item.path}`}" class="da-item-list-item-title">
                 <span class="da-item-list-item-type ${item.ext ? 'da-item-list-item-type-file' : 'da-item-list-item-type-folder'} ${item.ext ? `da-item-list-item-icon-${item.ext}` : ''}">
                 </span>${item.name}
@@ -306,9 +332,12 @@ export default class DaBrowse extends LitElement {
     return html`<div class="empty-list"><h3>Empty</h3></div>`;
   }
 
-  render() {
+  renderSearch() {
+    return html`<da-search @updated=${this.handeSearchList} path=${this.details.fullpath} />`;
+  }
+
+  renderBreadCrumbs() {
     return html`
-      <h1>Browse</h1>
       <div class="da-breadcrumb">
         <ul class="da-breadcrumb-list">
           ${this._breadcrumbs.map((crumb, idx) => html`
@@ -320,9 +349,40 @@ export default class DaBrowse extends LitElement {
             </li>
           `)}
         </ul>
-        ${this.renderNew()}
+        ${this._tabItems[0].selected
+    ? this.renderNew()
+    : this.renderSearch()}
+      </div>
+    `;
+  }
+
+  renderSearchList() {
+    return html`${this.searchItems?.length > 0 ? this.listView(this.searchItems, false) : this.emptyView()}`;
+  }
+
+  renderBrowse() {
+    return html`${this._listItems?.length > 0 ? this.listView(this._listItems, true) : this.emptyView()}`;
+  }
+
+  render() {
+    return html`
+      <div class="da-browse-tab-list">
+        <div class="da-browse-tab-header">
+          ${this._tabItems.map((tab, idx) => html`
+            <button id="da-browse-tab-button-${tab.id}" @click=${() => this.handleTab(idx)} role="tab" aria-selected="${tab.selected}" aria-controls="tabpanel-${tab.id}">
+              <h2>${tab.label}</h2>
+            </button>
+          `)}
+        </div>
+        <div class="da-browse-tab-content">
+          ${this.renderBreadCrumbs()}
+          ${this._tabItems.map((tab) => html`
+            <div class="da-browse-tab-panel${tab.selected ? ' da-browse-tab-panel-active' : ''}" role="tabpanel" id="tabpanel-${tab.id}" aria-labelledby="da-browse-tab-button-${tab.id}">
+              ${tab.id === 'browse' ? this.renderBrowse() : this.renderSearchList()}
+            </div>
+          `)}
+        </div>
       </div>
-      ${this._listItems.length > 0 ? this.listView() : this.emptyView()}
       ${this._selectedItems.length > 0 ? html`${this.actionBar()}` : ''}
     `;
   }
diff --git a/blocks/browse/da-browse/da-search.css b/blocks/browse/da-browse/da-search.css
new file mode 100644
index 00000000..ae7cbb4c
--- /dev/null
+++ b/blocks/browse/da-browse/da-search.css
@@ -0,0 +1,144 @@
+:host {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 6px;
+}
+
+form {
+  display: grid;
+  grid-template-columns: 1fr 96px;
+  gap: 12px;
+  flex: 1 1 auto;
+}
+
+input {
+  font-family: var(--body-font-family);
+}
+
+input[type="text"] {
+  display: block;
+  margin: 0;
+  padding: 0 8px;
+  border: 2px solid #e1e1e1;
+  border-radius: 8px;
+}
+
+input[type="submit"] {
+  background-color: var(--spectrum-blue-800);
+  border-radius: 8px;
+  border: 2px solid var(--spectrum-blue-800);
+  border-color: var(--spectrum-blue-800);
+  color: #FFF;
+  display: inline-block;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+  padding: 5px 14px;
+  text-decoration: none;
+  outline-offset: 0;
+  outline-color: var(--spectrum-blue-800);
+  transition: outline-offset .2s;
+}
+
+input[type="submit"]:focus {
+  background-color: #3b63fb;
+  border: 2px solid #3b63fb;
+  outline-offset: 4px;
+}
+
+p {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  text-align: center;
+  background: rgb(225 225 225);
+  line-height: 32px;
+  border-radius: 8px;
+}
+
+.hide {
+  display: none;
+}
+
+.replace-pane {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 12px;
+}
+
+/* CHECKBOX */
+.checkbox-wrapper {
+  position: relative; 
+}
+
+input[type="checkbox"] {
+  appearance:  none;
+  position:  absolute; 
+  top:  -4px; 
+  left: -5px; 
+  height:  20px; 
+  width:  20px; 
+}
+
+.checkbox-label {
+  display:  flex; 
+  position:  relative;
+  font-size:  16px;
+  line-height: 18px;
+  font-weight:  400;
+  align-items:  center; 
+  justify-content:  flex-start;
+}
+
+.checkbox-label::before, 
+.checkbox-label::after {
+  pointer-events: none; 
+}
+
+.checkbox-label::before {
+  display:  flex; 
+  content: ' ';
+  height:  18px; 
+  width:  18px; 
+  border-radius: 2px;
+  background: rgb(221 221 221);
+}
+
+.checkbox-label::after {
+  position: absolute;
+  content: '';
+  display: flex;
+  height: 5px;
+  width: 12px;
+  top: 3px;
+  left: 1px;
+  border-bottom: 4px solid #FFF;
+  border-left: 4px solid #FFF;
+  background: none;
+  transform: rotate(-45deg) scale(0);
+  transition: transform 0.3s ease 0s, opacity 0.1s ease 0s;
+  transform-origin: center center;
+}
+
+.checkbox-label span {
+  margin: 0 0 0 4px;
+}
+
+.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label::before {
+  background: #1473E6;
+}
+
+.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label::after {
+  opacity:  1; 
+  transform: rotate(-45deg) scale(.8);
+}
+
+@media (width >= 600px) {
+  :host {
+    grid-template-columns: 1fr 1fr 1fr;
+    align-items: center;
+    gap: 12px;
+  }
+}
diff --git a/blocks/browse/da-browse/da-search.js b/blocks/browse/da-browse/da-search.js
new file mode 100644
index 00000000..32fc38dc
--- /dev/null
+++ b/blocks/browse/da-browse/da-search.js
@@ -0,0 +1,162 @@
+import { LitElement, html, nothing } from '../../../deps/lit/lit-core.min.js';
+import { DA_ORIGIN } from '../../shared/constants.js';
+import { daFetch } from '../../shared/utils.js';
+import { getNx } from '../../../scripts/utils.js';
+
+const { default: getStyle } = await import(`${getNx()}/utils/styles.js`);
+const style = await getStyle(import.meta.url);
+
+export default class DaSearch extends LitElement {
+  static properties = {
+    path: { type: String },
+    _term: { state: true },
+    _total: { state: true },
+    _matches: { state: true },
+    _action: { state: true },
+    _time: { state: true },
+    _items: { state: true },
+    showReplace: { state: true },
+  };
+
+  constructor() {
+    super();
+    this.setDefault();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.shadowRoot.adoptedStyleSheets = [style];
+  }
+
+  updateList() {
+    const opts = { detail: { items: this._items }, bubbles: true, composed: true };
+    const event = new CustomEvent('updated', opts);
+    this.dispatchEvent(event);
+  }
+
+  setDefault() {
+    this._items = [];
+    this._searchTotal = 0;
+    this._total = 0;
+    this._matches = 0;
+    this._time = null;
+  }
+
+  async searchFile(file, term) {
+    const resp = await daFetch(`${DA_ORIGIN}/source${file.path}`);
+    if (!resp.ok) return null;
+    const text = await resp.text();
+    const path = file.ext ? file.path.replace(`.${file.ext}`, '') : file.path;
+    return { ...file, name: path, match: text.includes(term) };
+  }
+
+  async getMatches(path, term) {
+    let folders = [path];
+    while (folders.length > 0) {
+      // eslint-disable-next-line no-loop-func
+      const searchFolders = folders.map(async (currentPath) => {
+        const resp = await daFetch(`${DA_ORIGIN}/list${currentPath}`);
+        if (!resp.ok) return [];
+        const json = await resp.json();
+        const searchFolderItems = json.map(async (item) => {
+          if (item.ext === 'html' || item.ext === 'json') {
+            this._total += 1;
+            const file = await this.searchFile(item, term);
+            if (file.match) {
+              this._matches += 1;
+              this._items = [...this._items, file];
+              this.updateList();
+            }
+          }
+          if (!item.ext) return item.path;
+          return null;
+        });
+
+        const newFolders = await Promise.all(searchFolderItems);
+        return newFolders.filter(Boolean);
+      });
+      const childFolders = await Promise.all(searchFolders);
+      folders = childFolders.flat();
+    }
+  }
+
+  async search(startPath, term) {
+    this._action = 'Found';
+    performance.mark('start-search');
+    await this.getMatches(startPath, term);
+    performance.mark('end-search');
+    performance.measure('search', 'start-search', 'end-search');
+    const searchTime = performance.getEntriesByName('search')[0].duration;
+    this._time = String(searchTime / 1000).substring(0, 4);
+  }
+
+  async handleSearch(e) {
+    e.preventDefault();
+    this.setDefault();
+    const [term] = e.target.elements;
+    if (!term.value) return;
+    this._term = term.value;
+    this.search(this.path, term.value);
+  }
+
+  async handleReplace(e) {
+    e.preventDefault();
+    const [replace] = e.target.elements;
+    if (!replace.value) return;
+
+    this._time = null;
+    this._action = 'Replaced';
+    this._total = this._matches;
+    this._matches = 0;
+    performance.mark('start-replace');
+
+    const replaced = this._items.map((match) => new Promise((resolve) => {
+      (async () => {
+        const resp = await daFetch(`${DA_ORIGIN}/source${match.path}`);
+        if (!resp.ok) return;
+        const text = await resp.text();
+        const replacedText = text.replaceAll(this._term, replace.value);
+        const blob = new Blob([replacedText], { type: 'text/html' });
+        const formData = new FormData();
+        formData.append('data', blob);
+        const opts = { method: 'PUT', body: formData };
+        const daResp = await daFetch(`${DA_ORIGIN}/source${match.path}`, opts);
+        if (!daResp.ok) return;
+        this._matches += 1;
+        resolve();
+      })();
+    }));
+    await Promise.all(replaced);
+    performance.mark('end-replace');
+    performance.measure('replace', 'start-replace', 'end-replace');
+    const replaceTime = performance.getEntriesByName('replace')[0].duration;
+    this._time = String(replaceTime / 1000).substring(0, 4);
+  }
+
+  async toggleReplace() {
+    this.showReplace = !this.showReplace;
+  }
+
+  render() {
+    return html`
+      <form @submit=${this.handleSearch}>
+        <input type="text" placeholder="Enter search" name="term"/>
+        <input type="submit" value="Search" />
+      </form>
+      <p>${this.matches && this._total ? html`${this._action} ${this._matches} of ${this._total} ${this._time ? html`in ${this._time} seconds.` : nothing}` : nothing}</p>
+      <div class="replace-pane">
+        <form class="da-replace-form${this.showReplace ? nothing : ' hide'}" @submit=${this.handleReplace}>
+          <input type="text" placeholder="Enter replace text" name="replace"/>
+          <input type="submit" value="Replace" />
+        </form>
+        <div class="checkbox-wrapper">
+          <input id="show-replace" type="checkbox" name="item-selected" @click="${this.toggleReplace}">
+          <label for="show-replace" class="checkbox-label"><span class="${this.showReplace ? 'hide' : nothing}">Replace</span></label>
+        </div>
+        <input type="checkbox" name="select" style="display: none;">
+      </div>
+    `;
+  }
+}
+
+customElements.define('da-search', DaSearch);
diff --git a/blocks/shared/constants.js b/blocks/shared/constants.js
index 65863b36..8efeb6b0 100644
--- a/blocks/shared/constants.js
+++ b/blocks/shared/constants.js
@@ -32,4 +32,5 @@ export const getDaAdmin = (() => {
   };
 })();
 
+export const DA_ORIGIN = (() => getDaEnv(window.location, 'da-admin', DA_ADMIN_ENVS))();
 export const COLLAB_ORIGIN = (() => getDaEnv(window.location, 'da-collab', DA_COLLAB_ENVS))();