Fix console warnings raised due to wp 6.7

Author: iamdharmesh

src/js/components/user-selector.js

@@ -125,6 +125,7 @@ export const UserSelector = ( { value, onChange } ) => {
 				remove: __( 'Remove user', 'classifai' ),
 				__experimentalInvalid: __( 'Invalid user', 'classifai' ),
 			} }
+			__nextHasNoMarginBottom
 		/>
 	);
 };

src/js/settings/components/allowed-roles/index.js

@@ -53,6 +53,7 @@ export const AllowedRoles = () => {
 								},
 							} );
 						} }
+						__nextHasNoMarginBottom
 					/>
 				);
 			} ) }

src/js/settings/components/feature-additional-settings/classification-previewers/openai-embedding.js

@@ -86,7 +86,7 @@ export function AzureOpenAIEmbeddingsResults( { postId } ) {
 	}, [ postId ] );
 
 	const card = Object.keys( responseData ).map( ( taxSlug ) => {
-		const tags = responseData[ taxSlug ].data.map( ( tag, _index ) => {
+		const tags = responseData[ taxSlug ]?.data.map( ( tag, _index ) => {
 			const threshold = settings[ `${ taxSlug }_threshold` ];
 			const score = normalizeScore( tag.score );
 

src/js/settings/components/feature-additional-settings/classification.js

@@ -45,35 +45,44 @@ const ClassificationMethodSettings = () => {
 	);
 	const { setFeatureSettings } = useDispatch( STORE_NAME );
 
-	const classifaicationMethodOptions = [
-		{
+	const classifaicationMethodOptions = [];
+	if ( featureSettings.provider === 'ibm_watson_nlu' ) {
+		classifaicationMethodOptions.push( {
 			label: __(
 				'Recommend terms even if they do not exist on the site',
 				'classifai'
 			),
 			value: 'recommended_terms',
-		},
-		{
-			label: __(
-				'Only recommend terms that already exist on the site',
-				'classifai'
-			),
-			value: 'existing_terms',
-		},
-	];
+		} );
+	}
 
-	if (
-		[ 'openai_embeddings', 'azure_openai_embeddings' ].includes(
-			featureSettings.provider
-		)
-	) {
-		delete classifaicationMethodOptions[ 0 ];
-		if ( featureSettings.classification_method === 'recommended_terms' ) {
-			setFeatureSettings( {
-				classification_method: 'existing_terms',
-			} );
+	classifaicationMethodOptions.push( {
+		label: __(
+			'Only recommend terms that already exist on the site',
+			'classifai'
+		),
+		value: 'existing_terms',
+	} );
+
+	useEffect( () => {
+		if (
+			[ 'openai_embeddings', 'azure_openai_embeddings' ].includes(
+				featureSettings.provider
+			)
+		) {
+			if (
+				featureSettings.classification_method === 'recommended_terms'
+			) {
+				setFeatureSettings( {
+					classification_method: 'existing_terms',
+				} );
+			}
 		}
-	}
+	}, [
+		featureSettings.provider,
+		featureSettings.classification_method,
+		setFeatureSettings,
+	] );
 
 	return (
 		<SettingsRow label={ __( 'Classification method', 'classifai' ) }>
@@ -201,6 +210,7 @@ export const ClassificationSettings = () => {
 								'Used to preview the results for a particular post.',
 								'classifai'
 							) }
+							__nextHasNoMarginBottom
 						>
 							<PostSelector showLabel={ false } />
 						</BaseControl>
@@ -259,6 +269,7 @@ export const ClassificationSettings = () => {
 									},
 								} );
 							} }
+							__nextHasNoMarginBottom
 						/>
 					);
 				} ) }
@@ -288,6 +299,7 @@ export const ClassificationSettings = () => {
 									},
 								} );
 							} }
+							__nextHasNoMarginBottom
 						/>
 					);
 				} ) }

src/js/settings/components/feature-additional-settings/descriptive-text-generator.js

@@ -58,6 +58,7 @@ export const DescriptiveTextGeneratorSettings = () => {
 								},
 							} );
 						} }
+						__nextHasNoMarginBottom
 					/>
 				);
 			} ) }

src/js/settings/components/feature-additional-settings/excerpt-generation.js

@@ -73,6 +73,7 @@ export const ExcerptGenerationSettings = () => {
 									},
 								} );
 							} }
+							__nextHasNoMarginBottom
 						/>
 					);
 				} ) }

src/js/settings/components/feature-additional-settings/image-tag-generator.js

@@ -46,6 +46,7 @@ export const ImageTagGeneratorSettings = () => {
 				} }
 				value={ featureSettings.tag_taxonomy || 'classifai-image-tags' }
 				options={ options }
+				__nextHasNoMarginBottom
 			/>
 		</SettingsRow>
 	);

src/js/settings/components/feature-additional-settings/moderation.js

@@ -55,6 +55,7 @@ export const ModerationSettings = () => {
 								},
 							} );
 						} }
+						__nextHasNoMarginBottom
 					/>
 				);
 			} ) }

src/js/settings/components/feature-additional-settings/nlu-feature.js

@@ -111,6 +111,7 @@ export const NLUFeatureSettings = () => {
 									[ feature ]: value ? 1 : 0,
 								} );
 							} }
+							__nextHasNoMarginBottom
 						/>
 						<InputControl
 							id={ `${ feature }-threshold` }
@@ -150,6 +151,7 @@ export const NLUFeatureSettings = () => {
 										[ `${ feature }_taxonomy` ]: value,
 									} );
 								} }
+								__nextHasNoMarginBottom
 							/>
 						) }
 					</SettingsRow>

