From aa6429049e289630ea45c75e8216165a497740ee Mon Sep 17 00:00:00 2001
From: sua yoo <sua@webrecorder.org>
Date: Wed, 29 May 2024 13:40:56 -0700
Subject: [PATCH] Display name of user who last updated browser profile (#1834)

- Shows browser profile last modified or created by name, if available
- Moves backed-up status to browser profile subsection header
- Moves "Last Updated" column to last and displays user name on hover,
to match archived items list view
- Updates browser profile docs
---
 docs/user-guide/browser-profiles.md           |  6 +--
 .../src/pages/org/browser-profiles-detail.ts  | 49 ++++++++++++-------
 .../src/pages/org/browser-profiles-list.ts    | 41 +++++++++-------
 3 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/docs/user-guide/browser-profiles.md b/docs/user-guide/browser-profiles.md
index 914179fa..b3e55475 100644
--- a/docs/user-guide/browser-profiles.md
+++ b/docs/user-guide/browser-profiles.md
@@ -1,6 +1,6 @@
 # Browser Profiles
 
-Browser Profiles are saved instances of a web browsing session that can be reused to crawl websites as they were configured, with any cookies, saved login sessions, or browser settings. Using a pre-configured profile also means that content that can only be viewed by logged in users can be archived, without archiving the actual login credentials.
+Browser profiles are saved instances of a web browsing session that can be reused to crawl websites as they were configured, with any cookies, saved login sessions, or browser settings. Using a pre-configured profile also means that content that can only be viewed by logged in users can be archived, without archiving the actual login credentials.
 
 !!! tip "Best practice: Create and use web archiving-specific accounts for crawling with browser profiles"
 
@@ -47,8 +47,8 @@ Browser profiles don't just affect websites! Any of Brave's settings (available
 
 Sometimes websites will log users out or expire cookies or login sessions after a period of time. In these cases, when crawling the browser profile can still be loaded but may not behave as it did when it was initially set up.
 
-To update the profile, go to the profile's details page and press the _Edit Browser Profile_ button to load and interact with the sites that need to be re-configured. When finished, press the _Save Browser Profile_ button to return to the profile's details page.
+To update the profile, go to the profile's details page and press the _Configure Browser Profile_ button to load and interact with the sites that need to be re-configured. When finished, press the _Save Browser Profile_ button to return to the profile's details page. Profiles are automatically backed up on save if replica storage locations are configured.
 
 ### Editing Browser Profile Metadata
 
-To edit a browser profile's name and description, select _Edit Name and Description_ from the actions menu on the profile's details page.
+To edit a browser profile's name and description, select _Edit Metadata_ from the actions menu on the profile's details page.
diff --git a/frontend/src/pages/org/browser-profiles-detail.ts b/frontend/src/pages/org/browser-profiles-detail.ts
index 3e76139a..6e06cb14 100644
--- a/frontend/src/pages/org/browser-profiles-detail.ts
+++ b/frontend/src/pages/org/browser-profiles-detail.ts
@@ -132,21 +132,6 @@ export class BrowserProfilesDetail extends TailwindElement {
 
       <section class="mb-5 rounded-lg border px-4 py-2">
         <btrix-desc-list horizontal>
-          <btrix-desc-list-item label=${msg("Backup Status")}>
-            <div class="flex items-center gap-2">
-              ${isBackedUp
-                ? html`<sl-icon
-                      name="clouds-fill"
-                      class="text-success"
-                    ></sl-icon>
-                    ${msg("Backed Up")}`
-                : html`<sl-icon
-                      name="cloud-slash-fill"
-                      class="text-neutral-500"
-                    ></sl-icon>
-                    ${msg("Not Backed Up")}`}
-            </div>
-          </btrix-desc-list-item>
           <btrix-desc-list-item label=${msg("Crawler Release Channel")}>
             ${this.profile
               ? this.profile.crawlerChannel
@@ -189,14 +174,42 @@ export class BrowserProfilesDetail extends TailwindElement {
                 ></sl-format-date>`
               : nothing}
           </btrix-desc-list-item>
+          ${
+            // NOTE older profiles may not have "modified/created by" data
+            this.profile?.modifiedByName || this.profile?.createdByName
+              ? html`
+                  <btrix-desc-list-item label=${msg("Updated By")}>
+                    ${this.profile.modifiedByName || this.profile.createdByName}
+                  </btrix-desc-list-item>
+                `
+              : nothing
+          }
         </btrix-desc-list>
       </section>
 
       <div class="mb-7 flex flex-col gap-5 lg:flex-row">
         <section class="flex-1">
-          <h2 class="text-lg font-medium leading-none">
-            ${msg("Browser Profile")}
-          </h2>
+          <header class="flex items-center gap-2">
+            <sl-tooltip
+              content=${isBackedUp ? msg("Backed Up") : msg("Not Backed Up")}
+              ?disabled=${!this.profile}
+            >
+              <sl-icon
+                class="${isBackedUp
+                  ? "text-success"
+                  : "text-neutral-500"} text-base"
+                name=${this.profile
+                  ? isBackedUp
+                    ? "clouds-fill"
+                    : "cloud-slash-fill"
+                  : "clouds"}
+              ></sl-icon>
+            </sl-tooltip>
+            <h2 class="text-lg font-medium leading-none">
+              ${msg("Browser Profile")}
+            </h2>
+          </header>
+
           ${when(this.isCrawler, () =>
             this.browserId || this.isBrowserLoading
               ? html`
diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index 5ee3d33b..1503db63 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@@ -89,10 +89,10 @@ export class BrowserProfilesList extends LiteElement {
             ${msg("Name")}
           </btrix-table-header-cell>
           <btrix-table-header-cell>
-            ${msg("Last Updated")}
+            ${msg("Visited URLs")}
           </btrix-table-header-cell>
           <btrix-table-header-cell>
-            ${msg("Visited URLs")}
+            ${msg("Last Updated")}
           </btrix-table-header-cell>
           <btrix-table-header-cell>
             <span class="sr-only">${msg("Row Actions")}</span>
@@ -160,22 +160,6 @@ export class BrowserProfilesList extends LiteElement {
             ${data.name}
           </a>
         </btrix-table-cell>
-        <btrix-table-cell class="whitespace-nowrap">
-          <sl-format-date
-            lang=${getLocale()}
-            date=${
-              `${
-                // NOTE older profiles may not have "modified" data
-                data.modified || data.created
-              }Z` /** Z for UTC */
-            }
-            month="2-digit"
-            day="2-digit"
-            year="2-digit"
-            hour="2-digit"
-            minute="2-digit"
-          ></sl-format-date>
-        </btrix-table-cell>
         <btrix-table-cell>
           ${data.origins[0]}${data.origins.length > 1
             ? html`<sl-tooltip
@@ -188,6 +172,27 @@ export class BrowserProfilesList extends LiteElement {
               </sl-tooltip>`
             : nothing}
         </btrix-table-cell>
+        <btrix-table-cell class="whitespace-nowrap">
+          <sl-tooltip
+            content=${msg(str`By ${data.modifiedByName || data.createdByName}`)}
+            ?disabled=${!(data.modifiedByName || data.createdByName)}
+          >
+            <sl-format-date
+              lang=${getLocale()}
+              date=${
+                `${
+                  // NOTE older profiles may not have "modified" data
+                  data.modified || data.created
+                }Z` /** Z for UTC */
+              }
+              month="2-digit"
+              day="2-digit"
+              year="2-digit"
+              hour="2-digit"
+              minute="2-digit"
+            ></sl-format-date>
+          </sl-tooltip>
+        </btrix-table-cell>
         <btrix-table-cell class="px-1">
           ${this.renderActions(data)}
         </btrix-table-cell>