Moves modals to separate components

helper/Helper.php

@@ -17,6 +17,14 @@
  * @since 1.0.0
  */
 class Helper {
+
+	/**
+	 * Name of flag environment.
+	 *
+	 * @var string $env_option_name
+	 */
+	public static $env_option_name = 'mr_feature_flags_env';
+
 	/**
 	 * Flag search helper.
 	 *
@@ -27,9 +35,11 @@ class Helper {
 	 * @since 1.0.0
 	 */
 	public static function search_flag( $flags, $field, $flag ) {
-		foreach ( $flags as $key => $value ) {
-			if ( $value[ $field ] === $flag ) {
-				return $value;
+		if ( is_array( $flags ) ) {
+			foreach ( $flags as $key => $value ) {
+				if ( $value[ $field ] === $flag && true === $value['enabled'] ) {
+					return true;
+				}
 			}
 		}
 		return false;

includes/Api/FlagOptions.php

@@ -25,6 +25,13 @@ class FlagOptions {
 	 */
 	public static $option_name = 'mr_feature_flags';
 
+	/**
+	 * Name of flag environment.
+	 *
+	 * @var string $env_option_name
+	 */
+	public static $env_option_name = 'mr_feature_flags_env';
+
 	/**
 	 * Register feature flag endpoints.
 	 *
@@ -52,6 +59,18 @@ function () {
 					]
 				);
 
+				register_rest_route(
+					'feature-flags/v1',
+					'flags/env',
+					[
+						[
+							'methods'             => \WP_REST_SERVER::READABLE,
+							'callback'            => [ $this, 'get_flag_env' ],
+							'permission_callback' => '__return_true',
+						],
+					]
+				);
+
 			}
 		);
 	}
@@ -65,7 +84,7 @@ public function get_all_flags() {
 		$flags = get_option( self::$option_name );
 
 		if ( empty( $flags ) ) {
-			return new \WP_Error( 'no_flags', 'Flags not found', array( 'status' => 404 ) );
+			return rest_ensure_response( [] );
 		}
 
 		return rest_ensure_response( $flags );
@@ -74,6 +93,8 @@ public function get_all_flags() {
 	/**
 	 * Insert / Update flags in options table.
 	 *
+	 * @param WP_Request $request API request.
+	 *
 	 * @return mixed List of flags.
 	 */
 	public function post_flags( $request ) {
@@ -93,6 +114,21 @@ public function post_flags( $request ) {
 		}
 	}
 
+	/**
+	 * Get Feature Flag environment.
+	 *
+	 * @return mixed List of flags.
+	 */
+	public function get_flag_env() {
+		$env = get_option( self::$env_option_name );
+
+		if ( empty( $env ) ) {
+			return rest_ensure_response( [ 'env' => 'prod' ] );
+		}
+
+		return rest_ensure_response( $env );
+	}
+
 	/**
 	 * Register settings action method.
 	 *

includes/FeatureFlags.php

@@ -25,6 +25,7 @@ class FeatureFlags {
 	 */
 	public static $option_name = 'mr_feature_flags';
 
+
 	/**
 	 * Check if given feature is enabled or not.
 	 *
@@ -42,42 +43,4 @@ public static function is_enabled( string $flag ): bool {
 		return false;
 	}
 
-	/**
-	 * Adds provided flag if it does not exists.
-	 *
-	 * @param string $flag name of the flag.
-	 * @return bool
-	 * @throws \Error Throws error if flag already exists.
-	 * @since 1.0.0
-	 */
-	public static function add_flag( string $flag ): bool {
-
-		$flags = get_option( self::$option_name );
-
-		if ( is_array( $flags ) && Helper::search_flag( $flags, 'name', $flag ) ) {
-			throw new \Error( "Flag \"{$flag}\" already exists" );
-		}
-
-		$flag_key = 1;
-
-		if ( is_array( $flags ) && count( $flags ) ) {
-			$flag_key = count( $flags ) + 1;
-		}
-
-		// $flag_key = count( $flags ) ? count( $flags ) + 1 : 1;
-		// ddd( $flag_key );
-		$new_flag = [
-			'id'      => $flag_key,
-			'name'    => $flag,
-			'enabled' => false,
-		];
-
-		if ( $flags ) {
-			array_push( $flags, $new_flag );
-			return update_option( self::$option_name, $flags );
-		}
-
-		return add_option( self::$option_name, [ $new_flag ] );
-
-	}
 }

includes/Settings.php

@@ -53,3 +53,4 @@ public function render_page() {
 		echo '<div id="mr_feature_flags_settings_screen"></div>';
 	}
 }
+

package.json

@@ -19,12 +19,14 @@
   "author": "Mohan Raj <https://mohanraj.dev>",
   "license": "ISC",
   "dependencies": {
+    "@types/react-syntax-highlighter": "^15.5.6",
     "@types/wordpress__components": "^23.0.1",
     "@wordpress/api-fetch": "^6.26.0",
     "@wordpress/components": "^23.6.0",
     "@wordpress/data": "^8.6.0",
     "@wordpress/i18n": "^4.29.0",
     "@wordpress/notices": "^3.29.0",
+    "react-syntax-highlighter": "^15.5.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.2"
   }

plugin.php

@@ -51,11 +51,18 @@ function(): void {
 		);
 
 
+		$feature_flag_meta = get_option( FeatureFlags::$option_name );
+		$flags_list = [];
+		if(is_array($feature_flag_meta)) {
+			$flags_list = $feature_flag_meta;
+		}
+
+
 		wp_localize_script(
 			'mr-feature-flags-script',
 			'mrFeatureFlags',
 			[
-				'flags' => get_option( FeatureFlags::$option_name ),
+				'flags' => $flags_list,
 			]
 		);
 
@@ -90,14 +97,6 @@ function load_settings_scripts(): void {
 
 	wp_enqueue_style( 'wp-edit-blocks' );
 
-	wp_localize_script(
-		'mr-feature-flags',
-		'mrFeatureFlags',
-		[
-			'flags' => get_option( FeatureFlags::$option_name ),
-		]
-	);
-
 	wp_enqueue_style(
 		'mr-feature-flags',
 		$plugin_url . 'build/settings.css',
@@ -121,13 +120,18 @@ function(string $page): void {
 			true
 		);
 
+		$feature_flag_meta = get_option( FeatureFlags::$option_name );
+		$flags_list = [];
+		if(is_array($feature_flag_meta)) {
+			$flags_list = $feature_flag_meta;
+		}
 
 
 		wp_localize_script(
 			'mr-feature-flags-script',
 			'mrFeatureFlags',
 			[
-				'flags' => get_option( FeatureFlags::$option_name ),
+				'flags' => $flags_list,
 			]
 		);
 
@@ -141,15 +145,6 @@ function(string $page): void {
 $mr_feature_flags_register_api->register_flags_endpoints();
 
 
-// add_action ('init', function() {
-
-// 	$request = new \WP_REST_Request( 'GET', '/feature-flags/v1/flags' );
-// 	$request->set_query_params( [] );
-// 	$response = rest_do_request( $request );
-// 	ddd(rest_get_server()->response_to_data( $response, false ));
-
-// });
-
 
 add_filter( 'plugin_action_links_mr-feature-flags/plugin.php', function ( $links )
 	{
@@ -172,4 +167,5 @@ function(string $page): void {
 	}
 );
 
-// FeatureFlags::add_flag('Registration');
+
+// update_option( 'mr_feature_flags', [ ["id" => 1, "name" => "login", "enabled" => false],["id" => 2, "name" => "Reg", "enabled" => false]] );

src/components/DeleteModal.tsx

@@ -0,0 +1,25 @@
+import { Modal, Button } from '@wordpress/components';
+const DeleteModal = (props: any): JSX.Element => {
+	const { closeModal, item, handleDeleteFlag } = props;
+	return (
+		<Modal title={`Delete Feature Flag`} onRequestClose={closeModal}>
+			<p>
+				Are you sure want to delete flag &quot;{item.name}
+				&quot;?
+			</p>
+			<Button
+				isDestructive
+				variant="secondary"
+				onClick={() => handleDeleteFlag(item.id)}
+				style={{ marginRight: 10 }}
+			>
+				Yes
+			</Button>
+			<Button variant="tertiary" onClick={closeModal}>
+				Cancel
+			</Button>
+		</Modal>
+	);
+};
+
+export default DeleteModal;

src/components/Header.tsx

@@ -0,0 +1,19 @@
+import { Flex, FlexItem } from '@wordpress/components';
+export default function (): JSX.Element {
+	return (
+		<Flex justify={'flex-start'}>
+			<FlexItem>
+				<h4>Flag Name</h4>
+			</FlexItem>
+			<FlexItem style={{ marginLeft: 140 }}>
+				<h4>Status</h4>
+			</FlexItem>
+			<FlexItem style={{ marginLeft: 60 }}>
+				<h4>SDK Settings</h4>
+			</FlexItem>
+			<FlexItem style={{ marginLeft: 30 }}>
+				<h4>Delete Flag</h4>
+			</FlexItem>
+		</Flex>
+	);
+}

src/components/Layout.tsx

@@ -4,18 +4,21 @@ import LineItem from './LineItem';
 import { Flag } from '../../types';
 import SubmitControls from './SubmitControls';
 import { getFlags } from '../utils';
+import Header from './Header';
 
 const Layout = (): JSX.Element => {
 	const [flags, setFlags] = useState<Flag[] | undefined>(undefined);
 	const [isLoading, setIsLoading] = useState<boolean>(true);
 
 	useEffect(() => {
 		const logFlags = async () => {
-			const result = await getFlags();
-			if (Array.isArray(result)) {
-				setFlags(result);
-				setIsLoading(false);
+			const fetchedFlags = await getFlags();
+
+			if (fetchedFlags) {
+				setFlags(fetchedFlags);
 			}
+
+			setIsLoading(false);
 		};
 		logFlags();
 	}, [getFlags, setFlags, setIsLoading]);
@@ -24,23 +27,12 @@ const Layout = (): JSX.Element => {
 
 	const lastFlag = flags?.at(-1)?.id || 0;
 
-	if (!lastFlag && !isLoading) {
-		return (
-			<>
-				<p>
-					Welcome to feature flag dashboard. You can add new flags
-					`Add flags` action.
-				</p>
-				<SubmitControls isNew={true} />
-			</>
-		);
-	}
 	return (
 		<>
 			<div id="mr-feature-flag-layout">
 				<h1>Feature Flags settings</h1>
-				<p>Manage all feature flags.</p>
 				<div id="mr-feature-flag-content">
+					{lastFlag ? <Header /> : ''}
 					{isLoading ? (
 						<div className="feature-flag-loader">
 							<Spinner />