src/js/settings/components/feature-additional-settings/prompt-repeater.js

@@ -121,6 +121,7 @@ export const PromptRepeater = ( props ) => {
 									} );
 								} }
 								className="classifai-prompt-text"
+								__nextHasNoMarginBottom
 							/>
 						</>
 					) }

src/js/settings/components/feature-additional-settings/smart-404.js

@@ -102,6 +102,7 @@ export const Smart404Settings = () => {
 							rescore: value ? '1' : '0',
 						} );
 					} }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 			<SettingsRow
@@ -119,6 +120,7 @@ export const Smart404Settings = () => {
 							fallback: value ? '1' : '0',
 						} );
 					} }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 			<SettingsRow
@@ -151,6 +153,7 @@ export const Smart404Settings = () => {
 							value: 'l2_norm',
 						},
 					] }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 		</>

src/js/settings/components/feature-additional-settings/term-cleanup.js

@@ -92,6 +92,7 @@ export const TermCleanupSettings = () => {
 							use_ep: value ? '1' : '0',
 						} );
 					} }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 			<>
@@ -118,6 +119,7 @@ export const TermCleanupSettings = () => {
 										},
 									} );
 								} }
+								__nextHasNoMarginBottom
 							/>
 							<InputControl
 								id={ `${ feature }-threshold` }

src/js/settings/components/feature-additional-settings/text-to-speech.js

@@ -50,6 +50,7 @@ export const TextToSpeechSettings = () => {
 								},
 							} );
 						} }
+						__nextHasNoMarginBottom
 					/>
 				);
 			} ) }

src/js/settings/components/feature-settings/enable-feature.js

@@ -45,6 +45,7 @@ export const EnableToggleControl = ( { children } ) => {
 						status: value ? '1' : '0', // TODO: Use boolean, currently using string for backward compatibility.
 					} )
 				}
+				__nextHasNoMarginBottom
 			/>
 		</SettingsRow>
 	);

src/js/settings/components/provider-settings/amazon-polly.js

@@ -140,6 +140,7 @@ export const AmazonPollySettings = ( { isConfigured = false } ) => {
 							value: 'long-form',
 						},
 					] }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 			<SettingsRow label={ __( 'Voice', 'classifai' ) }>
@@ -159,6 +160,7 @@ export const AmazonPollySettings = ( { isConfigured = false } ) => {
 								label: `${ voice?.LanguageName } - ${ voice?.Name } (${ voice?.Gender })`,
 							};
 						} ) }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 		</>

src/js/settings/components/provider-settings/azure-text-to-speech.js

@@ -93,6 +93,7 @@ export const AzureTextToSpeechSettings = ( { isConfigured = false } ) => {
 								value: `${ ele.ShortName }|${ ele.Gender }`,
 							} )
 						) }
+						__nextHasNoMarginBottom
 					/>
 				</SettingsRow>
 			) }

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

@@ -168,6 +168,7 @@ export const ProviderSettings = () => {
 							}
 							value={ provider }
 							options={ providers }
+							__nextHasNoMarginBottom
 						/>
 					</SettingsRow>
 				) }

src/js/settings/components/provider-settings/openai-dalle.js

@@ -78,6 +78,7 @@ export const OpenAIDallESettings = ( { isConfigured = false } ) => {
 						label: i + 1,
 						value: i + 1,
 					} ) ) }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 			<SettingsRow
@@ -101,6 +102,7 @@ export const OpenAIDallESettings = ( { isConfigured = false } ) => {
 							value: 'hd',
 						},
 					] }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 			<SettingsRow
@@ -128,6 +130,7 @@ export const OpenAIDallESettings = ( { isConfigured = false } ) => {
 							value: '1024x1792',
 						},
 					] }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 			<SettingsRow
@@ -151,6 +154,7 @@ export const OpenAIDallESettings = ( { isConfigured = false } ) => {
 							value: 'natural',
 						},
 					] }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 		</>

src/js/settings/components/provider-settings/openai-text-to-speech.js

@@ -101,6 +101,7 @@ export const OpenAITextToSpeachSettings = ( { isConfigured = false } ) => {
 							value: 'tts-1-hd',
 						},
 					] }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 			<SettingsRow
@@ -149,6 +150,7 @@ export const OpenAITextToSpeachSettings = ( { isConfigured = false } ) => {
 							value: 'shimmer',
 						},
 					] }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 			<SettingsRow
@@ -172,6 +174,7 @@ export const OpenAITextToSpeachSettings = ( { isConfigured = false } ) => {
 							value: 'wav',
 						},
 					] }
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 			<SettingsRow

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

@@ -98,7 +98,7 @@ export const ServiceSettings = () => {
 	};
 
 	const statuses = Object.keys( settings )
-		.map( ( key ) => settings[ key ].status )
+		.map( ( key ) => settings[ key ]?.status )
 		.join( '' );
 
 	useEffect( () => {
@@ -138,6 +138,7 @@ export const ServiceSettings = () => {
 													feature
 												)
 										}
+										__nextHasNoMarginBottom
 									/>
 								</Flex>
 							</FlexItem>

src/js/settings/components/user-permissions/index.js

@@ -77,6 +77,7 @@ export const UserPermissions = () => {
 						} );
 					} }
 					className="classifai-settings__user-based-opt-out"
+					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
 		</PanelBody>

src/scss/settings.scss

@@ -117,6 +117,10 @@
 			display: none;
 		}
 
+		.components-base-control.components-checkbox-control {
+			margin-bottom: 8px;
+		}
+
 	}
 
 	.save-settings-button{