feat(mobile): archive cloud workspaces, and a Cloud scope that matches desktop's sidebar

apps/desktop/src/renderer/routes/_authenticated/_dashboard/cloud-workspaces/components/CloudWorkspacesHeader/CloudWorkspacesHeader.tsx

@@ -1,5 +1,6 @@
 import { plural } from "@lingui/core/macro";
 import { Trans, useLingui } from "@lingui/react/macro";
+import type { CloudWorkspaceSort } from "@superset/shared/cloud-workspace-groups";
 import { AvatarStack } from "@superset/ui/atoms/AvatarStack";
 import {
 	DropdownMenu,
@@ -33,7 +34,6 @@ import {
 import { ToolbarMenuButton } from "renderer/routes/_authenticated/_dashboard/components/ToolbarMenuButton";
 import { WorkItemsSearch } from "renderer/routes/_authenticated/_dashboard/components/WorkItemsSearch";
 import type { CloudWorkspaceGrouping } from "renderer/routes/_authenticated/_dashboard/stores/listDisplayStore";
-import type { CloudWorkspaceSort } from "renderer/routes/_authenticated/_dashboard/utils/groupCloudWorkspaces";
 import { NO_PROJECT } from "../../constants";
 import type { CloudWorkspaceStatusFilter } from "../../types";
 

apps/desktop/src/renderer/routes/_authenticated/_dashboard/cloud-workspaces/components/CloudWorkspacesView/CloudWorkspacesView.tsx

@@ -1,4 +1,9 @@
-import { getActiveLocale } from "@superset/i18n/format";
+import { formatRelativePeriod } from "@superset/i18n/format";
+import {
+	groupCloudWorkspaces,
+	groupCloudWorkspacesByTime,
+	sortCloudWorkspaces,
+} from "@superset/shared/cloud-workspace-groups";
 import { useNavigate } from "@tanstack/react-router";
 import { useMemo, useState } from "react";
 import { useActiveOrganizationId } from "renderer/hooks/useActiveOrganizationId";
@@ -11,26 +16,12 @@ import { CloudWorkspacesList } from "renderer/routes/_authenticated/_dashboard/c
 import { useCloudWorkspaceListItems } from "renderer/routes/_authenticated/_dashboard/hooks/useCloudWorkspaceListItems";
 import { useUnarchiveCloudWorkspace } from "renderer/routes/_authenticated/_dashboard/hooks/useUnarchiveCloudWorkspace";
 import { useListDisplayStore } from "renderer/routes/_authenticated/_dashboard/stores/listDisplayStore";
-import {
-	type CloudWorkspacePeriod,
-	groupCloudWorkspaces,
-	groupCloudWorkspacesByTime,
-	sortCloudWorkspaces,
-} from "renderer/routes/_authenticated/_dashboard/utils/groupCloudWorkspaces";
 import { NO_PROJECT } from "../../constants";
 import type { CloudWorkspacesSearch } from "../../types";
 import { CloudWorkspacesHeader } from "../CloudWorkspacesHeader";
 
 const NOW_TICK_MS = 30_000;
 
-function formatPeriod({ unit, count }: CloudWorkspacePeriod) {
-	const locale = getActiveLocale();
-	const label = new Intl.RelativeTimeFormat(locale, {
-		numeric: "auto",
-	}).format(-count, unit);
-	return label.charAt(0).toLocaleUpperCase(locale) + label.slice(1);
-}
-
 interface CloudWorkspacesViewProps {
 	search: CloudWorkspacesSearch;
 }
@@ -172,7 +163,7 @@ export function CloudWorkspacesView({ search }: CloudWorkspacesViewProps) {
 							sort: display.sort,
 						}).map(({ period, workspaces: grouped }) => ({
 							key: `${period.unit}:${period.count}`,
-							label: formatPeriod(period),
+							label: formatRelativePeriod(period),
 							items: grouped.map(listItems.toItem),
 						})),
 					}

apps/desktop/src/renderer/routes/_authenticated/_dashboard/projects/$projectId/components/ProjectRecordScreen/ProjectRecordScreen.tsx

@@ -1,5 +1,6 @@
 import { useLingui } from "@lingui/react/macro";
 import { errorMessage } from "@superset/i18n/errors";
+import { sortCloudWorkspaces } from "@superset/shared/cloud-workspace-groups";
 import { toast } from "@superset/ui/sonner";
 import { useNavigate } from "@tanstack/react-router";
 import { useRef } from "react";
@@ -9,7 +10,6 @@ import { cloudTrpc } from "renderer/lib/cloud-trpc";
 import { StateScreenShell } from "renderer/routes/_authenticated/_dashboard/components/StateScreenShell";
 import { useCloudWorkspaceListItems } from "renderer/routes/_authenticated/_dashboard/hooks/useCloudWorkspaceListItems";
 import { useOrganizationPeople } from "renderer/routes/_authenticated/_dashboard/hooks/useOrganizationPeople";
