Labels (#8008)

- Closes enso-org/cloud-v2#676
- Adds labels to the dashboard:
- Filtering assets by label
- Creating new labels
- Displaying labels in "Labels" column
- Adding a new label to an existing asset (multi-select)

# Important Notes
WIP: Use a color picker with pre-defined colors, instead of randomly generated colors

app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/backend.ts

@@ -45,7 +45,11 @@ export const SecretId = newtype.newtypeConstructor<SecretId>()
 /** Unique identifier for an arbitrary asset. */
 export type AssetId = IdType[keyof IdType]
 
-/** Unique identifier for a file tag or project tag. */
+/** The name of an asset label. */
+export type LabelName = newtype.Newtype<string, 'LabelName'>
+export const LabelName = newtype.newtypeConstructor<LabelName>()
+
+/** Unique identifier for a label. */
 export type TagId = newtype.Newtype<string, 'TagId'>
 export const TagId = newtype.newtypeConstructor<TagId>()
 
@@ -240,29 +244,11 @@ export interface SecretInfo {
     id: SecretId
 }
 
-/** The type of asset a specific tag can be applied to. */
-export enum TagObjectType {
-    file = 'File',
-    project = 'Project',
-}
-
-/** A file tag or project tag. */
-export interface Tag {
-    /* eslint-disable @typescript-eslint/naming-convention */
-    organization_id: UserOrOrganizationId
+/** A label. */
+export interface Label {
     id: TagId
-    name: string
-    value: string
-    object_type: TagObjectType
-    object_id: string
-    /* eslint-enable @typescript-eslint/naming-convention */
-}
-
-/** Metadata uniquely identifying a file tag or project tag. */
-export interface TagInfo {
-    id: TagId
-    name: string
-    value: string
+    value: LabelName
+    color: LChColor
 }
 
 /** Type of application that a {@link Version} applies to.
@@ -352,6 +338,47 @@ export enum FilterBy {
     trashed = 'Trashed',
 }
 
+/** A color in the LCh colorspace. */
+export interface LChColor {
+    readonly lightness: number
+    readonly chroma: number
+    readonly hue: number
+    readonly alpha?: number
+}
+
+/** A pre-selected list of colors to be used in color pickers. */
+export const COLORS: readonly LChColor[] = [
+    /* eslint-disable @typescript-eslint/no-magic-numbers */
+    // Red
+    { lightness: 50, chroma: 66, hue: 7 },
+    // Orange
+    { lightness: 50, chroma: 66, hue: 34 },
+    // Yellow
+    { lightness: 50, chroma: 66, hue: 80 },
+    // Turquoise
+    { lightness: 50, chroma: 66, hue: 139 },
+    // Teal
+    { lightness: 50, chroma: 66, hue: 172 },
+    // Blue
+    { lightness: 50, chroma: 66, hue: 271 },
+    // Lavender
+    { lightness: 50, chroma: 66, hue: 295 },
+    // Pink
+    { lightness: 50, chroma: 66, hue: 332 },
+    // Light blue
+    { lightness: 50, chroma: 22, hue: 252 },
+    // Dark blue
+    { lightness: 22, chroma: 13, hue: 252 },
+    /* eslint-enable @typescript-eslint/no-magic-numbers */
+]
+
+/** Converts a {@link LChColor} to a CSS color string. */
+export function lChColorToCssColor(color: LChColor): string {
+    return 'alpha' in color
+        ? `lcha(${color.lightness}% ${color.chroma} ${color.hue} / ${color.alpha})`
+        : `lch(${color.lightness}% ${color.chroma} ${color.hue})`
+}
+
 // =================
 // === AssetType ===
 // =================
@@ -418,6 +445,7 @@ export interface BaseAsset {
      * (and currently safe) to assume it is always a {@link DirectoryId}. */
     parentId: DirectoryId
     permissions: UserPermission[] | null
+    labels: LabelName[] | null
 }
 
 /** Metadata uniquely identifying a directory entry.
@@ -454,6 +482,7 @@ export function createSpecialLoadingAsset(directoryId: DirectoryId): SpecialLoad
         parentId: directoryId,
         permissions: [],
         projectState: null,
+        labels: [],
     }
 }
 
@@ -471,6 +500,7 @@ export function createSpecialEmptyAsset(directoryId: DirectoryId): SpecialEmptyA
         parentId: directoryId,
         permissions: [],
         projectState: null,
+        labels: [],
     }
 }
 
@@ -603,16 +633,15 @@ export interface CreateSecretRequestBody {
 
 /** HTTP request body for the "create tag" endpoint. */
 export interface CreateTagRequestBody {
-    name: string
     value: string
-    objectType: TagObjectType
-    objectId: string
+    color: LChColor
 }
 
 /** URL query string parameters for the "list directory" endpoint. */
 export interface ListDirectoryRequestParams {
     parentId: string | null
     filterBy: FilterBy | null
+    labels: LabelName[] | null
     recentProjects: boolean
 }
 
@@ -623,11 +652,6 @@ export interface UploadFileRequestParams {
     parentDirectoryId: DirectoryId | null
 }
 
-/** URL query string parameters for the "list tags" endpoint. */
-export interface ListTagsRequestParams {
-    tagType: TagObjectType
-}
-
 /** URL query string parameters for the "list versions" endpoint. */
 export interface ListVersionsRequestParams {
     versionType: VersionType
@@ -782,12 +806,18 @@ export abstract class Backend {
     abstract getSecret(secretId: SecretId, title: string | null): Promise<Secret>
     /** Return the secret environment variables accessible by the user. */
     abstract listSecrets(): Promise<SecretInfo[]>
-    /** Create a file tag or project tag. */
-    abstract createTag(body: CreateTagRequestBody): Promise<TagInfo>
-    /** Return file tags or project tags accessible by the user. */
-    abstract listTags(params: ListTagsRequestParams): Promise<Tag[]>
-    /** Delete a file tag or project tag. */
-    abstract deleteTag(tagId: TagId): Promise<void>
+    /** Create a label used for categorizing assets. */
+    abstract createTag(body: CreateTagRequestBody): Promise<Label>
+    /** Return all labels accessible by the user. */
+    abstract listTags(): Promise<Label[]>
+    /** Set the full list of labels for a specific asset. */
+    abstract associateTag(
+        assetId: AssetId,
+        tagIds: LabelName[],
+        title: string | null
+    ): Promise<void>
+    /** Delete a label. */
+    abstract deleteTag(tagId: TagId, value: LabelName): Promise<void>
     /** Return a list of backend or IDE versions. */
     abstract listVersions(params: ListVersionsRequestParams): Promise<Version[]>
 }