From b3efd6ae6eabc9a121495a9e2b257b9650881b95 Mon Sep 17 00:00:00 2001 From: Cody Lloyd Date: Wed, 18 Dec 2024 14:02:45 -0700 Subject: [PATCH 1/4] DA Floodgate Copy UI * UI for the copy option Resolves: [MWPW-161908](https://jira.corp.adobe.com/browse/MWPW-161908) --- tools/floodbox/floodbox.css | 199 ++++++++++++++++++------- tools/floodbox/floodbox.js | 44 +++++- tools/floodbox/floodgate/floodgate.css | 15 +- tools/floodbox/floodgate/floodgate.js | 111 ++++++++++---- 4 files changed, 278 insertions(+), 91 deletions(-) diff --git a/tools/floodbox/floodbox.css b/tools/floodbox/floodbox.css index 59ba0cf30f..e03f479395 100644 --- a/tools/floodbox/floodbox.css +++ b/tools/floodbox/floodbox.css @@ -52,6 +52,14 @@ input[type='text'] { width: 100%; } +input[type="checkbox"] { + display: block; + margin: 0; + padding: 0; + width: 20px; + height: 20px; +} + textarea { width: 100%; min-height: 240px; @@ -124,20 +132,25 @@ select { padding: var(--spacing-400); } -.detail-card-remaining { +.detail-card-remaining, +.detail-card-fragments { background: rgb(202 248 250); } -.detail-card-total { +.detail-card-total, +.detail-card-pages { background: rgb(181 230 252); } +.detail-card-errors, .detail-card-promote-errors, .detail-card-preview-errors, .detail-card-publish-errors, +.detail-card-copy-errors, .url-list.url-list-promote-errors, .url-list.url-list-preview-errors, -.url-list.url-list-publish-errors { +.url-list.url-list-publish-errors +.url-list.url-list-copy-errors { background: rgb(255 214 209); } @@ -150,6 +163,10 @@ select { background: rgb(255 236 209); } +.detail-card-sheets { + background: #caffa4; +} + .detail-card .cancel-button { margin: 0; padding: 0; @@ -185,6 +202,14 @@ select { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } +.detail-cards.find-cards { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; +} + +.detail-cards.copy-preview-cards { + grid-template-columns: 1fr 1fr 1fr 1fr; +} + .toggle-list-icon, .icon-button { display: block; border: 0; @@ -229,6 +254,73 @@ select { display: block; } +.tab-ui { + margin: var(--spacing-400) 0; +} + +.tab-nav { + display: flex; + list-style-type: none; + padding: 5px; +} + +.tab-nav li button{ + opacity: 0.6; +} + +.tab-nav li.active button{ + opacity: 1; +} + +.tab-nav li button[disabled]::before { + background: rgb(0 0 0 / 5%); + border: 1px solid rgb(0 0 0 / 50%); +} + +.tabs { + background-color: var(--s2-gray-50); + padding: 20px; + border: 1px solid var(--s2-gray-200); +} + +.tab-step { + display: none; +} + +.tab-step.active { + display: block; +} + +.ribbon { + --r: .8em; + + padding-inline: calc(var(--r) + 1.5em); + line-height: 1.8; + clip-path: polygon(0 0,90% 0,100% 50%,90% 100%,0 100%, var(--r) 50%); + background: var(--s2-blue-800); + font-size: var(--s2-font-size-400); + font-weight: bold; + color: #fff; + border: none; + text-wrap: nowrap; +} + +.ribbon:disabled { + color: var(--s2-gray-800); +} + +.info-box { + background: var(--s2-gray-75); + border-radius: var(--s2-radius-100); + padding: var(--spacing-100) var(--spacing-400); + margin-top: var(--spacing-400); +} + +.info-box p { + margin-top: var(--spacing-50); + margin-bottom: var(--spacing-50); +} + .url-list { display: none; background: rgb(215 247 225); @@ -265,10 +357,6 @@ select { gap: 24px; } -.urls-result li:last-child { - margin: 0; -} - .url-path { white-space: nowrap; overflow-x: hidden; @@ -285,69 +373,70 @@ select { user-select: none; } -.tab-ui { - margin: var(--spacing-400) 0; +.url-checklist { + padding: 0; + margin: 0; + list-style: none; + border: 1px solid rgb(209 209 209); + border-radius: 18px; + overflow: hidden; + background: rgb(248 248 248); } -.tab-nav { +.url-checklist li { + margin-top: -1px; + margin-bottom: -1px; + padding: 24px; display: flex; - list-style-type: none; - padding: 5px; -} - -.tab-nav li button{ - opacity: 0.6; -} - -.tab-nav li.active button{ - opacity: 1; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: 24px; + border-top: 1px solid rgb(209 209 209); + border-bottom: 1px solid rgb(209 209 209); } -.tab-nav li button[disabled]::before { - background: rgb(0 0 0 / 5%); - border: 1px solid rgb(0 0 0 / 50%); +.url-checklist li:hover { + background: rgb(228 240 255); + border-top: 1px solid rgb(20 122 243); + border-bottom: 1px solid rgb(20 122 243); } -.tabs { - background-color: var(--s2-gray-50); - padding: 20px; - border: 1px solid var(--s2-gray-200); -} - -.tab-step { - display: none; +.path { + color: var(--s2-gray-800); + text-decoration: none; + flex: 1 1 auto; + word-break: break-all; } -.tab-step.active { - display: block; +.status { + display: flex; + justify-content: center; + align-items: center; + font-weight: 700; + border-radius: var(--s2-radius-200); + text-align: center; + color: #FFF; + text-transform: uppercase; + width: 72px; + padding: 4px 0; } -.ribbon { - --r: .8em; - - padding-inline: calc(var(--r) + 1.5em); - line-height: 1.8; - clip-path: polygon(0 0,90% 0,100% 50%,90% 100%,0 100%, var(--r) 50%); - background: var(--s2-blue-800); - font-size: var(--s2-font-size-400); - font-weight: bold; - color: #fff; - border: none; - text-wrap: nowrap; +.status-ready { + background: var(--s2-green); } -.ribbon:disabled { - color: var(--s2-gray-800); +.status-error { + background: var(--s2-red); } -.info-box { - background: var(--s2-gray-75); - border-radius: var(--s2-radius-100); - padding: var(--spacing-100) var(--spacing-400); - margin-top: var(--spacing-400); +.urls-result li:last-child { + margin: 0; } -.info-box p { - margin-top: var(--spacing-50); - margin-bottom: var(--spacing-50); +@media (width > 600px) { + .url-checklist li { + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + } } diff --git a/tools/floodbox/floodbox.js b/tools/floodbox/floodbox.js index 8a396789c0..2dc52d23f2 100644 --- a/tools/floodbox/floodbox.js +++ b/tools/floodbox/floodbox.js @@ -1,7 +1,7 @@ /* eslint-disable import/no-unresolved, no-underscore-dangle, class-methods-use-this */ import { html, nothing } from 'https://da.live/deps/lit/dist/index.js'; -export function handleToggleList(e) { +function handleToggleList(e) { const card = e.target.closest('.detail-card'); const { name } = e.target.closest('button').dataset; const list = this.shadowRoot.querySelector(`.url-list-${name}`); @@ -16,16 +16,22 @@ export function handleToggleList(e) { list.classList.add('is-expanded'); } -export function handleClear(event) { +function handleClear(event) { event.preventDefault(); const field = event.target.closest('button').previousElementSibling; field.value = ''; this._canPromote = false; + this._repoReady = false; this._gbExpPath = ''; this.requestUpdate(); } -export function updateTabUi(app, target, delay = 0) { +function handleCheck(app, url) { + url.checked = !url.checked; + app.urls = [...app.urls]; +} + +function updateTabUi(app, target, delay = 0) { setTimeout(() => { const tabNav = app.shadowRoot.querySelectorAll('.tab-nav li'); const tabs = app.shadowRoot.querySelectorAll('.tab-step'); @@ -38,7 +44,7 @@ export function updateTabUi(app, target, delay = 0) { }, delay); } -export function renderBadge(name, length, hasList = false, hasCancel = false) { +function renderBadge(name, length, hasList = false, hasCancel = false) { const lowerName = name.toLowerCase().replace(/ /g, '-'); const hasExpand = length > 0 && hasList; @@ -59,7 +65,7 @@ export function renderBadge(name, length, hasList = false, hasCancel = false) { `; } -export function renderList(name, urls) { +function renderList(name, urls) { const lowerName = name.toLowerCase().replace(/ /g, '-'); return html` @@ -79,11 +85,23 @@ export function renderList(name, urls) { `; } -export function renderClearButton() { +function renderChecklist(app, urls) { + return html` + + `; +} + +function renderClearButton() { return html``; } -export function renderTabNav(app, config) { +function renderTabNav(app, config) { return html` `; } + +export { + handleToggleList, + handleClear, + handleCheck, + updateTabUi, + renderBadge, + renderList, + renderChecklist, + renderClearButton, + renderTabNav, +}; diff --git a/tools/floodbox/floodgate/floodgate.css b/tools/floodbox/floodgate/floodgate.css index 9398266b9a..2973aaaf13 100644 --- a/tools/floodbox/floodgate/floodgate.css +++ b/tools/floodbox/floodgate/floodgate.css @@ -3,7 +3,16 @@ body { margin: 0 var(--spacing-1000); } -/* CHANGE ME TO SOMETHING ELSE WHEN WE FIGURE OUT WHERE TO PUT THIS INFORMATION */ -/* .button-row span { +.repo-row { + display: flex; + justify-content: flex-end; + margin: 0 var(--spacing-200) var(--spacing-400); +} + +.repo-row p { + margin: 0; +} + +.repo-row span { text-transform: uppercase; -} */ +} diff --git a/tools/floodbox/floodgate/floodgate.js b/tools/floodbox/floodgate/floodgate.js index 4addfbcbb1..7f643e00d7 100644 --- a/tools/floodbox/floodgate/floodgate.js +++ b/tools/floodbox/floodgate/floodgate.js @@ -44,10 +44,13 @@ export default class MiloFloodgate extends LitElement { this._startPreview = false; this._startPublish = false; this._filesToPromote = []; + this._validCopyPaths = {}; + this._findingPaths = false; + this._copyReady = false; this._filesToCopy = []; this._copiedFiles = []; this._copiedFilesCount = 0; - this._copiedErrorCount = 0; + this._copiedErrorList = []; this._copyDuration = 0; this._fragmentsAssets = []; this._startFindFragmentsAssets = false; @@ -65,6 +68,7 @@ export default class MiloFloodgate extends LitElement { this._promoteDuration = 0; this._previewDuration = 0; this._publishDuration = 0; + this._repoReady = false; this._selectedOption = 'fgCopy'; this._floodgateConfig = {}; @@ -288,8 +292,11 @@ export default class MiloFloodgate extends LitElement { console.log(`${status.statusCode} :: ${status.filePath}`); this._copiedFiles.push(status.filePath); // eslint-disable-next-line chai-friendly/no-unused-expressions - SUCCESS_CODES.includes(status.statusCode) ? this._copiedFilesCount += 1 - : this._copiedErrorCount += 1; + if (SUCCESS_CODES.includes(status.statusCode)) { + this._copiedFilesCount += 1; + } else { + this._copiedErrorList.push({ href: status.filePath, status: status.statusCode }); + } this.requestUpdate(); }, }); @@ -321,8 +328,14 @@ export default class MiloFloodgate extends LitElement { let paths = this.shadowRoot.querySelector('textarea[name="copyPaths"]').value; paths = paths.split('\n').map((path) => path.trim()).filter((path) => path.length > 0); + this._tabUiStart = true; + this._canCopyPaths = false; + this._findingPaths = true; + this.requestUpdate(); + // #1 - Validate paths const { valid, org, repo } = validatePaths(paths); + this._validCopyPaths = { valid, org, repo }; if (!valid) { this._invalidInput = true; this.requestUpdate(); @@ -332,16 +345,33 @@ export default class MiloFloodgate extends LitElement { // #2 - Find referenced fragments and assets this._startFindFragmentsAssets = true; + floodbox.updateTabUi(this, 'find', 100); await this.getReferencedFragmentsAndAssets(paths, org, repo); + this._copyReady = true; + this._canCopyPaths = true; + this.requestUpdate(); + } + + async handleCopyPreview(event) { + event.preventDefault(); + const { org, repo } = this._validCopyPaths; + // #3 - Copy files to pink site this._startCopy = true; + this._canCopyPaths = false; this._pinkSitePath = `/${org}/${repo}-pink`; + floodbox.updateTabUi(this, 'copy', 100); + this.requestUpdate(); await this.startCopy(org, repo); // #4 - Preview copied files this._startPreview = true; + floodbox.updateTabUi(this, 'preview', 100); await this.startPreview(org, `${repo}-pink`, this._copiedFiles); + + floodbox.updateTabUi(this, 'done', 100); + this.requestUpdate(); } togglePromoteIgnore(event) { @@ -385,6 +415,7 @@ export default class MiloFloodgate extends LitElement { this._sourceRepo = `${repo}`; this._floodgateRepo = `${repo}-pink`; this._canCopyPaths = valid; + this._repoReady = valid; this.requestUpdate(); } @@ -406,6 +437,7 @@ export default class MiloFloodgate extends LitElement { this._floodgateRepo = `${repo}`; } } + this._repoReady = valid; this.requestUpdate(); } @@ -419,7 +451,7 @@ export default class MiloFloodgate extends LitElement {

Done

${this._selectedOption === 'fgCopy' ? html` -

Selected files have been copied.

+

The files have been copied.

` : nothing} ${this._selectedOption === 'fgPromote' ? html`

Floodgated files have been promoted and previewed / published.

@@ -507,36 +539,52 @@ export default class MiloFloodgate extends LitElement { renderCopyPreviewInfo() { return html` -
+

Preview Copied Files

Previewing copied files...

-

Files previewed: ${this._previewedFilesCount} | Preview errors: ${this._previewErrorList.length}

+
+ ${floodbox.renderBadge('Remaining', this._copiedFilesCount - this._previewedFilesCount)} + ${floodbox.renderBadge('Preview Errors', this._previewErrorList.length, true)} + ${floodbox.renderBadge('Success', this._previewedFilesCount)} + ${floodbox.renderBadge('Total', this._previewedFilesCount + this._previewErrorList.length)} +
+
+ ${floodbox.renderList('Preview Errors', this._previewErrorList)} +

Duration: ~${this._previewDuration} seconds

- ${this._copiedToPink ? this.renderDone() : nothing} `; } renderCopyInfo() { return html` -
+

Copy Content to Pink Site

Copying files to "${this._pinkSitePath}"...

-

Files to copy: ${this._filesToCopy.length} | Files copied: ${this._copiedFilesCount}

-

Copy errors: ${this._copiedErrorCount}

+
+ ${floodbox.renderBadge('Remaining', this._filesToCopy.length - this._copiedFilesCount - this._copiedErrorList.length)} + ${floodbox.renderBadge('Copy Errors', this._copiedErrorList.length, true)} + ${floodbox.renderBadge('Success', this._copiedFilesCount)} + ${floodbox.renderBadge('Total', this._copiedFilesCount + this._copiedErrorList.length)} +
+
+ ${floodbox.renderList('Copy Errors', this._copiedErrorList)} +

Duration: ~${this._copyDuration} seconds

- ${this._startPreview ? this.renderCopyPreviewInfo() : nothing} `; } renderReferencedFragmentsAssetsInfo() { return html` -
-

Find Referenced Fragments and Assets

-

Found ${this._fragmentsAssets.size} referenced fragments and assets.

+
+

Find Files, Referenced Fragments and Assets

+
+ ${floodbox.renderBadge('Pages', this._filesToCopy.length)} + ${floodbox.renderBadge('Fragments', this._fragmentsAssets.size)} +
+ ${floodbox.renderChecklist(this, this._filesToCopy)}
- ${this._startCopy ? this.renderCopyInfo() : nothing} `; } @@ -546,6 +594,9 @@ export default class MiloFloodgate extends LitElement { ${floodbox.renderTabNav(this, this.tabUiCopy)}
${this._startFindFragmentsAssets ? this.renderReferencedFragmentsAssetsInfo() : nothing} + ${this._startCopy ? this.renderCopyInfo() : nothing} + ${this._startPreview ? this.renderCopyPreviewInfo() : nothing} + ${this._copiedToPink ? this.renderDone() : nothing}
` : nothing} ${this._selectedOption === 'fgPromote' ? html` @@ -561,6 +612,15 @@ export default class MiloFloodgate extends LitElement { `; } + renderRepoInfo() { + return html` +
+

Source Repo: ${this._sourceRepo}

+

Floodgate Repo: ${this._floodgateRepo}

+
+ `; + } + render() { return html`

Floodgate

@@ -590,7 +650,12 @@ export default class MiloFloodgate extends LitElement { ${this._selectedOption === 'fgCopy' ? html` - + ${!this._copyReady ? html` + + ` : nothing} + ${this._copyReady ? html` + + ` : nothing} ` : nothing} ${this._selectedOption === 'fgPromote' ? html`
@@ -603,20 +668,14 @@ export default class MiloFloodgate extends LitElement {
` : nothing} -
+
+
+ ${this._repoReady ? this.renderRepoInfo() : nothing} +
${this._tabUiStart ? this.renderTabUi() : nothing}
- ${this._startFindFragmentsAssets ? this.renderReferencedFragmentsAssetsInfo() : nothing} - ${this._canCopyPaths ? html` -
Source Repo: ${this._sourceRepo}
-
Floodgate Repo: ${this._floodgateRepo}
Source Repo: ${this._sourceRepo}
-
Floodgate Repo: ${this._floodgateRepo}
- ` : nothing} `; } } From 10827bbb8a4f703594182a324417ddb840d3edab Mon Sep 17 00:00:00 2001 From: Cody Lloyd Date: Wed, 18 Dec 2024 14:07:24 -0700 Subject: [PATCH 2/4] fix for copy error list color --- tools/floodbox/floodbox.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/floodbox/floodbox.css b/tools/floodbox/floodbox.css index e03f479395..5009237b29 100644 --- a/tools/floodbox/floodbox.css +++ b/tools/floodbox/floodbox.css @@ -149,7 +149,7 @@ select { .detail-card-copy-errors, .url-list.url-list-promote-errors, .url-list.url-list-preview-errors, -.url-list.url-list-publish-errors +.url-list.url-list-publish-errors, .url-list.url-list-copy-errors { background: rgb(255 214 209); } From cc8961990a2e46da3dd8aafffd8b7b8ff885f985 Mon Sep 17 00:00:00 2001 From: Cody Lloyd Date: Wed, 18 Dec 2024 15:02:03 -0700 Subject: [PATCH 3/4] pr feedback --- tools/floodbox/floodgate/floodgate.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tools/floodbox/floodgate/floodgate.js b/tools/floodbox/floodgate/floodgate.js index 7f643e00d7..adfe515f56 100644 --- a/tools/floodbox/floodgate/floodgate.js +++ b/tools/floodbox/floodgate/floodgate.js @@ -579,6 +579,7 @@ export default class MiloFloodgate extends LitElement { return html`

Find Files, Referenced Fragments and Assets

+ ${this._canCopyPaths ? html`

Press the "Copy" button above to copy these files.

` : nothing}
${floodbox.renderBadge('Pages', this._filesToCopy.length)} ${floodbox.renderBadge('Fragments', this._fragmentsAssets.size)} @@ -628,7 +629,7 @@ export default class MiloFloodgate extends LitElement {
${this._selectedOption === 'fgCopy' ? html`
- + ${floodbox.renderClearButton()}
` : nothing} From c4c646f6844a745a994a613cfb81c3594e9eec4e Mon Sep 17 00:00:00 2001 From: Cody Lloyd Date: Wed, 18 Dec 2024 16:44:33 -0700 Subject: [PATCH 4/4] more pr feedback about fragments and assets --- tools/floodbox/floodbox.css | 2 +- tools/floodbox/floodbox.js | 2 +- tools/floodbox/floodgate/floodgate.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/tools/floodbox/floodbox.css b/tools/floodbox/floodbox.css index 5009237b29..0d9fb63a9a 100644 --- a/tools/floodbox/floodbox.css +++ b/tools/floodbox/floodbox.css @@ -133,7 +133,7 @@ select { } .detail-card-remaining, -.detail-card-fragments { +.detail-card-fragments-assets { background: rgb(202 248 250); } diff --git a/tools/floodbox/floodbox.js b/tools/floodbox/floodbox.js index 2dc52d23f2..5e00e62846 100644 --- a/tools/floodbox/floodbox.js +++ b/tools/floodbox/floodbox.js @@ -45,7 +45,7 @@ function updateTabUi(app, target, delay = 0) { } function renderBadge(name, length, hasList = false, hasCancel = false) { - const lowerName = name.toLowerCase().replace(/ /g, '-'); + const lowerName = name.toLowerCase().replace(/\W+/g, '-'); const hasExpand = length > 0 && hasList; return html` diff --git a/tools/floodbox/floodgate/floodgate.js b/tools/floodbox/floodgate/floodgate.js index adfe515f56..f8591a2f17 100644 --- a/tools/floodbox/floodgate/floodgate.js +++ b/tools/floodbox/floodgate/floodgate.js @@ -582,7 +582,7 @@ export default class MiloFloodgate extends LitElement { ${this._canCopyPaths ? html`

Press the "Copy" button above to copy these files.

` : nothing}
${floodbox.renderBadge('Pages', this._filesToCopy.length)} - ${floodbox.renderBadge('Fragments', this._fragmentsAssets.size)} + ${floodbox.renderBadge('Fragments & Assets', this._fragmentsAssets.size)}
${floodbox.renderChecklist(this, this._filesToCopy)}