Support for experimental plan management tab in UI

crates/cli/src/util.rs

@@ -218,6 +218,7 @@ pub fn site_config_from_config(
         minimum_password_complexity: password_config.minimum_complexity(),
         session_expiration,
         login_with_email_allowed: account_config.login_with_email_allowed,
+        plan_management_iframe_uri: experimental_config.plan_management_iframe_uri.clone(),
     })
 }
 

crates/config/src/sections/experimental.rs

@@ -75,6 +75,12 @@ pub struct ExperimentalConfig {
     /// Disabled by default
     #[serde(skip_serializing_if = "Option::is_none")]
     pub inactive_session_expiration: Option<InactiveSessionExpirationConfig>,
+
+    /// Experimental feature to show a plan management tab and iframe.
+    /// This value is passed through "as is" to the client without any
+    /// validation.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub plan_management_iframe_uri: Option<String>,
 }
 
 impl Default for ExperimentalConfig {
@@ -83,6 +89,7 @@ impl Default for ExperimentalConfig {
             access_token_ttl: default_token_ttl(),
             compat_token_ttl: default_token_ttl(),
             inactive_session_expiration: None,
+            plan_management_iframe_uri: None,
         }
     }
 }
@@ -92,6 +99,7 @@ impl ExperimentalConfig {
         is_default_token_ttl(&self.access_token_ttl)
             && is_default_token_ttl(&self.compat_token_ttl)
             && self.inactive_session_expiration.is_none()
+            && self.plan_management_iframe_uri.is_none()
     }
 }
 

crates/data-model/src/site_config.rs

@@ -90,4 +90,7 @@ pub struct SiteConfig {
 
     /// Whether users can log in with their email address.
     pub login_with_email_allowed: bool,
+
+    /// The iframe URL to show in the plan tab of the UI
+    pub plan_management_iframe_uri: Option<String>,
 }

crates/handlers/src/graphql/model/site_config.rs

@@ -56,6 +56,9 @@ pub struct SiteConfig {
 
     /// Whether users can log in with their email address.
     login_with_email_allowed: bool,
+
+    /// Experimental plan management iframe URI.
+    plan_management_iframe_uri: Option<String>,
 }
 
 #[derive(SimpleObject)]
@@ -102,6 +105,7 @@ impl SiteConfig {
             account_deactivation_allowed: data_model.account_deactivation_allowed,
             minimum_password_complexity: data_model.minimum_password_complexity,
             login_with_email_allowed: data_model.login_with_email_allowed,
+            plan_management_iframe_uri: data_model.plan_management_iframe_uri.clone(),
         }
     }
 }

crates/handlers/src/test_utils.rs

@@ -145,6 +145,7 @@ pub fn test_site_config() -> SiteConfig {
         minimum_password_complexity: 1,
         session_expiration: None,
         login_with_email_allowed: true,
+        plan_management_iframe_uri: None,
     }
 }
 

docs/config.schema.json

@@ -2557,6 +2557,10 @@
               "$ref": "#/definitions/InactiveSessionExpirationConfig"
             }
           ]
+        },
+        "plan_management_iframe_uri": {
+          "description": "Experimental feature to show a plan management tab and iframe. This value is passed through \"as is\" to the client without any validation.",
+          "type": "string"
         }
       }
     },

frontend/locales/en.json

@@ -122,6 +122,7 @@
     },
     "nav": {
       "devices": "Devices",
+      "plan": "Plan",
       "settings": "Settings"
     },
     "not_found_alert_title": "Not found.",

frontend/schema.graphql

