From 92eadc3ca3ba552c4093e5cbe27a1e184f00343b Mon Sep 17 00:00:00 2001
From: Dovid Levine <david@axepress.dev>
Date: Sat, 26 Oct 2024 19:22:34 +0300
Subject: [PATCH] dev: source setting screens from global

---
 packages/admin/components/fields/index.tsx    |  4 +-
 .../components/layout/header/menu/index.tsx   | 70 +++++++++++--------
 packages/admin/components/screen/context.tsx  | 13 ++--
 packages/admin/components/screen/screen.tsx   | 58 ++++-----------
 .../components/screen/setting-screen.tsx      | 10 +--
 packages/admin/components/screen/utils.ts     | 47 +++++++++++++
 packages/admin/contexts/settings-context.tsx  |  3 +-
 packages/admin/types.d.ts                     | 17 +++--
 src/Admin/Settings/AbstractSettings.php       | 18 ++++-
 src/Admin/Settings/AccessControlSettings.php  |  7 ++
 src/Admin/Settings/PluginSettings.php         |  7 ++
 11 files changed, 154 insertions(+), 100 deletions(-)
 create mode 100644 packages/admin/components/screen/utils.ts

diff --git a/packages/admin/components/fields/index.tsx b/packages/admin/components/fields/index.tsx
index 60ccb6ca..8a8da827 100644
--- a/packages/admin/components/fields/index.tsx
+++ b/packages/admin/components/fields/index.tsx
@@ -1,4 +1,4 @@
-import type { AllowedSettingKeys, SettingSchema } from '@/admin/types';
+import type { FieldSchema } from '@/admin/types';
 import { Field } from './field';
 
 export const Fields = ( {
@@ -9,7 +9,7 @@ export const Fields = ( {
 }: {
 	excludedProperties?: string[];
 	values: Record< string, unknown > | undefined;
-	fields: SettingSchema[ AllowedSettingKeys ];
+	fields: Record< string, FieldSchema >;
 	setValue: ( values: Record< string, unknown > ) => void;
 } ) => {
 	if ( ! values ) {
diff --git a/packages/admin/components/layout/header/menu/index.tsx b/packages/admin/components/layout/header/menu/index.tsx
index d72a85d8..dfd02277 100644
--- a/packages/admin/components/layout/header/menu/index.tsx
+++ b/packages/admin/components/layout/header/menu/index.tsx
@@ -2,7 +2,7 @@ import { Button, Icon, NavigableMenu } from '@wordpress/components';
 import { link as LinkSVG } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useCurrentScreen } from '@/admin/components/screen/context';
-import type { AllowedScreens } from '@/admin/components/screen/screen';
+import { getScreenForSetting } from '@/admin/components/screen/utils';
 
 import styles from './styles.module.scss';
 
@@ -13,43 +13,57 @@ const LinkIcon = () => {
 	return <Icon icon={ LinkSVG } className={ styles.linkIcon } size={ 16 } />;
 };
 
-const SCREEN_LABELS: Record< AllowedScreens, string > = {
-	providers: __( 'Login Providers', 'wp-graphql-headless-login' ),
-	'access-control': __( 'Access Control', 'wp-graphql-headless-login' ),
-	'plugin-settings': __( 'Misc', 'wp-graphql-headless-login' ),
+/**
+ * Builds and returns the menu object from the wpGraphQLLogin.settings global.
+ */
+export const getMenuObject = (): Record< string, string > => {
+	const settings = wpGraphQLLogin.settings;
+
+	const menu: Record< string, string > = {
+		providers: '', // We want this as the first key.
+	};
+
+	for ( const key in settings ) {
+		// @todo get providers from global after the refactor.
+		const menuTitle =
+			settings[ key ].label ||
+			__( 'Providers', 'wp-graphql-headless-login' );
+		const screen = getScreenForSetting( key );
+
+		menu[ screen ] = menuTitle;
+	}
+
+	return menu;
 };
 
 export const Menu = () => {
 	const { currentScreen, setCurrentScreen } = useCurrentScreen();
 
+	// Build the menu object of screens and labels from the wpGraphQLLogin?.settings.
+	const menuItems = getMenuObject();
+
 	return (
 		<NavigableMenu orientation="horizontal">
 			<ul role="menubar" className={ styles.menu }>
 				{
 					// Loop through the screen titles and create a button for each one.
-					Object.entries( SCREEN_LABELS ).map(
-						( [ screen, title ] ) => (
-							<li key={ screen }>
-								<Button
-									key={ screen }
-									className={
-										currentScreen === screen
-											? styles.active
-											: ''
-									}
-									variant="tertiary"
-									onClick={ () =>
-										setCurrentScreen(
-											screen as AllowedScreens
-										)
-									}
-									role="menuitem"
-								>
-									{ title }
-								</Button>
-							</li>
-						)
-					)
+					Object.entries( menuItems ).map( ( [ screen, title ] ) => (
+						<li key={ screen }>
+							<Button
+								key={ screen }
+								className={
+									currentScreen === screen
+										? styles.active
+										: ''
+								}
+								variant="tertiary"
+								onClick={ () => setCurrentScreen( screen ) }
+								role="menuitem"
+							>
+								{ title }
+							</Button>
+						</li>
+					) )
 				}
 				<li>
 					<Button
diff --git a/packages/admin/components/screen/context.tsx b/packages/admin/components/screen/context.tsx
index 609182af..6ef9d5b1 100644
--- a/packages/admin/components/screen/context.tsx
+++ b/packages/admin/components/screen/context.tsx
@@ -6,11 +6,11 @@ import {
 	useContext,
 	startTransition,
 } from 'react';
-import { SCREEN_MAP, type AllowedScreens } from './screen';
+import { isAllowedScreen } from './utils';
 
 const ScreenContext = createContext< {
-	currentScreen: AllowedScreens;
-	setCurrentScreen: ( screen: AllowedScreens ) => void;
+	currentScreen: string;
+	setCurrentScreen: ( screen: string ) => void;
 } >( {
 	currentScreen: 'providers',
 	setCurrentScreen: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
@@ -18,7 +18,7 @@ const ScreenContext = createContext< {
 
 export const ScreenProvider = ( { children }: PropsWithChildren ) => {
 	const [ currentScreen, setCurrentScreen ] =
-		useState< AllowedScreens >( 'providers' );
+		useState< string >( 'providers' );
 
 	// The screen is set as a query parameter in the URL.
 	useEffect( () => {
@@ -26,8 +26,9 @@ export const ScreenProvider = ( { children }: PropsWithChildren ) => {
 			const url = new URL( window.location.href );
 			const screen = url.searchParams.get( 'screen' );
 
-			if ( screen && screen in SCREEN_MAP ) {
-				setCurrentScreen( screen as AllowedScreens );
+			// Allowed screens appear in the WPGraphQLLogin.settings global.
+			if ( screen && isAllowedScreen( screen ) ) {
+				setCurrentScreen( screen );
 			}
 		} );
 	}, [] );
diff --git a/packages/admin/components/screen/screen.tsx b/packages/admin/components/screen/screen.tsx
index 1461fa85..02255976 100644
--- a/packages/admin/components/screen/screen.tsx
+++ b/packages/admin/components/screen/screen.tsx
@@ -1,59 +1,23 @@
-import { __ } from '@wordpress/i18n';
 import { Panel, PanelBody, PanelRow } from '@wordpress/components';
 import clsx from 'clsx';
 import { lazy, Suspense, type PropsWithChildren } from 'react';
 import { Loading } from '@/admin/components/ui/loading';
 import { useCurrentScreen } from './context';
 import { SettingsScreen } from './setting-screen';
-import type { AllowedSettingKeys } from '@/admin/types';
 
 import styles from './styles.module.scss';
+import { getSettingForScreen } from './utils';
+import { __ } from '@wordpress/i18n';
 
 const ClientSettingsScreen = lazy(
 	() => import( '../provider-config/ClientSettings' )
 );
 
-export type AllowedScreens = 'access-control' | 'providers' | 'plugin-settings';
-
-export const SCREEN_MAP: Record< AllowedScreens, AllowedSettingKeys > = {
-	'access-control': 'wpgraphql_login_access_control',
-	'plugin-settings': 'wpgraphql_login_settings',
-	providers: 'providers',
-};
-
 /**
  * The titles of the screens that are available in the admin.
  *
  * @todo get from the server.
  */
-const SCREEN_TITLES: Record< AllowedScreens, string > = {
-	'access-control': __(
-		'Access Control Settings',
-		'wp-graphql-headless-login'
-	),
-	'plugin-settings': __( 'Plugin Settings', 'wp-graphql-headless-login' ),
-	providers: __( 'Login Providers', 'wp-graphql-headless-login' ),
-};
-
-/**
- * The descriptions of the screens that are available in the admin.
- *
- * @todo get from the server.
- */
-const SCREEN_DESCRIPTIONS: Record< AllowedScreens, string > = {
-	'access-control': __(
-		'Configure the Access Control headers for the plugin.',
-		'wp-graphql-headless-login'
-	),
-	'plugin-settings': __(
-		'Configure the plugin settings.',
-		'wp-graphql-headless-login'
-	),
-	providers: __(
-		'Configure the Authentication Providers that are available to users.',
-		'wp-graphql-headless-login'
-	),
-};
 
 const Wrapper = ( {
 	title,
@@ -85,8 +49,18 @@ const Wrapper = ( {
 export const Screen = () => {
 	const { currentScreen } = useCurrentScreen();
 
-	const title = SCREEN_TITLES[ currentScreen ];
-	const description = SCREEN_DESCRIPTIONS[ currentScreen ];
+	const settingKey = getSettingForScreen( currentScreen );
+
+	// @todo get provider context from global.
+	const title =
+		wpGraphQLLogin?.settings[ settingKey ]?.title ||
+		__( 'Login Providers', 'wp-graphql-headless-login' );
+	const description =
+		wpGraphQLLogin?.settings[ settingKey ]?.description ||
+		__(
+			'Configure the Authentication Providers that are available to users.',
+			'wp-graphql-headless-login'
+		);
 
 	return (
 		<Suspense fallback={ <Loading /> }>
@@ -94,9 +68,7 @@ export const Screen = () => {
 				{ currentScreen === 'providers' ? (
 					<ClientSettingsScreen />
 				) : (
-					<SettingsScreen
-						settingKey={ SCREEN_MAP[ currentScreen ] }
-					/>
+					<SettingsScreen settingKey={ settingKey } />
 				) }
 			</Wrapper>
 		</Suspense>
diff --git a/packages/admin/components/screen/setting-screen.tsx b/packages/admin/components/screen/setting-screen.tsx
index 15f0af81..a07b5e15 100644
--- a/packages/admin/components/screen/setting-screen.tsx
+++ b/packages/admin/components/screen/setting-screen.tsx
@@ -4,13 +4,8 @@ import { useEffect } from 'react';
 import { Button, PanelBody, Spinner } from '@wordpress/components';
 import { Fields } from '@/admin/components/fields';
 import { useSettings } from '@/admin/contexts/settings-context';
-import type { AllowedSettingKeys } from '@/admin/types';
 
-export const SettingsScreen = ( {
-	settingKey,
-}: {
-	settingKey: AllowedSettingKeys;
-} ) => {
+export const SettingsScreen = ( { settingKey }: { settingKey: string } ) => {
 	const {
 		settings: allSettings,
 		updateSettings,
@@ -19,7 +14,8 @@ export const SettingsScreen = ( {
 		errorMessage,
 	} = useSettings();
 
-	const optionsSchema = wpGraphQLLogin?.settings?.[ settingKey ] || undefined;
+	const optionsSchema =
+		wpGraphQLLogin?.settings?.[ settingKey ]?.fields || undefined;
 
 	const settings = allSettings?.[ settingKey ] || undefined;
 
diff --git a/packages/admin/components/screen/utils.ts b/packages/admin/components/screen/utils.ts
new file mode 100644
index 00000000..b662f869
--- /dev/null
+++ b/packages/admin/components/screen/utils.ts
@@ -0,0 +1,47 @@
+/**
+ * Maps a plugin setting key to to its corresponding screen.
+ *
+ * @param {string} setting The setting to map to a screen. E.g. `wpgraphql_login_access_control`.
+ */
+export const getScreenForSetting = ( setting: string ): string => {
+	const settingPrefix = 'wpgraphql_login_';
+
+	// First, strip the prefix.
+	const settingWithoutPrefix = setting.replace( settingPrefix, '' );
+
+	// Then, convert to `kebab-case`.
+	return settingWithoutPrefix.replace( /_/g, '-' );
+};
+
+/**
+ * Maps a screen to it's corresponding plugin setting.
+ *
+ * @param {string} screen The screen to map to a setting. E.g. `access-control`.
+ */
+export const getSettingForScreen = ( screen: string ): string => {
+	const settingPrefix = 'wpgraphql_login_';
+
+	// First, convert to `snake_case`.
+	const snakeCaseScreen = screen.replace( /-/g, '_' );
+
+	// Then, add the prefix.
+	const setting = settingPrefix + snakeCaseScreen;
+
+	// Ensure lowercase
+	return setting.toLowerCase();
+};
+
+/**
+ * Checks whether a screen is allowed.
+ *
+ * Allowed screens are the keys defined in the `WPGraphQLLogin.settings` global.
+ *
+ * @param {string} screen The screen to check.
+ */
+export const isAllowedScreen = ( screen: string ): boolean => {
+	const allowedSettings = Object.keys( wpGraphQLLogin.settings );
+
+	const settingToCheck = getSettingForScreen( screen );
+
+	return allowedSettings.includes( settingToCheck );
+};
diff --git a/packages/admin/contexts/settings-context.tsx b/packages/admin/contexts/settings-context.tsx
index 54df5c7f..fb924ece 100644
--- a/packages/admin/contexts/settings-context.tsx
+++ b/packages/admin/contexts/settings-context.tsx
@@ -6,13 +6,12 @@ import {
 	useState,
 } from 'react';
 import apiFetch from '@wordpress/api-fetch';
-import type { AllowedSettingKeys } from '@/admin/types';
 
 const REST_ENDPOINT = 'wp-graphql-login/v1/settings';
 
 type AllowedStatuses = 'saving' | 'complete' | undefined;
 
-type SettingType = Record< AllowedSettingKeys, Record< string, unknown > >;
+type SettingType = Record< string, Record< string, unknown > >;
 
 const SettingsContext = createContext< {
 	settings: SettingType | undefined;
diff --git a/packages/admin/types.d.ts b/packages/admin/types.d.ts
index 347eb6b1..8178c27f 100644
--- a/packages/admin/types.d.ts
+++ b/packages/admin/types.d.ts
@@ -16,11 +16,6 @@ declare global {
 	};
 }
 
-type AllowedSettingKeys =
-	| 'providers'
-	| 'wpgraphql_login_settings'
-	| 'wpgraphql_login_access_control';
-
 type AllowedConditionalLogicOperators = '==' | '!=' | '>' | '<' | '>=' | '<=';
 
 type FieldSchema = {
@@ -45,10 +40,14 @@ type FieldSchema = {
 	required?: boolean;
 };
 
-type SettingSchema = Record<
-	AllowedSettingKeys,
-	Record< string, FieldSchema >
->;
+type SettingSchema = {
+	[ key: string ]: {
+		title: string;
+		description: string;
+		label: string;
+		fields: Record< string, FieldSchema >;
+	}
+};
 
 type ProviderSettingType = {
 	name: string;
diff --git a/src/Admin/Settings/AbstractSettings.php b/src/Admin/Settings/AbstractSettings.php
index d60661c8..029fa526 100644
--- a/src/Admin/Settings/AbstractSettings.php
+++ b/src/Admin/Settings/AbstractSettings.php
@@ -57,6 +57,11 @@ abstract public static function get_slug(): string;
 	 */
 	abstract public function get_title(): string;
 
+	/**
+	 * The label used in the menu
+	 */
+	abstract public function get_label(): string;
+
 	/**
 	 * The screen description.
 	 */
@@ -120,7 +125,7 @@ public function get_register_setting_config(): array {
 	/**
 	 * Get the config used to render the settings in the UI.
 	 *
-	 * @return array<string,array{
+	 * @return array{title:string,description:string,fields:array<string,array{
 	 *  description: string,
 	 *  label: string,
 	 *  type: string,
@@ -135,13 +140,13 @@ public function get_register_setting_config(): array {
 	 *  help?: string,
 	 *  isAdvanced?: bool,
 	 *  required?: bool,
-	 * }>
+	 * }>}
 	 */
 	public function get_render_config(): array {
 		$config = $this->get_config();
 
 		// Unset the excluded keys.
-		return array_map(
+		$fields = array_map(
 			static function ( $setting ) {
 				$excluded_keys = [
 					'sanitize_callback',
@@ -156,6 +161,13 @@ static function ( $setting ) {
 			},
 			$config
 		);
+
+		return [
+			'title'       => $this->get_title(),
+			'label'       => $this->get_label(),
+			'description' => $this->get_description(),
+			'fields'      => $fields,
+		];
 	}
 
 	/**
diff --git a/src/Admin/Settings/AccessControlSettings.php b/src/Admin/Settings/AccessControlSettings.php
index 697e804e..b34ede50 100644
--- a/src/Admin/Settings/AccessControlSettings.php
+++ b/src/Admin/Settings/AccessControlSettings.php
@@ -28,6 +28,13 @@ public function get_title(): string {
 		return __( 'Access Control Settings', 'wp-graphql-headless-login' );
 	}
 
+	/**
+	 * {@inheritDoc}
+	 */
+	public function get_label(): string {
+		return __( 'Access Control', 'wp-graphql-headless-login' );
+	}
+
 	/**
 	 * {@inheritDoc}
 	 */
diff --git a/src/Admin/Settings/PluginSettings.php b/src/Admin/Settings/PluginSettings.php
index 84d69013..c130999c 100644
--- a/src/Admin/Settings/PluginSettings.php
+++ b/src/Admin/Settings/PluginSettings.php
@@ -28,6 +28,13 @@ public function get_title(): string {
 		return __( 'Plugin Settings', 'wp-graphql-headless-login' );
 	}
 
+	/**
+	 * {@inheritDoc}
+	 */
+	public function get_label(): string {
+		return __( 'Misc', 'wp-graphql-headless-login' );
+	}
+
 	/**
 	 * {@inheritDoc}
 	 */