feat(APP-1003): Permissions page entry points and release changeset (5/5)

.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/src/modules/settings/components/daoHierarchy/daoHierarchy.tsx

@@ -12,7 +12,6 @@ import {
 } from '@aragon/gov-ui-kit';
 import type { IDao, ILinkedAccountSummary } from '@/shared/api/daoService';
 import { DaoTypeTag } from '@/shared/components/daoTypeTag';
-import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
 import { ResourceLink } from '@/shared/components/resourceLink';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { networkDefinitions } from '@/shared/constants/networkDefinitions';
@@ -157,18 +156,14 @@ const DaoInfo: React.FC<IDaoInfoProps> = ({ dao, permissionsHref }) => {
 export const DaoHierarchy: React.FC<IDaoHierarchyProps> = (props) => {
     const { dao, currentDaoId } = props;
 
-    const { isEnabled } = useFeatureFlags();
-
     const isViewingMainDao = dao.id === currentDaoId;
     const hasLinkedAccounts =
         dao.linkedAccounts != null && dao.linkedAccounts.length > 0;
 
     const getDaoAvatar = (d: IDao | ILinkedAccountSummary) =>
         ipfsUtils.cidToSrc(d.avatar);
 
-    const permissionsHref = isEnabled('permissionsPage')
-        ? daoUtils.getDaoUrl(dao, 'settings/permissions')
-        : undefined;
+    const permissionsHref = daoUtils.getDaoUrl(dao, 'settings/permissions');
 
     // If viewing main DAO with linked accounts, show accordion structure
     if (isViewingMainDao && hasLinkedAccounts) {

apps/app/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.test.tsx

@@ -2,7 +2,6 @@ import type * as GovUiKit from '@aragon/gov-ui-kit';
 import { GukModulesProvider } from '@aragon/gov-ui-kit';
 import { render, screen } from '@testing-library/react';
 import { Network } from '@/shared/api/daoService';
-import * as featureFlagsProvider from '@/shared/components/featureFlagsProvider';
 import { generateDao } from '@/shared/testUtils';
 import { ipfsUtils } from '@/shared/utils/ipfsUtils';
 import { DaoSettingsInfo, type IDaoSettingsInfoProps } from './daoSettingsInfo';
@@ -15,25 +14,6 @@ jest.mock('@aragon/gov-ui-kit', () => ({
 }));
 
 describe('<DaoSettingsInfo /> component', () => {
-    const useFeatureFlagsSpy = jest.spyOn(
-        featureFlagsProvider,
-        'useFeatureFlags',
-    );
-
-    const setPermissionsPageEnabled = (enabled: boolean) => {
-        useFeatureFlagsSpy.mockReturnValue({
-            isEnabled: (key) => key === 'permissionsPage' && enabled,
-        } as ReturnType<typeof featureFlagsProvider.useFeatureFlags>);
-    };
-
-    beforeEach(() => {
-        setPermissionsPageEnabled(true);
-    });
-
-    afterEach(() => {
-        useFeatureFlagsSpy.mockReset();
-    });
-
     const createTestComponent = (props?: Partial<IDaoSettingsInfoProps>) => {
         const completeProps: IDaoSettingsInfoProps = {
             dao: generateDao(),
@@ -99,15 +79,6 @@ describe('<DaoSettingsInfo /> component', () => {
         );
     });
 
-    it('does not render the permissions link when the flag is disabled', () => {
-        setPermissionsPageEnabled(false);
-        render(createTestComponent());
-
-        expect(
-            screen.queryByText(/daoSettingsInfo.permissionsLink/),
-        ).not.toBeInTheDocument();
-    });
-
     it('renders the correct definition values of the dao', () => {
         const dao = generateDao({
             name: 'Some DAO',

apps/app/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.tsx

@@ -8,7 +8,6 @@ import {
     Tag,
 } from '@aragon/gov-ui-kit';
 import type { IDao } from '@/shared/api/daoService';
-import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
 import { ResourceLink } from '@/shared/components/resourceLink';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { networkDefinitions } from '@/shared/constants/networkDefinitions';
@@ -26,7 +25,6 @@ export interface IDaoSettingsInfoProps {
 export const DaoSettingsInfo: React.FC<IDaoSettingsInfoProps> = (props) => {
     const { dao } = props;
     const { t } = useTranslations();
-    const { isEnabled } = useFeatureFlags();
 
     const daoAvatar = ipfsUtils.cidToSrc(dao.avatar);
 
@@ -112,23 +110,18 @@ export const DaoSettingsInfo: React.FC<IDaoSettingsInfoProps> = (props) => {
                         </div>
                     </DefinitionList.Item>
                 )}
-                {isEnabled('permissionsPage') && (
-                    <DefinitionList.Item
-                        description={t(
-                            'app.settings.daoSettingsInfo.permissionsDescription',
-                        )}
-                        link={{
-                            href: daoUtils.getDaoUrl(
-                                dao,
-                                'settings/permissions',
-                            ),
-                            isExternal: false,
-                        }}
-                        term={t('app.settings.daoSettingsInfo.permissions')}
-                    >
-                        {t('app.settings.daoSettingsInfo.permissionsLink')}
-                    </DefinitionList.Item>
-                )}
+                <DefinitionList.Item
+                    description={t(
+                        'app.settings.daoSettingsInfo.permissionsDescription',
+                    )}
+                    link={{
+                        href: daoUtils.getDaoUrl(dao, 'settings/permissions'),
+                        isExternal: false,
+                    }}
+                    term={t('app.settings.daoSettingsInfo.permissions')}
+                >
+                    {t('app.settings.daoSettingsInfo.permissionsLink')}
+                </DefinitionList.Item>
             </DefinitionList.Container>
         </Card>
     );