feat(APP-1003): Iterate on permissions graph view from feedback

.changeset/app-1003-iterate-graph-view.md

@@ -0,0 +1,5 @@
+---
+"@aragon/app": minor
+---
+
+Add the DAO settings permissions page with list and graph views of the DAO's on-chain permissions, filterable by the hide-DAO-grants and hide-governing-body toggles.

.gitignore

@@ -62,6 +62,7 @@ next-env.d.ts
 .vscode
 .zed
 .tempor
+.omp/
 .agents/**
 !.agents/shared/
 !.agents/shared/**

apps/app/docs/slots/settings-slots.md

@@ -13,4 +13,4 @@ The settings module defines 5 slots for plugin-specific governance settings, upd
 | `SETTINGS_BUILD_PREPARE_PLUGIN_UPDATE_DATA` | Function | Builds the transaction data for preparing a plugin update | Token Voting, Multisig, Lock To Vote |
 | `SETTINGS_GET_UNINSTALL_HELPERS` | Function | Returns helper data needed for uninstalling the plugin | Token Voting, Multisig, Lock To Vote, SPP |
 | `SETTINGS_PLUGIN_TO_FORM_DATA` | Function | Converts plugin settings to form-compatible data for the settings editor | Token Voting, Lock To Vote |
-| `PERMISSION_CONDITION` | Component | Renders the condition-specific detail for a permission grant (routed by condition type) | Condition registry |
+| `SETTINGS_PERMISSION_CONDITION` | Component | SETTINGS_PERMISSION_CONDITION | Condition registry |

apps/app/package.json

@@ -34,6 +34,7 @@
         "@aragon/assistant-chat": "workspace:*",
         "@aragon/assistant-contracts": "workspace:*",
         "@aragon/gov-ui-kit": "catalog:",
+        "@dagrejs/dagre": "^3.0.0",
         "@floating-ui/react": "^0.27.20",
         "@number-flow/react": "^0.6.1",
         "@plausible-analytics/tracker": "^0.4.5",
@@ -50,6 +51,7 @@
         "@vercel/speed-insights": "^2.0.0",
         "@walletconnect/core": "^2.23.10",
         "@walletconnect/utils": "^2.23.10",
+        "@xyflow/react": "^12.11.2",
         "classnames": "catalog:",
         "deepmerge-ts": "^7.1.5",
         "framer-motion": "^12.42.2",

apps/app/src/assets/locales/en.json

@@ -3560,15 +3560,64 @@
           "title": "Permissions",
           "description": "All permissions configured in this DAO — who has access, to which contract, and under what conditions."
         },
+        "error": {
+          "title": "Unable to load permissions",
+          "description": "We couldn't load this DAO's permissions. Please try again later.",
+          "action": "Back to settings"
+        },
         "view": {
           "list": "List",
           "graph": "Graph"
+        },
+        "filters": {
+          "hideDaoPermissions": "Hide permissions granted to DAO",
+          "hideDaoPermissionsTooltip": "Hides permissions where the selected DAO appears under Who, including DAO-managed internal contracts such as clocks.",
+          "hideDaoPermissionsTooltipLabel": "About permissions granted to DAO",
+          "hideGoverningBodyPermissions": "Hide permissions on governing bodies",
+          "hideGoverningBodyPermissionsTooltip": "Hides permissions whose target is a governing body — a plugin nested inside another (subplugin).",
+          "hideGoverningBodyPermissionsTooltipLabel": "About governing body permissions"
+        },
+        "graphView": {
+          "node": {
+            "dao": "Primary DAO",
+            "linkedDao": "Linked DAO",
+            "plugin": "Aragon OSx Plugin",
+            "historicalPlugin": "Historical plugin",
+            "uninstalledPlugin": "Uninstalled plugin",
+            "actor": "Address",
+            "who": "Who",
+            "where": "Where"
+          },
+          "edge": {
+            "condition": "if {{condition}}"
+          },
+          "detail": {
+            "address": "Address",
+            "close": "Close",
+            "type": "Type",
+            "anyone": {
+              "title": "Open to anyone",
+              "description": "Any wallet or contract can act here — these permission flows have no on-chain requirement for who calls them."
+            }
+          },
+          "empty": {
+            "heading": "No permissions",
+            "description": "This view has no indexed permissions to visualize."
+          },
+          "fullscreen": {
+            "open": "Expand graph",
+            "close": "Exit full screen"
+          }
         }
       },
       "permissionsList": {
         "header": {
           "who": "Who",
           "where": "Where",
+          "whoTooltip": "The actor that receives the permission and can call the target contract.",
+          "whoTooltipLabel": "About Who",
+          "whereTooltip": "The contract where the permission applies.",
+          "whereTooltipLabel": "About Where",
           "permission": "Permission",
           "condition": "Condition"
         },
@@ -3577,11 +3626,10 @@
           "who": "Who",
           "where": "Where",
           "permission": "Permission",
-          "condition": "Condition",
-          "noCondition": "No condition"
+          "condition": "Condition"
         },
         "condition": {
-          "heading": "Condition detail"
+          "heading": "Condition"
         },
         "expandAll": "Expand all",
         "collapseAll": "Collapse all",
@@ -3590,9 +3638,9 @@
           "description": "This account has no indexed permissions."
         }
       },
-      "noConditionSlot": {
-        "heading": "No condition",
-        "description": "Functions guarded by this permission can be called by the granted address directly."
+      "unrecognizedConditionSlot": {
+        "heading": "Unrecognized condition",
+        "description": "This permission references a condition contract, but its condition data could not be resolved."
       },
       "votingPowerConditionSlot": {
         "token": "Token",
@@ -3601,10 +3649,12 @@
       "executeSelectorConditionSlot": {
         "description": "The ExecuteSelectorCondition authorizes the caller to execute actions only on explicitly authorized contract functions.",
         "allowedActions": "Allowed actions",
+        "anySelector": "Any selector",
         "noActions": "No allowed actions"
       },
       "membershipConditionSlot": {
         "memberOfMultisig": "Member of multisig",
+        "minApprovals": "Minimum approvals",
         "true": "True",
         "false": "False"
       },

apps/app/src/backendApiMocks.ts

@@ -1,4 +1,3 @@
-import { permissionsMocks } from './modules/settings/constants/permissionsMocks';
 import type { IBackendApiMock } from './shared/types';
 
-export const backendApiMocks: IBackendApiMock[] = [...permissionsMocks];
+export const backendApiMocks: IBackendApiMock[] = [];

apps/app/src/modules/governance/api/executeSelectorsService/domain/allowedAction.ts

@@ -1,6 +1,14 @@
 import type { IAllowedActionDecoded } from './allowedActionDecoded';
 
 export interface IAllowedAction {
+    /**
+     * Unique backend identifier of the allowed-action event.
+     */
+    id: string;
+    /**
+     * Address of the condition contract that gates this action.
+     */
+    conditionAddress: string;
     /**
      * Selector of the allowed action. `null` means native transfer.
      */