-import { sortCloudWorkspaces } from "renderer/routes/_authenticated/_dashboard/utils/groupCloudWorkspaces";
 import { useInviteMember } from "renderer/routes/_authenticated/hooks/useInviteMember";
 import type { ProjectRecord, ProjectTab } from "../../types";
 import { ProjectRecordView } from "../ProjectRecordView";

apps/desktop/src/renderer/routes/_authenticated/_dashboard/stores/listDisplayStore/listDisplayStore.ts

@@ -1,4 +1,4 @@
-import type { CloudWorkspaceSort } from "renderer/routes/_authenticated/_dashboard/utils/groupCloudWorkspaces";
+import type { CloudWorkspaceSort } from "@superset/shared/cloud-workspace-groups";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 

apps/desktop/src/renderer/routes/_authenticated/_dashboard/utils/buildCloudSidebar/buildCloudSidebar.ts

@@ -1,3 +1,4 @@
+import { sortByLastAgentMessage } from "@superset/shared/cloud-workspace-groups";
 import type { CloudWorkspaceRow } from "renderer/hooks/useCloudWorkspaces";
 import type {
 	CloudSidebarEntry,
@@ -10,18 +11,6 @@ type SidebarWorkspace = Pick<
 	"id" | "createdAt" | "createdBy" | "agentStatusAt"
 >;
 
-const lastAgentMessageAt = (
-	workspace: Pick<CloudWorkspaceRow, "agentStatusAt" | "createdAt">,
-) => (workspace.agentStatusAt ?? workspace.createdAt).getTime();
-
-export function sortByLastAgentMessage<
-	Workspace extends Pick<CloudWorkspaceRow, "agentStatusAt" | "createdAt">,
->(workspaces: Workspace[]): Workspace[] {
-	return [...workspaces].sort(
-		(left, right) => lastAgentMessageAt(right) - lastAgentMessageAt(left),
-	);
-}
-
 export function isInCloudSidebar(
 	workspace: Pick<CloudWorkspaceRow, "createdBy">,
 	entry: CloudSidebarEntry | undefined,

apps/desktop/src/renderer/routes/_authenticated/_dashboard/utils/buildCloudSidebar/index.ts

@@ -3,5 +3,4 @@ export {
 	type CloudSidebarLayout,
 	isCloudWorkspaceRead,
 	isInCloudSidebar,
-	sortByLastAgentMessage,
 } from "./buildCloudSidebar";

apps/mobile/app/(authenticated)/(home)/filter/_layout.tsx

@@ -24,6 +24,14 @@ export default function FilterLayout() {
 				}}
 			/>
 			<Stack.Screen name="sort" options={{ title: t({ message: "Sort" }) }} />
+			<Stack.Screen
+				name="status"
+				options={{ title: t({ message: "Status" }) }}
+			/>
+			<Stack.Screen
+				name="creator"
+				options={{ title: t({ message: "Created by" }) }}
+			/>
 		</Stack>
 	);
 }

apps/mobile/app/(authenticated)/(home)/filter/creator.tsx

@@ -0,0 +1,3 @@
+import { CreatorFilterScreen } from "@/screens/(authenticated)/(home)/filter/creator";
+
+export default CreatorFilterScreen;

apps/mobile/app/(authenticated)/(home)/filter/status.tsx

@@ -0,0 +1,3 @@
+import { StatusFilterScreen } from "@/screens/(authenticated)/(home)/filter/status";
+
+export default StatusFilterScreen;

apps/mobile/app/(authenticated)/workspace/[id]/index.tsx

@@ -1,3 +1,7 @@
+import { useLocalSearchParams } from "expo-router";
 import { WorkspaceScreen } from "@/screens/(authenticated)/workspace/[id]/WorkspaceScreen";
 
-export default WorkspaceScreen;
+export default function WorkspaceRoute() {
+	const { id } = useLocalSearchParams<{ id: string }>();
+	return <WorkspaceScreen key={id} />;
+}

apps/mobile/hooks/useArchivedCloudWorkspaces/index.ts

@@ -0,0 +1,4 @@
+export {
+	getArchivedCloudWorkspacesQueryKey,
+	useArchivedCloudWorkspaces,
+} from "./useArchivedCloudWorkspaces";

apps/mobile/hooks/useArchivedCloudWorkspaces/useArchivedCloudWorkspaces.ts

