chore: Plan based access UI

[kyle-ssg]

Thanks for submitting a PR! Please check the boxes below:

• I have run pre-commit to check linting
• I have added information to docs/ if required so people know about the feature!
• I have filled in the "Changes" section below?
• I have filled in the "How did you test this code" section below?
• I have used a Conventional Commit title for this Pull Request

Changes

• Adds a consistent approach to plan based access by adding the following components

  • Plan based banner
  • Plan based page
  • Plan based setting
  • Plan based select option

• Adds a central location for paid features, their plan and their description

• Adds a consistent UX based on whether the app is running as SaaS or self-hosted
  

• Adds a video preview to some features, accessible via hovering the feature or on the page depending on the UI.

Testing

Testing, as free self hosted or saas view the following features

• 2FA
  

• Change Requests

• Audit Log
  

• Create 2nd project
  

• Flag owners
  

• RBAC
  
  
  

• Stale flag detection
  

• Realtime
  

• Versioning
  

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 14, 2024 10:45am
flagsmith-frontend-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 14, 2024 10:45am
flagsmith-frontend-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 14, 2024 10:45am

[github-actions]

Uffizzi Preview deployment-53816 was deleted.

[kyle-ssg]

The code looks good, but the multi-factor authentication feature doesn't show a banner when I'm on a free plan.

Screen.Recording.2024-07-11.at.12.01.46.PM.mov

Actually, I believe it does but this feature acts differently to others in that it's not organisation specific. If any of your orgs are paid it unlocks it.

Also, I've just added this for custom fields.

[rolodato]

Thanks for the updates! What I meant about SAML is that we're currently hiding the SAML tab entirely from non-Enterprise orgs here:

flagsmith/frontend/web/components/pages/OrganisationSettingsPage.js

Lines 236 to 239 in 40bdd54

	Utils.getPlanPermission(
	organisation.subscription?.plan,
	'SAML',
	) && Utils.getFlagsmithHasFeature('saml_configuration')

For example, a free self-hosted org sees this:

Instead of hiding the SAML tab, we could always show it to all users, but disable the contents of the SAML page depending on the org's plan, in the same way we're disabling features per plan instead of hiding them in this PR.

[kyle-ssg]

Ah good catch thanks, added here @rolodato

[rolodato]

There's a UI bug here - "Admin Settings" is meant to be a heading, but looks like a toggle switch:

This is what is used to look like:

I would also remove the saml_configuration flag check here, and later delete the flag entirely: https://github.com/Flagsmith/flagsmith/pull/4281/files#diff-670d08164663d0cb284ac1560669dc5f1af2a21b11e0e76178ca0186bbf4bf75R237

We are already recommending all of our customers use this UI section in our docs: https://docs.flagsmith.com/system-administration/authentication/SAML/. Adding another step for self-hosting customers (set up a Flagsmith-on-Flagsmith project and enable this flag) is unnecessary and reduces exposure to this functionality for free self-hosted customers.

[kyle-ssg]

@rolodato adjusted

[rolodato]

Great stuff!