Merge pull request #389 from LIT-Protocol/feat/support-deleted-official-apps

feat(dashboard): improved support for deleted apps, support official apps

Author: awisniew207

packages/apps/app-dashboard/.env.example

@@ -24,3 +24,4 @@ VITE_DASHBOARD_URL=http://localhost:5173
 VITE_ENV=development
 
 VITE_FEATURED_APP_IDS=
+VITE_OFFICIAL_APP_IDS=

packages/apps/app-dashboard/src/components/developer-dashboard/ability/wrappers/ui/AbilityActionButtons.tsx

@@ -40,7 +40,7 @@ export function AbilityActionButtons({ onOpenMutation }: AbilityActionButtonsPro
           <ActionButton
             icon={Trash2}
             title="Delete Ability"
-            description="Permanently remove this ability"
+            description="Remove this ability (this can be undone)."
             onClick={() => onOpenMutation('delete-ability')}
             variant="danger"
             borderColor="rgb(254 202 202 / 0.5)"

packages/apps/app-dashboard/src/components/developer-dashboard/app/wrappers/ui/AppPublishedButtons.tsx

@@ -156,7 +156,7 @@ export function AppPublishedButtons({
               <ActionButton
                 icon={Trash2}
                 title="Delete App"
-                description="Permanently remove this app"
+                description="Remove this app (this can be undone)."
                 onClick={() => onOpenMutation('delete-app')}
                 variant="danger"
                 borderColor="rgb(254 202 202 / 0.5)"

packages/apps/app-dashboard/src/components/developer-dashboard/app/wrappers/ui/AppUnpublishedButtons.tsx

@@ -29,7 +29,7 @@ export function AppUnpublishedButtons({ onOpenMutation }: AppUnpublishedButtonsP
           <ActionButton
             icon={Trash2}
             title="Delete App"
-            description="Permanently remove this app"
+            description="Remove this app (this can be undone)."
             onClick={() => onOpenMutation('delete-app')}
             variant="danger"
             borderColor="rgb(254 202 202 / 0.5)"

packages/apps/app-dashboard/src/components/developer-dashboard/app/wrappers/ui/AppVersionUnpublishedButtons.tsx

@@ -62,7 +62,7 @@ export function AppVersionUnpublishedButtons({
         <ActionButton
           icon={Trash2}
           title="Delete Version"
-          description="Permanently remove this version"
+          description="Remove this version (this can be undone)."
           onClick={() => onOpenMutation('delete-version')}
           variant="danger"
           borderColor="rgb(254 202 202 / 0.3)"

packages/apps/app-dashboard/src/components/developer-dashboard/policy/wrappers/ui/PolicyActionButtons.tsx

@@ -40,7 +40,7 @@ export function PolicyActionButtons({ onOpenMutation }: PolicyActionButtonsProps
           <ActionButton
             icon={Trash2}
             title="Delete Policy"
-            description="Permanently remove this policy"
+            description="Remove this policy (this can be undone)."
             onClick={() => onOpenMutation('delete-policy')}
             variant="danger"
             borderColor="rgb(254 202 202 / 0.5)"

packages/apps/app-dashboard/src/components/explorer/ui/AppFilter.tsx

@@ -11,7 +11,7 @@ export function AppFilter({
 }: {
   searchQuery: string;
   setSearchQuery: (searchQuery: string) => void;
-  statusFilter: 'all' | 'prod' | 'test';
+  statusFilter: 'official' | 'all' | 'prod' | 'test';
   setStatusFilter: (statusFilter: string) => void;
   sortBy: 'name' | 'updated' | 'version';
   setSortBy: (sortBy: string) => void;
@@ -48,10 +48,10 @@ export function AppFilter({
                 style={fonts.heading}
               >
                 <option
-                  value="all"
+                  value="official"
                   className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
                 >
-                  All Status
+                  Official
                 </option>
                 <option
                   value="prod"
@@ -65,6 +65,12 @@ export function AppFilter({
                 >
                   Beta
                 </option>
+                <option
+                  value="all"
+                  className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
+                >
+                  All Apps
+                </option>
               </select>
             </div>
 

packages/apps/app-dashboard/src/components/explorer/ui/FeaturedApps.tsx

@@ -1,8 +1,11 @@
-import { App } from '@/types/developer-dashboard/appTypes';
+import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { App } from '@/types/developer-dashboard/appTypes';
 import { Logo } from '@/components/shared/ui/Logo';
 import { theme, fonts } from '@/components/user-dashboard/connect/ui/theme';
-import { useCallback } from 'react';
+import { env } from '@/config/env';
+
+const { VITE_FEATURED_APP_IDS } = env;
 
 interface FeaturedAppCardProps {
   app: App;
@@ -92,15 +95,14 @@ export function FeaturedApps({ apps, onNavigate }: FeaturedAppsProps) {
     [navigate, onNavigate],
   );
 
-  const featuredAppIdsString = import.meta.env.VITE_FEATURED_APP_IDS;
-  const featuredAppIds = featuredAppIdsString
-    ? featuredAppIdsString.split(',').map((id: string) => id.trim())
+  const featuredAppIds = VITE_FEATURED_APP_IDS
+    ? VITE_FEATURED_APP_IDS.split(',').map((id: string) => Number(id.trim()))
     : [];
 
   // Filter apps to only include featured ones, in the order specified
   const featuredApps = featuredAppIds
-    .map((appId: string) => {
-      const found = apps.find((app: App) => String(app.appId) === String(appId));
+    .map((appId: number) => {
+      const found = apps.find((app: App) => app.appId === appId);
       return found;
     })
     .filter((app: App | undefined): app is App => app !== undefined);

packages/apps/app-dashboard/src/components/explorer/views/AppExploreView.tsx

@@ -7,6 +7,9 @@ import { AppFilter } from '../ui/AppFilter';
 import { ExplorerNav } from '../ui/ExplorerNav';
 import { FeaturedApps } from '../ui/FeaturedApps';
 import { theme, fonts } from '@/components/user-dashboard/connect/ui/theme';
+import { env } from '@/config/env';
+
+const { VITE_OFFICIAL_APP_IDS } = env;
 
 interface ExploreViewProps {
   apps: App[];
@@ -16,13 +19,19 @@ export function AppExploreView({ apps }: ExploreViewProps) {
   const location = useLocation();
   const navigate = useNavigate();
   const [searchQuery, setSearchQuery] = useState('');
-  const [statusFilter, setStatusFilter] = useState<'all' | 'prod' | 'test'>('prod');
+  const [statusFilter, setStatusFilter] = useState<'official' | 'all' | 'prod' | 'test'>(
+    'official',
+  );
   const [sortBy, setSortBy] = useState<'name' | 'updated' | 'version'>('name');
   const [currentPage, setCurrentPage] = useState(1);
   const [showContent, setShowContent] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
   const appsPerPage = 9;
 
+  const officialAppIds = VITE_OFFICIAL_APP_IDS
+    ? VITE_OFFICIAL_APP_IDS.split(',').map((id: string) => Number(id.trim()))
+    : [];
+
   useEffect(() => {
     const fromTransition = location.state?.fromTransition;
     if (fromTransition) {
@@ -37,7 +46,16 @@ export function AppExploreView({ apps }: ExploreViewProps) {
       const matchesSearch =
         app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
         app.description?.toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesStatus = statusFilter === 'all' || app.deploymentStatus === statusFilter;
+
+      let matchesStatus = false;
+      if (statusFilter === 'official') {
+        matchesStatus = officialAppIds.includes(app.appId);
+      } else if (statusFilter === 'all') {
+        matchesStatus = true;
+      } else {
+        matchesStatus = app.deploymentStatus === statusFilter;
+      }
+
       return matchesSearch && matchesStatus;
     })
     .sort((a, b) => {

packages/apps/app-dashboard/src/components/user-dashboard/connect/ConnectPageWraper.tsx

@@ -7,6 +7,7 @@ import { AppVersionNotInRegistryConnect } from './AppVersionNotInRegistry';
 import { AuthConnectScreen } from './AuthConnectScreen';
 import { BadRedirectUriError } from './BadRedirectUriError';
 import { ConnectPage } from './ConnectPage';
+import { DeletedAppConnect } from './DeletedAppConnect';
 import { DisabledVersionConnect } from './DisabledVersionConnect';
 import { EditPermissionsCard } from './EditPermissionsCard';
 import { GeneralErrorScreen } from './GeneralErrorScreen';
@@ -128,6 +129,16 @@ export function ConnectPageWrapper() {
       <BadRedirectUriError redirectUri={redirectUri} authorizedUris={data.app?.redirectUris} />
     );
   }
+  // Check if app is deleted
+  else if (data.app?.isDeleted) {
+    content = (
+      <DeletedAppConnect
+        appData={data.app}
+        hasPermission={isPermitted}
+        readAuthInfo={{ authInfo, sessionSigs, isProcessing, error }}
+      />
+    );
+  }
   // Check for unpublished app version (check this early, before auth)
   else if (!data.app?.activeVersion) {
     // App has no active version set (version 1 not published)