@@ -1758,6 +1758,10 @@ type SiteConfig implements Node {
   """
   loginWithEmailAllowed: Boolean!
   """
+  Experimental plan management iframe URI.
+  """
+  planManagementIframeUri: String
+  """
   The ID of the site configuration.
   """
   id: ID!

frontend/src/gql/gql.ts

@@ -50,10 +50,11 @@ type Documents = {
     "\n  fragment UserEmailList_siteConfig on SiteConfig {\n    emailChangeAllowed\n    passwordLoginEnabled\n  }\n": typeof types.UserEmailList_SiteConfigFragmentDoc,
     "\n  fragment BrowserSessionsOverview_user on User {\n    id\n\n    browserSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n  }\n": typeof types.BrowserSessionsOverview_UserFragmentDoc,
     "\n  query UserProfile {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n        user {\n          ...AddEmailForm_user\n          ...UserEmailList_user\n          ...AccountDeleteButton_user\n          hasPassword\n          emails(first: 0) {\n            totalCount\n          }\n        }\n      }\n    }\n\n    siteConfig {\n      emailChangeAllowed\n      passwordLoginEnabled\n      accountDeactivationAllowed\n      ...AddEmailForm_siteConfig\n      ...UserEmailList_siteConfig\n      ...PasswordChange_siteConfig\n      ...AccountDeleteButton_siteConfig\n    }\n  }\n": typeof types.UserProfileDocument,
+    "\n  query PlanManagementTab {\n    siteConfig {\n      planManagementIframeUri\n    }\n  }\n": typeof types.PlanManagementTabDocument,
     "\n  query BrowserSessionList(\n    $first: Int\n    $after: String\n    $last: Int\n    $before: String\n    $lastActive: DateFilter\n  ) {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n\n        user {\n          id\n\n          browserSessions(\n            first: $first\n            after: $after\n            last: $last\n            before: $before\n            lastActive: $lastActive\n            state: ACTIVE\n          ) {\n            totalCount\n\n            edges {\n              cursor\n              node {\n                id\n                ...BrowserSession_session\n              }\n            }\n\n            pageInfo {\n              hasNextPage\n              hasPreviousPage\n              startCursor\n              endCursor\n            }\n          }\n        }\n      }\n    }\n  }\n": typeof types.BrowserSessionListDocument,
     "\n  query SessionsOverview {\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        ...BrowserSessionsOverview_user\n      }\n    }\n  }\n": typeof types.SessionsOverviewDocument,
     "\n  query AppSessionsList(\n    $before: String\n    $after: String\n    $first: Int\n    $last: Int\n    $lastActive: DateFilter\n  ) {\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        appSessions(\n          before: $before\n          after: $after\n          first: $first\n          last: $last\n          lastActive: $lastActive\n          state: ACTIVE\n        ) {\n          edges {\n            cursor\n            node {\n              __typename\n              ...CompatSession_session\n              ...OAuth2Session_session\n            }\n          }\n\n          totalCount\n          pageInfo {\n            startCursor\n            endCursor\n            hasNextPage\n            hasPreviousPage\n          }\n        }\n      }\n    }\n  }\n": typeof types.AppSessionsListDocument,
-    "\n  query CurrentUserGreeting {\n    viewer {\n      __typename\n      ... on User {\n        ...UserGreeting_user\n      }\n    }\n\n    siteConfig {\n      ...UserGreeting_siteConfig\n    }\n  }\n": typeof types.CurrentUserGreetingDocument,
+    "\n  query CurrentUserGreeting {\n    viewer {\n      __typename\n      ... on User {\n        ...UserGreeting_user\n      }\n    }\n\n    siteConfig {\n      ...UserGreeting_siteConfig\n      planManagementIframeUri\n    }\n  }\n": typeof types.CurrentUserGreetingDocument,
     "\n  query OAuth2Client($id: ID!) {\n    oauth2Client(id: $id) {\n      ...OAuth2Client_detail\n    }\n  }\n": typeof types.OAuth2ClientDocument,
     "\n  query CurrentViewer {\n    viewer {\n      __typename\n      ... on Node {\n        id\n      }\n    }\n  }\n": typeof types.CurrentViewerDocument,
     "\n  query DeviceRedirect($deviceId: String!, $userId: ID!) {\n    session(deviceId: $deviceId, userId: $userId) {\n      __typename\n      ... on Node {\n        id\n      }\n    }\n  }\n": typeof types.DeviceRedirectDocument,
@@ -106,10 +107,11 @@ const documents: Documents = {
     "\n  fragment UserEmailList_siteConfig on SiteConfig {\n    emailChangeAllowed\n    passwordLoginEnabled\n  }\n": types.UserEmailList_SiteConfigFragmentDoc,
     "\n  fragment BrowserSessionsOverview_user on User {\n    id\n\n    browserSessions(first: 0, state: ACTIVE) {\n      totalCount\n    }\n  }\n": types.BrowserSessionsOverview_UserFragmentDoc,
     "\n  query UserProfile {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n        user {\n          ...AddEmailForm_user\n          ...UserEmailList_user\n          ...AccountDeleteButton_user\n          hasPassword\n          emails(first: 0) {\n            totalCount\n          }\n        }\n      }\n    }\n\n    siteConfig {\n      emailChangeAllowed\n      passwordLoginEnabled\n      accountDeactivationAllowed\n      ...AddEmailForm_siteConfig\n      ...UserEmailList_siteConfig\n      ...PasswordChange_siteConfig\n      ...AccountDeleteButton_siteConfig\n    }\n  }\n": types.UserProfileDocument,
+    "\n  query PlanManagementTab {\n    siteConfig {\n      planManagementIframeUri\n    }\n  }\n": types.PlanManagementTabDocument,
     "\n  query BrowserSessionList(\n    $first: Int\n    $after: String\n    $last: Int\n    $before: String\n    $lastActive: DateFilter\n  ) {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n\n        user {\n          id\n\n          browserSessions(\n            first: $first\n            after: $after\n            last: $last\n            before: $before\n            lastActive: $lastActive\n            state: ACTIVE\n          ) {\n            totalCount\n\n            edges {\n              cursor\n              node {\n                id\n                ...BrowserSession_session\n              }\n            }\n\n            pageInfo {\n              hasNextPage\n              hasPreviousPage\n              startCursor\n              endCursor\n            }\n          }\n        }\n      }\n    }\n  }\n": types.BrowserSessionListDocument,
     "\n  query SessionsOverview {\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        ...BrowserSessionsOverview_user\n      }\n    }\n  }\n": types.SessionsOverviewDocument,
     "\n  query AppSessionsList(\n    $before: String\n    $after: String\n    $first: Int\n    $last: Int\n    $lastActive: DateFilter\n  ) {\n    viewer {\n      __typename\n\n      ... on User {\n        id\n        appSessions(\n          before: $before\n          after: $after\n          first: $first\n          last: $last\n          lastActive: $lastActive\n          state: ACTIVE\n        ) {\n          edges {\n            cursor\n            node {\n              __typename\n              ...CompatSession_session\n              ...OAuth2Session_session\n            }\n          }\n\n          totalCount\n          pageInfo {\n            startCursor\n            endCursor\n            hasNextPage\n            hasPreviousPage\n          }\n        }\n      }\n    }\n  }\n": types.AppSessionsListDocument,
-    "\n  query CurrentUserGreeting {\n    viewer {\n      __typename\n      ... on User {\n        ...UserGreeting_user\n      }\n    }\n\n    siteConfig {\n      ...UserGreeting_siteConfig\n    }\n  }\n": types.CurrentUserGreetingDocument,
+    "\n  query CurrentUserGreeting {\n    viewer {\n      __typename\n      ... on User {\n        ...UserGreeting_user\n      }\n    }\n\n    siteConfig {\n      ...UserGreeting_siteConfig\n      planManagementIframeUri\n    }\n  }\n": types.CurrentUserGreetingDocument,
     "\n  query OAuth2Client($id: ID!) {\n    oauth2Client(id: $id) {\n      ...OAuth2Client_detail\n    }\n  }\n": types.OAuth2ClientDocument,
     "\n  query CurrentViewer {\n    viewer {\n      __typename\n      ... on Node {\n        id\n      }\n    }\n  }\n": types.CurrentViewerDocument,
     "\n  query DeviceRedirect($deviceId: String!, $userId: ID!) {\n    session(deviceId: $deviceId, userId: $userId) {\n      __typename\n      ... on Node {\n        id\n      }\n    }\n  }\n": types.DeviceRedirectDocument,
@@ -267,6 +269,10 @@ export function graphql(source: "\n  fragment BrowserSessionsOverview_user on Us
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  query UserProfile {\n    viewerSession {\n      __typename\n      ... on BrowserSession {\n        id\n        user {\n          ...AddEmailForm_user\n          ...UserEmailList_user\n          ...AccountDeleteButton_user\n          hasPassword\n          emails(first: 0) {\n            totalCount\n          }\n        }\n      }\n    }\n\n    siteConfig {\n      emailChangeAllowed\n      passwordLoginEnabled\n      accountDeactivationAllowed\n      ...AddEmailForm_siteConfig\n      ...UserEmailList_siteConfig\n      ...PasswordChange_siteConfig\n      ...AccountDeleteButton_siteConfig\n    }\n  }\n"): typeof import('./graphql').UserProfileDocument;
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query PlanManagementTab {\n    siteConfig {\n      planManagementIframeUri\n    }\n  }\n"): typeof import('./graphql').PlanManagementTabDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -282,7 +288,7 @@ export function graphql(source: "\n  query AppSessionsList(\n    $before: String
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query CurrentUserGreeting {\n    viewer {\n      __typename\n      ... on User {\n        ...UserGreeting_user\n      }\n    }\n\n    siteConfig {\n      ...UserGreeting_siteConfig\n    }\n  }\n"): typeof import('./graphql').CurrentUserGreetingDocument;
+export function graphql(source: "\n  query CurrentUserGreeting {\n    viewer {\n      __typename\n      ... on User {\n        ...UserGreeting_user\n      }\n    }\n\n    siteConfig {\n      ...UserGreeting_siteConfig\n      planManagementIframeUri\n    }\n  }\n"): typeof import('./graphql').CurrentUserGreetingDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

frontend/src/gql/graphql.ts

@@ -1296,6 +1296,8 @@ export type SiteConfig = Node & {
   passwordLoginEnabled: Scalars['Boolean']['output'];
   /** Whether passwords are enabled and users can register using a password. */
   passwordRegistrationEnabled: Scalars['Boolean']['output'];
+  /** Experimental plan management iframe URI. */
+  planManagementIframeUri?: Maybe<Scalars['String']['output']>;
   /** The URL to the privacy policy. */
   policyUri?: Maybe<Scalars['Url']['output']>;
   /** The server name of the homeserver. */
@@ -1858,6 +1860,11 @@ export type UserProfileQuery = { __typename?: 'Query', viewerSession: { __typena
     & { ' $fragmentRefs'?: { 'AddEmailForm_SiteConfigFragment': AddEmailForm_SiteConfigFragment;'UserEmailList_SiteConfigFragment': UserEmailList_SiteConfigFragment;'PasswordChange_SiteConfigFragment': PasswordChange_SiteConfigFragment;'AccountDeleteButton_SiteConfigFragment': AccountDeleteButton_SiteConfigFragment } }
   ) };
 
+export type PlanManagementTabQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type PlanManagementTabQuery = { __typename?: 'Query', siteConfig: { __typename?: 'SiteConfig', planManagementIframeUri?: string | null } };
+
 export type BrowserSessionListQueryVariables = Exact<{
   first?: InputMaybe<Scalars['Int']['input']>;
   after?: InputMaybe<Scalars['String']['input']>;
@@ -1904,7 +1911,7 @@ export type CurrentUserGreetingQuery = { __typename?: 'Query', viewer: { __typen
     { __typename: 'User' }
     & { ' $fragmentRefs'?: { 'UserGreeting_UserFragment': UserGreeting_UserFragment } }
   ), siteConfig: (
-    { __typename?: 'SiteConfig' }
+    { __typename?: 'SiteConfig', planManagementIframeUri?: string | null }
     & { ' $fragmentRefs'?: { 'UserGreeting_SiteConfigFragment': UserGreeting_SiteConfigFragment } }
   ) };
 
@@ -2576,6 +2583,13 @@ fragment UserEmailList_siteConfig on SiteConfig {
   emailChangeAllowed
   passwordLoginEnabled
 }`) as unknown as TypedDocumentString<UserProfileQuery, UserProfileQueryVariables>;
+export const PlanManagementTabDocument = new TypedDocumentString(`
+    query PlanManagementTab {
+  siteConfig {
+    planManagementIframeUri
+  }
+}
+    `) as unknown as TypedDocumentString<PlanManagementTabQuery, PlanManagementTabQueryVariables>;
 export const BrowserSessionListDocument = new TypedDocumentString(`
     query BrowserSessionList($first: Int, $after: String, $last: Int, $before: String, $lastActive: DateFilter) {
   viewerSession {
@@ -2763,6 +2777,7 @@ export const CurrentUserGreetingDocument = new TypedDocumentString(`
   }
   siteConfig {
     ...UserGreeting_siteConfig
+    planManagementIframeUri
   }
 }
     fragment UserGreeting_user on User {
@@ -3281,6 +3296,27 @@ export const mockUserProfileQuery = (resolver: GraphQLResponseResolver<UserProfi
     options
   )
 
+/**
+ * @param resolver A function that accepts [resolver arguments](https://mswjs.io/docs/api/graphql#resolver-argument) and must always return the instruction on what to do with the intercepted request. ([see more](https://mswjs.io/docs/concepts/response-resolver#resolver-instructions))
+ * @param options Options object to customize the behavior of the mock. ([see more](https://mswjs.io/docs/api/graphql#handler-options))
+ * @see https://mswjs.io/docs/basics/response-resolver
+ * @example
+ * mockPlanManagementTabQuery(
+ *   ({ query, variables }) => {
+ *     return HttpResponse.json({
+ *       data: { siteConfig }
+ *     })
+ *   },
+ *   requestOptions
+ * )
+ */
+export const mockPlanManagementTabQuery = (resolver: GraphQLResponseResolver<PlanManagementTabQuery, PlanManagementTabQueryVariables>, options?: RequestHandlerOptions) =>
+  graphql.query<PlanManagementTabQuery, PlanManagementTabQueryVariables>(
+    'PlanManagementTab',
+    resolver,
+    options
+  )
+
 /**
  * @param resolver A function that accepts [resolver arguments](https://mswjs.io/docs/api/graphql#resolver-argument) and must always return the instruction on what to do with the intercepted request. ([see more](https://mswjs.io/docs/concepts/response-resolver#resolver-instructions))
  * @param options Options object to customize the behavior of the mock. ([see more](https://mswjs.io/docs/api/graphql#handler-options))