feat(app): move policy page into settings (#7107)

Author: XiNiHa

packages/web/app/src/components/layouts/organization.tsx

@@ -45,7 +45,6 @@ export enum Page {
   Overview = 'overview',
   Members = 'members',
   Settings = 'settings',
-  Policy = 'policy',
   Support = 'support',
   Subscription = 'subscription',
 }
@@ -54,11 +53,9 @@ const OrganizationLayout_OrganizationFragment = graphql(`
   fragment OrganizationLayout_OrganizationFragment on Organization {
     id
     slug
-    viewerCanModifySchemaPolicy
     viewerCanCreateProject
     viewerCanManageSupportTickets
     viewerCanDescribeBilling
-    viewerCanAccessSettings
     viewerCanSeeMembers
     ...ProPlanBilling_OrganizationFragment
     ...RateLimitWarn_OrganizationFragment
@@ -156,24 +153,14 @@ export function OrganizationLayout({
                     </Link>
                   </TabsTrigger>
                 )}
-                <TabsTrigger variant="menu" value={Page.Policy} asChild>
+                <TabsTrigger variant="menu" value={Page.Settings} asChild>
                   <Link
-                    to="/$organizationSlug/view/policy"
+                    to="/$organizationSlug/view/settings"
                     params={{ organizationSlug: currentOrganization.slug }}
                   >
-                    Policy
+                    Settings
                   </Link>
                 </TabsTrigger>
-                {currentOrganization.viewerCanAccessSettings && (
-                  <TabsTrigger variant="menu" value={Page.Settings} asChild>
-                    <Link
-                      to="/$organizationSlug/view/settings"
-                      params={{ organizationSlug: currentOrganization.slug }}
-                    >
-                      Settings
-                    </Link>
-                  </TabsTrigger>
-                )}
                 {currentOrganization.viewerCanManageSupportTickets && (
                   <TabsTrigger variant="menu" value={Page.Support} asChild>
                     <Link

packages/web/app/src/components/layouts/project.tsx

@@ -29,7 +29,6 @@ import { ProjectSelector } from './project-selector';
 export enum Page {
   Targets = 'targets',
   Alerts = 'alerts',
-  Policy = 'policy',
   Settings = 'settings',
 }
 
@@ -52,7 +51,6 @@ const ProjectLayoutQuery = graphql(`
         viewerCanModifySchemaPolicy
         viewerCanCreateTarget
         viewerCanModifyAlerts
-        viewerCanModifySettings
       }
     }
   }
@@ -142,30 +140,17 @@ export function ProjectLayout({
                         </Link>
                       </TabsTrigger>
                     )}
-                    <TabsTrigger variant="menu" value={Page.Policy} asChild>
+                    <TabsTrigger variant="menu" value={Page.Settings} asChild>
                       <Link
-                        to="/$organizationSlug/$projectSlug/view/policy"
+                        to="/$organizationSlug/$projectSlug/view/settings"
                         params={{
                           organizationSlug: props.organizationSlug,
                           projectSlug: props.projectSlug,
                         }}
                       >
-                        Policy
+                        Settings
                       </Link>
                     </TabsTrigger>
-                    {currentProject.viewerCanModifySettings && (
-                      <TabsTrigger variant="menu" value={Page.Settings} asChild>
-                        <Link
-                          to="/$organizationSlug/$projectSlug/view/settings"
-                          params={{
-                            organizationSlug: props.organizationSlug,
-                            projectSlug: props.projectSlug,
-                          }}
-                        >
-                          Settings
-                        </Link>
-                      </TabsTrigger>
-                    )}
                   </TabsList>
                 </Tabs>
               ) : (

packages/web/app/src/components/project/settings/composition.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useMutation, useQuery } from 'urql';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { CardDescription } from '@/components/ui/card';
 import { CheckIcon } from '@/components/ui/icon';
+import { SubPageLayout, SubPageLayoutHeader } from '@/components/ui/page-content-layout';
 import { Spinner } from '@/components/ui/spinner';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { FragmentType, graphql, useFragment } from '@/gql';
@@ -90,14 +91,12 @@ export const CompositionSettings = (props: {
   };
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>
-          <a id="composition">Schema Composition</a>
-        </CardTitle>
-        <CardDescription>Configure how your schemas are composed.</CardDescription>
-      </CardHeader>
-      <CardContent>
+    <SubPageLayout>
+      <SubPageLayoutHeader
+        subPageTitle={<a id="composition">Schema Composition</a>}
+        description={<CardDescription>Configure how your schemas are composed.</CardDescription>}
+      />
+      <div>
         {projectQuery.fetching ? (
           <Spinner />
         ) : (
@@ -149,7 +148,7 @@ export const CompositionSettings = (props: {
             </TabsContent>
           </Tabs>
         )}
-      </CardContent>
-    </Card>
+      </div>
+    </SubPageLayout>
   );
 };