enhancement/react-settings-ui-v2

src/js/settings/components/classifai-settings/index.js

@@ -8,13 +8,14 @@ import {
 	HashRouter,
 	useParams,
 	NavLink,
+	useNavigate,
 } from 'react-router-dom';
 
 /**
  * WordPress dependencies
  */
 import { useDispatch } from '@wordpress/data';
-import { SlotFillProvider } from '@wordpress/components';
+import { SlotFillProvider, Button, Icon } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
@@ -41,18 +42,6 @@ import { useSetupPage } from '../classifai-onboarding/hooks';
 
 const { services, features } = window.classifAISettings;
 
-/**
- * DefaultFeatureSettings component to navigate to the default feature settings.
- * If no feature is selected, it will redirect to the first feature.
- *
- * @return {React.ReactElement} The DefaultFeatureSettings component.
- */
-const DefaultFeatureSettings = () => {
-	const { service } = useParams();
-	const feature = Object.keys( features[ service ] || {} )[ 0 ];
-	return <Navigate to={ feature } replace />;
-};
-
 /**
  * FeatureSettingsWrapper component to render the feature settings.
  * If the feature is not available from URL parameters, it will redirect to the first feature of selected service.
@@ -62,13 +51,20 @@ const DefaultFeatureSettings = () => {
 const FeatureSettingsWrapper = () => {
 	const { service, feature } = useParams();
 	const serviceFeatures = Object.keys( features[ service ] || {} );
+	const navigate = useNavigate();
 
 	if ( ! serviceFeatures.includes( feature ) ) {
 		return <Navigate to={ serviceFeatures[ 0 ] } replace />;
 	}
 
 	return (
 		<FeatureContext.Provider value={ { featureName: feature } }>
+			<Button
+				icon={ <Icon icon="arrow-left-alt2" /> }
+				onClick={ () => navigate( -1 ) }
+			>
+				{ __( 'Back to dashboard', 'classifai' ) }
+			</Button>
 			<FeatureSettings />
 		</FeatureContext.Provider>
 	);
@@ -193,22 +189,26 @@ export const ClassifAISettings = () => {
 			<HashRouter>
 				<Header />
 				<div className="classifai-settings-wrapper">
+					<h1 className="classifai-settings__main-title">
+						{ __( 'ClassifAI Settings ', 'classifai' ) }
+					</h1>
+					<p>
+						{ __(
+							'Turn features on or off and adjust your settings.',
+							'classifai'
+						) }
+					</p>
 					<div className="classifai-admin-notices wrap"></div>
 					<ServiceNavigation />
 					<Routes>
 						<Route
 							path=":service"
 							element={ <ServiceSettingsWrapper /> }
-						>
-							<Route
-								index
-								element={ <DefaultFeatureSettings /> }
-							/>
-							<Route
-								path=":feature"
-								element={ <FeatureSettingsWrapper /> }
-							/>
-						</Route>
+						/>
+						<Route
+							path=":service/:feature"
+							element={ <FeatureSettingsWrapper /> }
+						/>
 						<Route
 							path="classifai_setup"
 							element={ <ClassifAIOnboarding /> }

src/js/settings/components/service-settings/index.js

@@ -1,14 +1,24 @@
 /**
  * External dependencies
  */