apps/app/src/modules/settings/components/executeSelectorConditionSlot/allowedActionsList.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import {
+    addressUtils,
+    ChainEntityType,
+    Link,
+    useBlockExplorer,
+} from '@aragon/gov-ui-kit';
+import { useTranslations } from '@/shared/components/translationsProvider';
+import type { IAllowedActionView } from './executeSelectorConditionSlotUtils';
+import { EMPTY_ALLOWED_ACTION_VALUE } from './executeSelectorConditionSlotUtils';
+
+export interface IAllowedActionsListProps {
+    actions: IAllowedActionView[];
+    chainId?: number;
+}
+
+export const AllowedActionsList: React.FC<IAllowedActionsListProps> = ({
+    actions,
+    chainId,
+}) => {
+    const { t } = useTranslations();
+    const { buildEntityUrl } = useBlockExplorer({ chainId });
+
+    return (
+        <div className="flex flex-col">
+            {actions.map((action) => (
+                <div
+                    className="flex min-w-0 flex-col gap-1 border-neutral-100 border-b py-3 first:pt-0 last:border-b-0 last:pb-0"
+                    key={action.id}
+                >
+                    <div className="flex min-w-0 items-center gap-2.5 leading-normal">
+                        <span className="truncate text-neutral-800">
+                            {action.functionName ??
+                                action.selector ??
+                                t(
+                                    'app.settings.executeSelectorConditionSlot.anySelector',
+                                )}
+                        </span>
+                        {action.selector != null && (
+                            <span className="shrink-0 text-neutral-500">
+                                {action.selector}
+                            </span>
+                        )}
+                    </div>
+                    <div className="flex min-w-0 items-center gap-2.5 text-neutral-500 leading-normal">
+                        <span className="truncate">
+                            {action.contractName ??
+                                t(
+                                    'app.settings.executeSelectorConditionSlot.unknownContract',
+                                )}
+                        </span>
+                        {action.target === EMPTY_ALLOWED_ACTION_VALUE ? (
+                            <span className="shrink-0">
+                                {EMPTY_ALLOWED_ACTION_VALUE}
+                            </span>
+                        ) : (
+                            <Link
+                                className="w-fit shrink-0"
+                                href={buildEntityUrl({
+                                    type: ChainEntityType.ADDRESS,
+                                    id: action.target,
+                                })}
+                                isExternal={true}
+                            >
+                                {addressUtils.truncateAddress(action.target)}
+                            </Link>
+                        )}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};

apps/app/src/modules/settings/components/executeSelectorConditionSlot/decodedAllowedActionsList.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { StateSkeletonBar } from '@aragon/gov-ui-kit';
+import { useAllowedActions } from '@/modules/governance/api/executeSelectorsService';
+import type { Network } from '@/shared/api/daoService';
+import { AllowedActionsList } from './allowedActionsList';
+import {
+    hasDecodedAllowedAction,
+    type IRawAllowedAction,
+    toAllowedActionViews,
+} from './executeSelectorConditionSlotUtils';
+
+interface IDecodedAllowedActionsListProps {
+    chainId?: number;
+    conditionAddress?: string;
+    network: Network;
+    pluginAddress: string;
+    rawAllowedActions: IRawAllowedAction[];
+}
+
+const AllowedActionsSkeleton: React.FC = () => (
+    <div className="flex flex-col gap-3">
+        <StateSkeletonBar width="70%" />
+        <StateSkeletonBar width="55%" />
+        <StateSkeletonBar width="65%" />
+    </div>
+);
+
+export const DecodedAllowedActionsList: React.FC<
+    IDecodedAllowedActionsListProps
+> = ({
+    chainId,
+    conditionAddress,
+    network,
+    pluginAddress,
+    rawAllowedActions,
+}) => {
+    const { data, isLoading } = useAllowedActions({
+        urlParams: { network, pluginAddress },
+        queryParams: { pageSize: 50 },
+    });
+    const decodedAllowedActions =
+        data?.pages
+            .flatMap((page) => page.data)
+            .filter((action) =>
+                hasDecodedAllowedAction(
+                    action,
+                    rawAllowedActions,
+                    conditionAddress,
+                ),
+            ) ?? [];
+    const decodedAllowedActionViews = decodedAllowedActions.map((action) => ({
+        contractName: action.decoded.contractName,
+        functionName: action.decoded.functionName,
+        id: action.id,
+        selector: action.selector,
+        target: action.target,
+    }));
+
+    if (isLoading) {
+        return <AllowedActionsSkeleton />;
+    }
+
+    if (decodedAllowedActionViews.length > 0) {
+        return (
+            <AllowedActionsList
+                actions={decodedAllowedActionViews}
+                chainId={chainId}
+            />
+        );
+    }
+
+    return (
+        <AllowedActionsList
+            actions={toAllowedActionViews(rawAllowedActions)}
+            chainId={chainId}
+        />
+    );
+};