@@ -0,0 +1,76 @@
+import { FEATURE_FLAGS } from "@superset/shared/constants";
+import { useQuery } from "@tanstack/react-query";
+import { TRPCClientError } from "@trpc/client";
+import { useFeatureFlag } from "posthog-react-native";
+import { useSession } from "@/lib/auth/client";
+import { apiClient } from "@/lib/trpc/client";
+import { withPendingCloudMoves } from "../useCloudWorkspaceActions/pendingCloudMoves";
+import type { CloudWorkspaceRow } from "../useCloudWorkspaces";
+import { reviveCloudWorkspaceRows } from "../useCloudWorkspaces/reviveCloudWorkspaceRow";
+
+const NO_ROWS: CloudWorkspaceRow[] = [];
+
+export function getArchivedCloudWorkspacesQueryKey(
+	organizationId: string | null,
+) {
+	return [
+		"cloud",
+		"cloudWorkspace",
+		"list",
+		organizationId,
+		"archived",
+	] as const;
+}
+
+export function useArchivedCloudWorkspaces({
+	enabled = true,
+}: {
+	enabled?: boolean;
+} = {}): {
+	workspaces: CloudWorkspaceRow[];
+	isReady: boolean;
+} {
+	const enabledByFlag = Boolean(useFeatureFlag(FEATURE_FLAGS.CLOUD_WORKSPACES));
+	const { data: session } = useSession();
+	const organizationId = session?.session?.activeOrganizationId ?? null;
+
+	const query = useQuery({
+		queryKey: getArchivedCloudWorkspacesQueryKey(organizationId),
+		enabled: enabled && enabledByFlag && organizationId !== null,
+		networkMode: "always" as const,
+		retry: (count, error) =>
+			!(error instanceof TRPCClientError && error.data?.code === "FORBIDDEN") &&
+			count < 2,
+		select: reviveCloudWorkspaceRows,
+		queryFn: async (): Promise<CloudWorkspaceRow[]> => {
+			if (!organizationId) return NO_ROWS;
+			try {
+				return withPendingCloudMoves(
+					"archived",
+					await apiClient.cloudWorkspace.list.query({
+						organizationId,
+						archived: true,
+					}),
+				);
+			} catch (error) {
+				if (
+					error instanceof TRPCClientError &&
+					error.data?.code === "FORBIDDEN"
+				) {
+					return NO_ROWS;
+				}
+				throw error;
+			}
+		},
+	});
+
+	return {
+		workspaces: query.data ?? NO_ROWS,
+		isReady:
+			!enabled ||
+			!enabledByFlag ||
+			organizationId === null ||
+			query.isSuccess ||
+			query.isError,
+	};
+}

apps/mobile/hooks/useCloudWorkspaceActions/pendingCloudMoves.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, test } from "bun:test";
+import type { CloudWorkspaceRow } from "@/hooks/useCloudWorkspaces";
+import {
+	beginCloudMove,
+	endCloudMove,
+	withPendingCloudMoves,
+} from "./pendingCloudMoves";
+
+const row = (id: string, status: CloudWorkspaceRow["status"]) =>
+	({ id, status }) as CloudWorkspaceRow;
+
+describe("withPendingCloudMoves", () => {
+	test("keeps a row in the list it was just moved to until the move ends", () => {
+		const archiving = row("a", "deleted");
+		beginCloudMove("archived", archiving);
+
+		const active = withPendingCloudMoves("active", [
+			row("a", "ready"),
+			row("b", "ready"),
+		]);
+		const archived = withPendingCloudMoves("archived", []);
+		expect(active.map((r) => r.id)).toEqual(["b"]);
+		expect(archived).toEqual([archiving]);
+
+		endCloudMove("a");
+		expect(
+			withPendingCloudMoves("active", [row("a", "ready")]).map((r) => r.id),
+		).toEqual(["a"]);
+	});
+});

apps/mobile/hooks/useCloudWorkspaceActions/pendingCloudMoves.ts

@@ -0,0 +1,34 @@
+import type { CloudWorkspaceRow } from "@/hooks/useCloudWorkspaces";
+
+type List = "active" | "archived";
+
+const pending = new Map<string, { to: List; row: CloudWorkspaceRow }>();
+
+export function beginCloudMove(to: List, row: CloudWorkspaceRow): void {
+	pending.set(row.id, { to, row });
+}
+
+export function endCloudMove(id: string): void {
+	pending.delete(id);
+}
+
+/**
+ * A list fetched while an archive or unarchive is in flight still has the row
+ * where it was; keep it where the user just moved it until the request settles.
+ */
+export function withPendingCloudMoves(
+	list: List,
+	rows: CloudWorkspaceRow[],
+): CloudWorkspaceRow[] {
+	if (pending.size === 0) return rows;
+	const kept = rows.filter((row) => {
+		const move = pending.get(row.id);
+		return !move || move.to === list;
+	});
+	for (const [id, move] of pending) {
+		if (move.to === list && !kept.some((row) => row.id === id)) {
+			kept.unshift(move.row);
+		}
+	}
+	return kept;
+}