From dd580434038b1c334a1af6d6c550ea0e37c49b55 Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Tue, 19 Nov 2024 13:01:07 -0800
Subject: [PATCH] add frontend enum

---
 .../collections/collection-metadata-dialog.ts |  6 ++++--
 frontend/src/pages/org/collection-detail.ts   | 20 +++++++++++--------
 frontend/src/pages/org/collections-list.ts    | 14 +++++++++----
 frontend/src/types/collection.ts              |  8 +++++++-
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/collections/collection-metadata-dialog.ts b/frontend/src/features/collections/collection-metadata-dialog.ts
index e19f0b2524..f83e8eaff2 100644
--- a/frontend/src/features/collections/collection-metadata-dialog.ts
+++ b/frontend/src/features/collections/collection-metadata-dialog.ts
@@ -14,7 +14,7 @@ import { when } from "lit/directives/when.js";
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
 import type { MarkdownEditor } from "@/components/ui/markdown-editor";
-import type { Collection } from "@/types/collection";
+import { CollectionVisibility, type Collection } from "@/types/collection";
 import { isApiError } from "@/utils/api";
 import { maxLengthValidator } from "@/utils/form";
 
@@ -180,7 +180,9 @@ export class CollectionMetadataDialog extends BtrixElement {
       const body = JSON.stringify({
         name,
         description,
-        visibility: !isPublic ? "private" : "unlisted",
+        visibility: !isPublic
+          ? CollectionVisibility.Private
+          : CollectionVisibility.Unlisted,
       });
       let path = `/orgs/${this.orgId}/collections`;
       let method = "POST";
diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts
index 0814857d50..817e2e2e05 100644
--- a/frontend/src/pages/org/collection-detail.ts
+++ b/frontend/src/pages/org/collection-detail.ts
@@ -16,7 +16,7 @@ import type {
   APIPaginationQuery,
   APISortQuery,
 } from "@/types/api";
-import type { Collection } from "@/types/collection";
+import { CollectionVisibility, type Collection } from "@/types/collection";
 import type { ArchivedItem, Crawl, Upload } from "@/types/crawler";
 import type { CrawlState } from "@/types/crawlState";
 import { formatNumber, getLocale } from "@/utils/localization";
@@ -100,7 +100,7 @@ export class CollectionDetail extends BtrixElement {
       <header class="items-center gap-2 pb-3 md:flex">
         <div class="mb-2 flex w-full items-center gap-2 md:mb-0">
           <div class="flex size-8 items-center justify-center">
-            ${this.collection?.visibility === "unlisted"
+            ${this.collection?.visibility === CollectionVisibility.Unlisted
               ? html`
                   <sl-tooltip content=${msg("Shareable")}>
                     <sl-icon
@@ -121,7 +121,8 @@ export class CollectionDetail extends BtrixElement {
           </h1>
         </div>
         ${when(
-          this.isCrawler || this.collection?.visibility !== "private",
+          this.isCrawler ||
+            this.collection?.visibility !== CollectionVisibility.Private,
           () => html`
             <sl-button
               variant=${this.collection?.crawlCount ? "primary" : "default"}
@@ -240,7 +241,7 @@ export class CollectionDetail extends BtrixElement {
         style="--width: 32rem;"
       >
         ${
-          this.collection?.visibility === "unlisted"
+          this.collection?.visibility === CollectionVisibility.Unlisted
             ? ""
             : html`<p class="mb-3">
                 ${msg(
@@ -253,7 +254,8 @@ export class CollectionDetail extends BtrixElement {
           () => html`
             <div class="mb-5">
               <sl-switch
-                ?checked=${this.collection?.visibility === "unlisted"}
+                ?checked=${this.collection?.visibility ===
+                CollectionVisibility.Unlisted}
                 @sl-change=${(e: CustomEvent) =>
                   void this.onTogglePublic((e.target as SlCheckbox).checked)}
                 >${msg("Collection is Shareable")}</sl-switch
@@ -262,7 +264,7 @@ export class CollectionDetail extends BtrixElement {
           `,
         )}
         </div>
-        ${when(this.collection?.visibility === "unlisted", this.renderShareInfo)}
+        ${when(this.collection?.visibility === CollectionVisibility.Unlisted, this.renderShareInfo)}
         <div slot="footer" class="flex justify-end">
           <sl-button size="small" @click=${() => (this.showShareInfo = false)}
             >${msg("Done")}</sl-button
@@ -414,7 +416,7 @@ export class CollectionDetail extends BtrixElement {
             ${msg("Select Archived Items")}
           </sl-menu-item>
           <sl-divider></sl-divider>
-          ${this.collection?.visibility === "private"
+          ${this.collection?.visibility === CollectionVisibility.Private
             ? html`
                 <sl-menu-item
                   style="--sl-color-neutral-700: var(--success)"
@@ -746,7 +748,9 @@ export class CollectionDetail extends BtrixElement {
   };
 
   private async onTogglePublic(isPublic: boolean) {
-    const visibility = !isPublic ? "private" : "unlisted";
+    const visibility = !isPublic
+      ? CollectionVisibility.Private
+      : CollectionVisibility.Unlisted;
     const res = await this.api.fetch<{ updated: boolean }>(
       `/orgs/${this.orgId}/collections/${this.collectionId}`,
       {
diff --git a/frontend/src/pages/org/collections-list.ts b/frontend/src/pages/org/collections-list.ts
index adfa3db2e5..f111ac48b5 100644
--- a/frontend/src/pages/org/collections-list.ts
+++ b/frontend/src/pages/org/collections-list.ts
@@ -15,7 +15,11 @@ import type { PageChangeEvent } from "@/components/ui/pagination";
 import type { CollectionSavedEvent } from "@/features/collections/collection-metadata-dialog";
 import { pageHeader } from "@/layouts/pageHeader";
 import type { APIPaginatedList, APIPaginationQuery } from "@/types/api";
-import type { Collection, CollectionSearchValues } from "@/types/collection";
+import {
+  CollectionVisibility,
+  type Collection,
+  type CollectionSearchValues,
+} from "@/types/collection";
 import type { UnderlyingFunction } from "@/types/utils";
 import { isApiError } from "@/utils/api";
 import { formatNumber, getLocale } from "@/utils/localization";
@@ -500,7 +504,7 @@ export class CollectionsList extends BtrixElement {
       class="cursor-pointer select-none rounded border shadow transition-all focus-within:bg-neutral-50 hover:bg-neutral-50 hover:shadow-none"
     >
       <btrix-table-cell class="p-3">
-        ${col.visibility === "unlisted"
+        ${col.visibility === CollectionVisibility.Unlisted
           ? html`
               <sl-tooltip content=${msg("Shareable")}>
                 <sl-icon
@@ -572,7 +576,7 @@ export class CollectionsList extends BtrixElement {
             ${msg("Edit Metadata")}
           </sl-menu-item>
           <sl-divider></sl-divider>
-          ${col.visibility === "private"
+          ${col.visibility === CollectionVisibility.Private
             ? html`
                 <sl-menu-item
                   style="--sl-color-neutral-700: var(--success)"
@@ -647,7 +651,9 @@ export class CollectionsList extends BtrixElement {
   });
 
   private async onTogglePublic(coll: Collection, isPublic: boolean) {
-    const visibility = !isPublic ? "private" : "unlisted";
+    const visibility = !isPublic
+      ? CollectionVisibility.Private
+      : CollectionVisibility.Unlisted;
     await this.api.fetch(`/orgs/${this.orgId}/collections/${coll.id}`, {
       method: "PATCH",
       body: JSON.stringify({ visibility }),
diff --git a/frontend/src/types/collection.ts b/frontend/src/types/collection.ts
index 33c80ad8e2..c7302cc6e2 100644
--- a/frontend/src/types/collection.ts
+++ b/frontend/src/types/collection.ts
@@ -1,3 +1,9 @@
+export enum CollectionVisibility {
+  Private = "private",
+  Public = "public",
+  Unlisted = "unlisted",
+}
+
 export type Collection = {
   id: string;
   oid: string;
@@ -9,7 +15,7 @@ export type Collection = {
   totalSize: number;
   tags: string[];
   resources: string[];
-  visibility: string;
+  visibility: CollectionVisibility;
 };
 
 export type CollectionSearchValues = {