-import { NavLink, Outlet, useParams } from 'react-router-dom';
+import { NavLink, useParams } from 'react-router-dom';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Flex,
+	FlexItem,
+	FlexBlock,
+	ToggleControl,
+	Button,
+	Panel,
+	PanelBody,
+} from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
@@ -22,34 +32,125 @@
  * @return {Object} The ServiceSettings component.
  */
 export const ServiceSettings = () => {
-	const { setCurrentService } = useDispatch( STORE_NAME );
+	const { setCurrentService, setIsSaving, setSettings } =
+		useDispatch( STORE_NAME );
+
 	const { service } = useParams();
+	const isInitialPageLoad = useRef( true );
+
+	const { settings, getFeatureSettings } = useSelect( ( select ) => {
+		const store = select( STORE_NAME );
+
+		return {
+			settings: store.getSettings(),
+			getFeatureSettings: ( key, featureName ) =>
+				store.getFeatureSettings( key, featureName ),
+		};
+	} );
+
 	useEffect( () => {
 		setCurrentService( service );
 	}, [ service, setCurrentService ] );
 
 	const serviceFeatures = features[ service ] || {};
+
+	const saveSettings = () => {
+		setIsSaving( true );
+		apiFetch( {
+			path: '/classifai/v1/settings/',
+			method: 'POST',
+			data: {
+				settings,
+				is_setup: true,
+				step: 'enable_features',
+			},
+		} ).then( ( res ) => {
+			if ( res.errors && res.errors.length ) {
+				setIsSaving( false );
+				return;
+			}
+
+			setSettings( res.settings );
+			setIsSaving( false );
+		} );
+	};
+
+	const statuses = Object.keys( settings )
+		.map( ( key ) => settings[ key ].status )
+		.join( '' );
+
+	useEffect( () => {
+		if ( isInitialPageLoad.current ) {
+			isInitialPageLoad.current = false;
+			return;
+		}
+		saveSettings();
+	}, [ statuses ] );
+
 	return (
-		<div className="service-settings-wrapper">
-			<div className="classifai-tabs" aria-orientation="vertical">
-				{ Object.keys( serviceFeatures ).map( ( feature ) => (
-					<NavLink
-						to={ feature }
-						key={ feature }
-						className={ ( { isActive } ) =>
-							isActive
-								? 'active-tab classifai-tabs-item'
-								: 'classifai-tabs-item'
-						}
-					>
-						{ serviceFeatures[ feature ]?.label ||
-							__( 'Feature', 'classifai' ) }
-					</NavLink>
-				) ) }
-			</div>
-			<div className="feature-settings-wrapper">
-				<Outlet />
-			</div>
+		<div className="classifai-settings-dashboard">
+			{ Object.keys( serviceFeatures ).map( ( feature, index ) => (
+				<Panel key={ index }>
+					<PanelBody>
+						<Flex gap={ 8 } align="top">
+							<FlexItem style={ { marginTop: '4px' } }>
+								<Flex gap={ 2 }>
+									<ToggleControl
+										className="classifai-feature-status"
+										checked={
+											'1' ===
+											getFeatureSettings(
+												'status',
+												feature
+											)
+										}
+										onChange={ ( value ) =>
+											wp.data
+												.dispatch( STORE_NAME )
+												.setFeatureSettings(
+													{
+														status: value
+															? '1'
+															: '0',
+													},
+													feature
+												)
+										}
+									/>
+								</Flex>
+							</FlexItem>
+							<FlexBlock>
+								<strong>
+									{ serviceFeatures[ feature ]?.label }
+								</strong>
+								<div
+									dangerouslySetInnerHTML={ {
+										__html: serviceFeatures[ feature ]
+											?.enable_description,
+									} }
+								/>
+							</FlexBlock>
+							<FlexItem>
+								<NavLink to={ feature } key={ feature }>
+									<Button
+										variant="secondary"
+										size="small"
+										disabled={
+											'0' ===
+											getFeatureSettings(
+												'status',
+												feature
+											)
+										}
+									>
+										{ __( 'Edit', 'classifai' ) }
+									</Button>
+								</NavLink>
+							</FlexItem>
+						</Flex>
+					</PanelBody>
+				</Panel>
+			) ) }
 		</div>
 	);
 };

src/scss/settings.scss

@@ -195,8 +195,9 @@
 				border: none;
 				box-shadow: none;
 				cursor: pointer;
-				padding: 14px 16px;
+				padding: 14px 0;
 				margin-left: 0;
+				margin-right: 1rem;
 				font-weight: 500;
 				text-decoration: none;
 				font-size: 15px;
@@ -572,3 +573,20 @@
 	margin: 0 auto;
 	top: 1rem;
 }
+
+.classifai-settings-dashboard {
+	margin-top: 36px;
+	max-width: 700px;
+}
+
+.classifai-feature-status {
+	margin-bottom: 0 !important;
+
+	.components-flex {
+		gap: 0 !important;
+	}
+}
+
+.classifai-settings__main-title {
+	margin-top: 2.5rem;
+}

tests/cypress/integration/admin.test.js

@@ -18,7 +18,7 @@ describe( 'Admin can login and make sure plugin is activated', () => {
 
 		// Check Heading
 		cy.visit( '/wp-admin/tools.php?page=classifai' );
-		cy.get( '#wpbody h2' ).contains( 'Classification Settings' );
+		cy.get( '.classifai-settings-wrapper' ).contains( 'ClassifAI Settings' );
 		cy.get( '.classifai-tabs' ).should( 'exist' );
 		cy.get( '.classifai-tabs a' ).first().contains( 'Language Processing' );
 	} );