+
-
+
= ( {
onChange={ ( value ) => {
setLocalSearch( value || '' );
if ( debouncedSearchRef.current ) {
- debouncedSearchRef.current( value || undefined );
+ debouncedSearchRef.current(
+ value || undefined
+ );
}
} }
placeholder={ __( 'Search by summary', 'onelogs' ) }
/>
-
);
};
diff --git a/assets/src/admin/logs/components/LogsDashboard.tsx b/assets/src/admin/logs/components/LogsDashboard.tsx
index 3c2391e..5f90b19 100644
--- a/assets/src/admin/logs/components/LogsDashboard.tsx
+++ b/assets/src/admin/logs/components/LogsDashboard.tsx
@@ -13,33 +13,41 @@ import {
import { FiltersPanel } from './FiltersPanel';
import { LogsTable } from './LogsTable';
import { Pagination } from './Pagination';
-import type { FilterOptions, LogEntry, SharedSite, SortState, UserOption } from '../types';
+import type {
+ FilterOptions,
+ LogEntry,
+ SharedSite,
+ SortState,
+ UserOption,
+} from '../types';
const LogsDashboard: React.FC = () => {
- const [ logs, setLogs ] = useState( [] );
- const [ contexts, setContexts ] = useState( [] );
- const [ actions, setActions ] = useState( [] );
- const [ connectors, setConnectors ] = useState( [] );
- const [ users, setUsers ] = useState( [] );
- const [ sharedSites, setSharedSites ] = useState( [] );
- const [ showSharedSitesLogs, setShowSharedSitesLogs ] = useState( false );
- const [ filters, setFilters ] = useState( {
+ const [ logs, setLogs ] = useState< LogEntry[] >( [] );
+ const [ contexts, setContexts ] = useState< string[] >( [] );
+ const [ actions, setActions ] = useState< string[] >( [] );
+ const [ connectors, setConnectors ] = useState< string[] >( [] );
+ const [ users, setUsers ] = useState< UserOption[] >( [] );
+ const [ sharedSites, setSharedSites ] = useState< SharedSite[] >( [] );
+ const [ showSharedSitesLogs, setShowSharedSitesLogs ] =
+ useState< boolean >( false );
+ const [ filters, setFilters ] = useState< FilterOptions >( {
page: 1,
per_page: 20,
current_site_logs: true,
site_url: 'governing-site',
} );
- const [ localSearch, setLocalSearch ] = useState( '' );
- const [ loading, setLoading ] = useState( false );
- const [ exportLoading, setExportLoading ] = useState( false );
- const [ totalPages, setTotalPages ] = useState( 1 );
- const [ totalLogs, setTotalLogs ] = useState( 0 );
- const [ error, setError ] = useState( null );
- const [ currentSort, setCurrentSort ] = useState( {
+ const [ localSearch, setLocalSearch ] = useState< string >( '' );
+ const [ loading, setLoading ] = useState< boolean >( false );
+ const [ exportLoading, setExportLoading ] = useState< boolean >( false );
+ const [ totalPages, setTotalPages ] = useState< number >( 1 );
+ const [ totalLogs, setTotalLogs ] = useState< number >( 0 );
+ const [ error, setError ] = useState< string | null >( null );
+ const [ currentSort, setCurrentSort ] = useState< SortState >( {
field: null,
direction: null,
} );
- const [ showAdvancedFilters, setShowAdvancedFilters ] = useState( true );
+ const [ showAdvancedFilters, setShowAdvancedFilters ] =
+ useState< boolean >( true );
const fetchLogsData = useCallback( async () => {
setLoading( true );
@@ -52,11 +60,20 @@ const LogsDashboard: React.FC = () => {
setTotalPages( result.pages );
if ( result.errors && result.errors.length > 0 ) {
- /* translators: %s is replaced with selected site url */
- setError( sprintf( __( 'Site %s returned errors:', 'onelogs' ), filters.site_url ) );
+ setError(
+ sprintf(
+ /* translators: %s: site url */
+ __( 'Site %s returned errors:', 'onelogs' ),
+ filters.site_url ?? ''
+ )
+ );
}
} catch ( err ) {
- setError( err instanceof Error ? err.message : __( 'An error occurred while fetching logs', 'onelogs' ) );
+ setError(
+ err instanceof Error
+ ? err.message
+ : __( 'An error occurred while fetching logs', 'onelogs' )
+ );
} finally {
setLoading( false );
}
@@ -77,13 +94,13 @@ const LogsDashboard: React.FC = () => {
// Fetch the first page.
const initialResult = await apiFetchLogs( filtersForExport );
const totalPagesForExport = initialResult.pages || 1;
- allLogs = [ ...initialResult.logs as LogEntry[] ];
+ allLogs = [ ...( initialResult.logs as LogEntry[] ) ];
// Fetch remaining pages (if any).
for ( page = 2; page <= totalPagesForExport; page++ ) {
const pagedFilters = { ...filtersForExport, page, perPage };
const pageResult = await apiFetchLogs( pagedFilters );
- allLogs.push( ...pageResult.logs as LogEntry[] );
+ allLogs.push( ...( pageResult.logs as LogEntry[] ) );
}
// Define CSV headers.
@@ -111,7 +128,8 @@ const LogsDashboard: React.FC = () => {
] );
// Escape double quotes and wrap fields in quotes.
- const escapeCSV = ( value:string ) => `"${ String( value ).replace( /"/g, '""' ) }"`;
+ const escapeCSV = ( value: string ) =>
+ `"${ String( value ).replace( /"/g, '""' ) }"`;
// Combine CSV content.
const csvContent = [
@@ -120,18 +138,23 @@ const LogsDashboard: React.FC = () => {
].join( '\n' );
// Trigger CSV download.
- const blob = new Blob( [ csvContent ], { type: 'text/csv;charset=utf-8;' } );
+ const blob = new Blob( [ csvContent ], {
+ type: 'text/csv;charset=utf-8;',
+ } );
const url = URL.createObjectURL( blob );
const link = document.createElement( 'a' );
link.href = url;
- link.download = `onepress-logs-${ new Date().toISOString().split( 'T' )[ 0 ] }.csv`;
+ link.download = `onelogs-${
+ new Date().toISOString().split( 'T' )[ 0 ]
+ }.csv`;
link.style.display = 'none';
document.body.appendChild( link );
link.click();
document.body.removeChild( link );
URL.revokeObjectURL( url );
- } catch ( err : unknown ) {
- const message = err instanceof Error ? err.message : 'Failed to export logs.';
+ } catch ( err: unknown ) {
+ const message =
+ err instanceof Error ? err.message : 'Failed to export logs.';
setError( message );
} finally {
setExportLoading( false );
@@ -142,7 +165,7 @@ const LogsDashboard: React.FC = () => {
try {
const data = await apiFetchContexts( filters );
setContexts( data );
- } catch ( err ) {
+ } catch {
setError( __( 'Error fetching contexts:', 'onelogs' ) );
}
}, [ filters ] );
@@ -151,7 +174,7 @@ const LogsDashboard: React.FC = () => {
try {
const data = await apiFetchConnectors( filters );
setConnectors( data );
- } catch ( err ) {
+ } catch {
setError( __( 'Error fetching connectors:', 'onelogs' ) );
}
}, [ filters ] );
@@ -160,7 +183,7 @@ const LogsDashboard: React.FC = () => {
try {
const response = await apiFetchUsers( filters );
setUsers( response.data as UserOption[] );
- } catch ( err ) {
+ } catch {
setError( __( 'Error fetching users:', 'onelogs' ) );
}
}, [ filters ] );
@@ -169,7 +192,7 @@ const LogsDashboard: React.FC = () => {
try {
const response = await apiFetchSharedSites();
setSharedSites( response as SharedSite[] );
- } catch ( err ) {
+ } catch {
setError( __( 'Error fetching shared sites:', 'onelogs' ) );
}
}, [] );
@@ -178,7 +201,7 @@ const LogsDashboard: React.FC = () => {
try {
const data = await fetchActions( filters );
setActions( data );
- } catch ( err ) {
+ } catch {
setError( __( 'Error fetching shared sites:', 'onelogs' ) );
}
}, [ filters ] );
@@ -191,30 +214,40 @@ const LogsDashboard: React.FC = () => {
loadActions();
fetchLogsData();
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [ ] ); // Run only once on mount, do not include fetchLogsData in deps to avoid infinite loop.
+ }, [] ); // Run only once on mount, do not include fetchLogsData in deps to avoid infinite loop.
useEffect( () => {
fetchLogsData();
loadUsers();
loadContexts();
loadActions();
- }, [ filters, showSharedSitesLogs, fetchLogsData, loadActions, loadContexts, loadUsers ] );
+ }, [
+ filters,
+ showSharedSitesLogs,
+ fetchLogsData,
+ loadActions,
+ loadContexts,
+ loadUsers,
+ ] );
useEffect( () => {
setLocalSearch( filters.search || '' );
}, [ filters.search ] );
- const handleFilterChange = useCallback( ( key: keyof FilterOptions, value: string | number ) => {
- setFilters( ( prev ) => {
- if ( value === '' || value === null || value === undefined ) {
- delete prev[ key ];
- } else {
- prev[ key ] = value;
- }
-
- return { ...prev, page: 1 };
- } );
- }, [] );
+ const handleFilterChange = useCallback(
+ ( key: keyof FilterOptions, value: string | number ) => {
+ setFilters( ( prev ) => {
+ if ( value === '' || value === null || value === undefined ) {
+ delete prev[ key ];
+ } else {
+ prev[ key ] = value;
+ }
+
+ return { ...prev, page: 1 };
+ } );
+ },
+ []
+ );
const resetFilters = () => {
setFilters( {
@@ -258,7 +291,7 @@ const LogsDashboard: React.FC = () => {
diff --git a/assets/src/admin/logs/components/LogsTable.tsx b/assets/src/admin/logs/components/LogsTable.tsx
index 6f2b1b8..f712f05 100644
--- a/assets/src/admin/logs/components/LogsTable.tsx
+++ b/assets/src/admin/logs/components/LogsTable.tsx
@@ -11,7 +11,7 @@ interface LogsTableProps {
handleSort: ( field: string ) => void;
}
-export const LogsTable: React.FC = ( {
+export const LogsTable: React.FC< LogsTableProps > = ( {
logs,
currentSort,
handleSort,
@@ -24,49 +24,81 @@ export const LogsTable: React.FC = ( {
handleSort( 'created' ) }
- className={ ` ${ currentSort.field === 'created' ? `sorted-${ currentSort.direction }` : '' }` }
+ className={ ` ${
+ currentSort.field === 'created'
+ ? `sorted-${ currentSort.direction }`
+ : ''
+ }` }
>
{ __( 'Date', 'onelogs' ) }
handleSort( 'site_name' ) }
- className={ ` ${ currentSort.field === 'site_name' ? `sorted-${ currentSort.direction }` : '' }` }
+ className={ ` ${
+ currentSort.field === 'site_name'
+ ? `sorted-${ currentSort.direction }`
+ : ''
+ }` }
>
{ __( 'Site', 'onelogs' ) }
handleSort( 'summary' ) }
- className={ ` ${ currentSort.field === 'summary' ? `sorted-${ currentSort.direction }` : '' }` }
+ className={ ` ${
+ currentSort.field === 'summary'
+ ? `sorted-${ currentSort.direction }`
+ : ''
+ }` }
>
{ __( 'Summary', 'onelogs' ) }
handleSort( 'context' ) }
- className={ `onelogs-context-column ${ currentSort.field === 'context' ? `sorted-${ currentSort.direction }` : '' }` }
+ className={ `onelogs-context-column ${
+ currentSort.field === 'context'
+ ? `sorted-${ currentSort.direction }`
+ : ''
+ }` }
>
{ __( 'Context', 'onelogs' ) }
handleSort( 'action' ) }
- className={ `onelogs-action-column ${ currentSort.field === 'action' ? `sorted-${ currentSort.direction }` : '' }` }
+ className={ `onelogs-action-column ${
+ currentSort.field === 'action'
+ ? `sorted-${ currentSort.direction }`
+ : ''
+ }` }
>
{ __( 'Action', 'onelogs' ) }
handleSort( 'subject' ) }
- className={ `onelogs-subject-column ${ currentSort.field === 'subject' ? `sorted-${ currentSort.direction }` : '' }` }
+ className={ `onelogs-subject-column ${
+ currentSort.field === 'subject'
+ ? `sorted-${ currentSort.direction }`
+ : ''
+ }` }
>
{ __( 'Subject', 'onelogs' ) }
handleSort( 'user_id' ) }
- className={ `onelogs-user-column ${ currentSort.field === 'user_id' ? `sorted-${ currentSort.direction }` : '' }` }
+ className={ `onelogs-user-column ${
+ currentSort.field === 'user_id'
+ ? `sorted-${ currentSort.direction }`
+ : ''
+ }` }
>
{ __( 'User', 'onelogs' ) }
handleSort( 'ip' ) }
- className={ `onelogs-ip-column ${ currentSort.field === 'ip' ? `sorted-${ currentSort.direction }` : '' }` }
+ className={ `onelogs-ip-column ${
+ currentSort.field === 'ip'
+ ? `sorted-${ currentSort.direction }`
+ : ''
+ }` }
>
{ __( 'IP', 'onelogs' ) }
@@ -76,7 +108,9 @@ export const LogsTable: React.FC = ( {
{ logs.length > 0 ? (
logs.map( ( log ) => (
- { formatDate( log.created ) }
+
+ { formatDate( log.created ) }
+
{ log.is_remote ? (
= ( {
target="_blank"
rel="noopener noreferrer"
className="onelogs-site-link"
- title={ __( 'Visit site', 'onelogs' ) }
+ title={ __(
+ 'Visit site',
+ 'onelogs'
+ ) }
>
- { log.site_name }
+
+ { log.site_name }
+
) : (
- { SITE_TYPE === 'governing-site' ? __( 'Governing Site', 'onelogs' ) : SITE_NAME }
+
+ { SITE_TYPE === 'governing-site'
+ ? __(
+ 'Governing Site',
+ 'onelogs'
+ )
+ : SITE_NAME }
+
) }
@@ -98,55 +143,106 @@ export const LogsTable: React.FC = ( {
{ log.object_data && (
- { log.context }
- { log.action }
- { log?.object_data?.title || 'N/A' }
+
+ { log.context }
+
+
+ { log.action }
+
+
+ { log?.object_data?.title || 'N/A' }
+
{ ( () => {
const user = log.user;
return (
- { log.ip }
+
+ { log.ip }
+
) )
) : (
-
- { __( 'No logs found matching the current filters.', 'onelogs' ) }
+
+ { __(
+ 'No logs found matching the current filters.',
+ 'onelogs'
+ ) }
) }
) : (
- = ( {
+export const Pagination: React.FC< PaginationProps > = ( {
currentPage,
totalPages,
onPageChange,
totalLogs,
} ) => {
return (
- ;
+ meta: Record< string, [] >;
user_display_name?: string;
site_name?: string;
site_url?: string;
@@ -35,7 +35,7 @@ export interface LogEntry {
};
}
-export interface FilterOptions extends Record {
+export interface FilterOptions extends Record< string, unknown > {
page: number;
per_page: number;
orderby?: string;
@@ -55,7 +55,16 @@ export interface FilterOptions extends Record {
include_shared_sites?: boolean;
}
-export type SortableField = 'ID' | 'summary' | 'connector' | 'context' | 'action' | 'user_id' | 'ip' | 'created' | 'site_name';
+export type SortableField =
+ | 'ID'
+ | 'summary'
+ | 'connector'
+ | 'context'
+ | 'action'
+ | 'user_id'
+ | 'ip'
+ | 'created'
+ | 'site_name';
export interface SortState {
field: SortableField | null | string;
@@ -63,7 +72,7 @@ export interface SortState {
}
export type APIResponse = {
- [key: string]: unknown;
+ [ key: string ]: unknown;
data: object[] | LogEntry[] | UserOption[];
meta: {
total: number;
@@ -74,7 +83,11 @@ export type APIResponse = {
export type StringArrayResponse = string[];
-export type fetchReturn = APIResponse | StringArrayResponse | string | SharedSite[];
+export type fetchReturn =
+ | APIResponse
+ | StringArrayResponse
+ | string
+ | SharedSite[];
export interface SharedSite {
api_key: string;
@@ -85,6 +98,6 @@ export interface SharedSite {
export interface OneLogsDataType {
restUrl: string;
- restNonce: string;
+ nonce: string;
apiKey: string;
}
diff --git a/assets/src/admin/onboarding/index.tsx b/assets/src/admin/onboarding/index.tsx
index 8e4e582..faad83a 100644
--- a/assets/src/admin/onboarding/index.tsx
+++ b/assets/src/admin/onboarding/index.tsx
@@ -2,9 +2,9 @@ import { createRoot } from 'react-dom/client';
import OnboardingScreen, { type SiteType } from './page';
interface OneLogsSettings {
- restNonce: string;
- site_type: SiteType | '';
- settingsLink: string;
+ nonce: string;
+ siteType: SiteType | '';
+ setupUrl: string;
}
declare global {
diff --git a/assets/src/admin/onboarding/page.tsx b/assets/src/admin/onboarding/page.tsx
index 1c7d9a8..aa56c21 100644
--- a/assets/src/admin/onboarding/page.tsx
+++ b/assets/src/admin/onboarding/page.tsx
@@ -20,7 +20,17 @@ interface NoticeState {
message: string;
}
-const SiteTypeSelector = ( { value, setSiteType }: {
+const { nonce, setupUrl, siteType: initialSiteType } = window.OneLogsSettings;
+
+/**
+ * Create NONCE middleware for apiFetch
+ */
+apiFetch.use( apiFetch.createNonceMiddleware( nonce ) );
+
+const SiteTypeSelector = ( {
+ value,
+ setSiteType,
+}: {
value: SiteType | '';
setSiteType: ( v: SiteType | '' ) => void;
} ) => (
@@ -29,31 +39,35 @@ const SiteTypeSelector = ( { value, setSiteType }: {
value={ value }
help={ __(
"Choose your site's primary purpose. This setting cannot be changed later and affects available features and configurations.",
- 'onelogs',
+ 'onelogs'
) }
onChange={ ( v ) => {
setSiteType( v );
} }
+ __nextHasNoMarginBottom
+ __next40pxDefaultSize
options={ [
{ label: __( 'Select…', 'onelogs' ), value: '' },
{ label: __( 'Brand Site', 'onelogs' ), value: BRAND_SITE },
- { label: __( 'Governing site', 'onelogs' ), value: GOVERNING_SITE },
+ {
+ label: __( 'Governing site', 'onelogs' ),
+ value: GOVERNING_SITE,
+ },
] }
/>
);
const OnboardingScreen = () => {
- // WordPress provides snake_case keys here. Using them intentionally.
- // eslint-disable-next-line camelcase
- const { restNonce, settingsLink, site_type } = window.OneLogsSettings;
-
- const [ siteType, setSiteType ] = useState( site_type || '' );
- const [ notice, setNotice ] = useState( null );
- const [ isSaving, setIsSaving ] = useState( false );
+ const [ siteType, setSiteType ] = useState< SiteType | '' >(
+ initialSiteType || ''
+ );
+ const [ notice, setNotice ] = useState< NoticeState | null >( null );
+ const [ isSaving, setIsSaving ] = useState( false );
useEffect( () => {
- apiFetch.use( apiFetch.createNonceMiddleware( restNonce ) );
- apiFetch<{ onelogs_site_type?: SiteType }>( { path: '/wp/v2/settings' } )
+ apiFetch< { onelogs_site_type?: SiteType } >( {
+ path: '/wp/v2/settings',
+ } )
.then( ( settings ) => {
if ( settings?.onelogs_site_type ) {
setSiteType( settings.onelogs_site_type );
@@ -65,7 +79,7 @@ const OnboardingScreen = () => {
message: __( 'Error fetching site type.', 'onelogs' ),
} );
} );
- } );
+ }, [] );
const handleSiteTypeChange = async ( value: SiteType | '' ) => {
// Optimistically set site type.
@@ -73,20 +87,22 @@ const OnboardingScreen = () => {
setIsSaving( true );
try {
- await apiFetch<{ onelogs_site_type?: SiteType }>( {
+ await apiFetch< { onelogs_site_type?: SiteType } >( {
path: '/wp/v2/settings',
method: 'POST',
data: { onelogs_site_type: value },
} ).then( ( settings ) => {
if ( ! settings?.onelogs_site_type ) {
- throw new Error( __( 'No site type in response', 'onelogs' ) );
+ throw new Error(
+ __( 'No site type in response', 'onelogs' )
+ );
}
setSiteType( settings.onelogs_site_type );
// Redirect user to setup page.
- if ( settingsLink ) {
- window.location.href = settingsLink;
+ if ( setupUrl ) {
+ window.location.href = setupUrl;
}
} );
} catch {
@@ -104,7 +120,7 @@ const OnboardingScreen = () => {
{ !! notice?.message && (
setNotice( null ) }
>
{ notice?.message }
diff --git a/assets/src/admin/settings/index.js b/assets/src/admin/settings/index.js
index 5bcfd0c..a8e7d47 100644
--- a/assets/src/admin/settings/index.js
+++ b/assets/src/admin/settings/index.js
@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { __ } from '@wordpress/i18n';
import { Snackbar } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
import SiteTable from '../../components/SiteTable';
import SiteModal from '../../components/SiteModal';
import SiteSettings from '../../components/SiteSettings';
@@ -17,14 +10,18 @@ import { API_NAMESPACE, NONCE } from '../../js/constants';
/**
* Settings page component for OneLogs plugin.
*
- * @return {JSX.Element} Rendered component.
+ * @return {import('react').ReactElement} Rendered component.
*/
const OneLogsSettingsPage = () => {
const [ siteType, setSiteType ] = useState( '' );
const [ showModal, setShowModal ] = useState( false );
const [ editingIndex, setEditingIndex ] = useState( null );
const [ sites, setSites ] = useState( [] );
- const [ formData, setFormData ] = useState( { name: '', url: '', api_key: '' } );
+ const [ formData, setFormData ] = useState( {
+ name: '',
+ url: '',
+ api_key: '',
+ } );
const [ notice, setNotice ] = useState( {
type: 'success',
message: '',
@@ -35,10 +32,16 @@ const OneLogsSettingsPage = () => {
try {
const [ siteTypeRes, sitesRes ] = await Promise.all( [
fetch( `${ API_NAMESPACE }/site-type`, {
- headers: { 'Content-Type': 'application/json', 'X-WP-NONCE': NONCE },
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-WP-NONCE': NONCE,
+ },
} ),
fetch( `${ API_NAMESPACE }/shared-sites`, {
- headers: { 'Content-Type': 'application/json', 'X-WP-NONCE': NONCE },
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-WP-NONCE': NONCE,
+ },
} ),
] );
@@ -54,7 +57,10 @@ const OneLogsSettingsPage = () => {
} catch {
setNotice( {
type: 'error',
- message: __( 'Error fetching site type or Brand sites.', 'onelogs' ),
+ message: __(
+ 'Error fetching site type or Brand sites.',
+ 'onelogs'
+ ),
} );
}
};
@@ -63,9 +69,12 @@ const OneLogsSettingsPage = () => {
}, [] );
const handleFormSubmit = async () => {
- const updated = editingIndex !== null
- ? sites.map( ( item, i ) => ( i === editingIndex ? formData : item ) )
- : [ ...sites, formData ];
+ const updated =
+ editingIndex !== null
+ ? sites.map( ( item, i ) =>
+ i === editingIndex ? formData : item
+ )
+ : [ ...sites, formData ];
try {
const response = await fetch( `${ API_NAMESPACE }/shared-sites`, {
@@ -77,7 +86,6 @@ const OneLogsSettingsPage = () => {
body: JSON.stringify( { sites_data: updated } ),
} );
if ( ! response.ok ) {
- console.error( 'Error saving Brand site:', response.statusText ); // eslint-disable-line no-console
return response;
}
@@ -93,7 +101,10 @@ const OneLogsSettingsPage = () => {
} catch {
setNotice( {
type: 'error',
- message: __( 'Error saving Brand site. Please try again later.', 'onelogs' ),
+ message: __(
+ 'Error saving Brand site. Please try again later.',
+ 'onelogs'
+ ),
} );
}
@@ -117,7 +128,10 @@ const OneLogsSettingsPage = () => {
if ( ! response.ok ) {
setNotice( {
type: 'error',
- message: __( 'Failed to delete Brand site. Please try again.', 'onelogs' ),
+ message: __(
+ 'Failed to delete Brand site. Please try again.',
+ 'onelogs'
+ ),
} );
return;
}
@@ -134,29 +148,32 @@ const OneLogsSettingsPage = () => {
} catch {
setNotice( {
type: 'error',
- message: __( 'Error deleting Brand site. Please try again later.', 'onelogs' ),
+ message: __(
+ 'Error deleting Brand site. Please try again later.',
+ 'onelogs'
+ ),
} );
}
};
return (
<>
- { notice?.message?.length > 0 &&
+ { notice?.message?.length > 0 && (
setNotice( null ) }
- className={ notice?.type === 'error' ? 'onelogs-error-notice' : 'onelogs-success-notice' }
+ className={
+ notice?.type === 'error'
+ ? 'onelogs-error-notice'
+ : 'onelogs-success-notice'
+ }
>
{ notice?.message }
- }
+ ) }
- {
- siteType === 'brand-site' && (
- {
- const [ errors, setErrors ] = useState( {
- name: '',
- url: '',
- api_key: '',
- message: '',
- } );
- const [ showNotice, setShowNotice ] = useState( false );
- const [ isProcessing, setIsProcessing ] = useState( false );
-
- const handleSubmit = async () => {
- // Validate inputs
- let siteUrlError = '';
- if ( ! formData.url.trim() ) {
- siteUrlError = __( 'Site URL is required.', 'onelogs' );
- } else if ( ! isValidUrl( formData.url ) ) {
- siteUrlError = __( 'Enter a valid URL (must start with http or https).', 'onelogs' );
- }
-
- const newErrors = {
- name: ! formData.name.trim() ? __( 'Site Name is required.', 'onelogs' ) : '',
- url: siteUrlError,
- api_key: ! formData.api_key.trim() ? __( 'API Key is required.', 'onelogs' ) : '',
- message: '',
- };
-
- // Make sure site name is under 20 characters
- if ( formData.name.length > 20 ) {
- newErrors.name = __( 'Site Name must be under 20 characters.', 'onelogs' );
- }
-
- setErrors( newErrors );
- const hasErrors = Object.values( newErrors ).some( ( err ) => err );
-
- if ( hasErrors ) {
- setShowNotice( true );
- return;
- }
-
- // Start processing
- setIsProcessing( true );
- setShowNotice( false );
-
- try {
- // Perform health-check
- const healthCheck = await fetch(
- `${ formData.url }/wp-json/onelogs/v1/health-check`,
- {
- method: 'GET',
- headers: {
- 'Content-Type': 'application/json',
- 'X-OneLogs-Token': formData.api_key,
- },
- },
- );
-
- const healthCheckData = await healthCheck.json();
- if ( ! healthCheckData.success ) {
- setErrors( {
- ...newErrors,
- message: __( 'Health check failed. Please ensure the site is accessible and the api key is correct.', 'onelogs' ),
- } );
- setShowNotice( true );
- setIsProcessing( false );
- return;
- }
-
- setShowNotice( false );
- const submitResponse = await onSubmit();
-
- if ( ! submitResponse.ok ) {
- const errorData = await submitResponse.json();
- setErrors( {
- ...newErrors,
- message: errorData.message || __( 'An error occurred while saving the site. Please try again.', 'onelogs' ),
- } );
- setShowNotice( true );
- }
- if ( submitResponse?.data?.status === 400 ) {
- setErrors( {
- ...newErrors,
- message: submitResponse?.message || __( 'An error occurred while saving the site. Please try again.', 'onelogs' ),
- } );
- setShowNotice( true );
- }
- } catch ( error ) {
- setErrors( {
- ...newErrors,
- message: __( 'An unexpected error occurred. Please try again.', 'onelogs' ),
- } );
- setShowNotice( true );
- setIsProcessing( false );
- return;
- }
-
- setIsProcessing( false );
- };
-
- const handleMainModalClose = () => {
- onClose();
- };
-
- const hasChanges = useMemo( () => {
- if ( ! editing ) {
- return true;
- } // Always allow submission for new sites
-
- return (
- formData?.name !== originalData?.name ||
- formData?.url !== originalData?.url ||
- formData?.api_key !== originalData?.api_key
- );
- }, [ editing, formData, originalData ] );
-
- // Button should be disabled if:
- // 1. Currently processing, OR
- // 2. Required fields are empty, OR
- // 3. In editing mode and no changes have been made
- const isButtonDisabled = isProcessing ||
- ! formData.name ||
- ! formData.url ||
- ! formData.api_key ||
- ( editing && ! hasChanges );
-
- return (
- <>
-
-
- { showNotice && (
- setShowNotice( false ) }
- >
- { errors.message || errors.name || errors.url || errors.api_key }
-
- ) }
-
- setFormData( { ...formData, name: value } ) }
- error={ errors.name }
- help={ __( 'This is the name of the site that will be registered.', 'onelogs' ) }
- />
- setFormData( { ...formData, url: value } ) }
- error={ errors.url }
- help={ __( 'It must start with http or https and end with /, like: https://onelogs.com/', 'onelogs' ) }
- />
-
- setFormData( { ...formData, api_key: value } ) }
- error={ errors.api_key }
- help={ __( 'This is the api key that will be used to authenticate the site for onelogs.', 'onelogs' ) }
- />
-
-
-
-
- );
-};
-
-export default SiteModal;
diff --git a/assets/src/components/SiteModal.tsx b/assets/src/components/SiteModal.tsx
new file mode 100644
index 0000000..49241bf
--- /dev/null
+++ b/assets/src/components/SiteModal.tsx
@@ -0,0 +1,273 @@
+import { useState, useMemo } from 'react';
+import {
+ Modal,
+ TextControl,
+ TextareaControl,
+ Button,
+ Notice,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { isValidUrl } from '../js/utils';
+
+interface BrandSite {
+ name: string;
+ url: string;
+ api_key: string;
+}
+
+interface ErrorsType {
+ name: string;
+ url: string;
+ api_key: string;
+ message: string;
+}
+
+const SiteModal = ( {
+ formData,
+ setFormData,
+ onSubmit,
+ onClose,
+ editing,
+ originalData,
+}: {
+ formData: BrandSite;
+ setFormData: ( data: BrandSite ) => void;
+ onSubmit: () => Promise< Response >;
+ onClose: () => void;
+ editing: boolean;
+ originalData?: BrandSite | undefined;
+} ) => {
+ const [ errors, setErrors ] = useState< ErrorsType >( {
+ name: '',
+ url: '',
+ api_key: '',
+ message: '',
+ } );
+ const [ showNotice, setShowNotice ] = useState( false );
+ const [ isProcessing, setIsProcessing ] = useState( false );
+
+ const handleSubmit = async (): Promise< void > => {
+ // Validate inputs
+ let siteUrlError = '';
+ if ( ! formData.url.trim() ) {
+ siteUrlError = __( 'Site URL is required.', 'onelogs' );
+ } else if ( ! isValidUrl( formData.url ) ) {
+ siteUrlError = __(
+ 'Enter a valid URL (must start with http or https).',
+ 'onelogs'
+ );
+ }
+
+ const newErrors: ErrorsType = {
+ name: ! formData.name.trim()
+ ? __( 'Site Name is required.', 'onelogs' )
+ : '',
+ url: siteUrlError,
+ api_key: ! formData.api_key.trim()
+ ? __( 'API Key is required.', 'onelogs' )
+ : '',
+ message: '',
+ };
+
+ // Make sure site name is under 20 characters
+ if ( formData.name.length > 20 ) {
+ newErrors.name = __(
+ 'Site Name must be under 20 characters.',
+ 'onelogs'
+ );
+ }
+
+ setErrors( newErrors );
+ const hasErrors = Object.values( newErrors ).some( ( err ) => err );
+
+ if ( hasErrors ) {
+ setShowNotice( true );
+ return;
+ }
+
+ // Start processing
+ setIsProcessing( true );
+ setShowNotice( false );
+
+ try {
+ // Perform health-check
+ const healthCheck = await fetch(
+ `${ formData.url }/wp-json/onelogs/v1/health-check`,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-OneLogs-Token': formData.api_key,
+ },
+ }
+ );
+
+ const healthCheckData = await healthCheck.json();
+ if ( ! healthCheckData.success ) {
+ setErrors( {
+ ...newErrors,
+ message: __(
+ 'Health check failed. Please ensure the site is accessible and the api key is correct.',
+ 'onelogs'
+ ),
+ } );
+ setShowNotice( true );
+ setIsProcessing( false );
+ return;
+ }
+
+ setShowNotice( false );
+ const submitResponse: Response & {
+ data?: { status?: number };
+ message?: string;
+ } = await onSubmit();
+
+ if ( ! submitResponse?.ok ) {
+ const errorData = await submitResponse?.json();
+ setErrors( {
+ ...newErrors,
+ message:
+ errorData.message ||
+ __(
+ 'An error occurred while saving the site. Please try again.',
+ 'onelogs'
+ ),
+ } );
+ setShowNotice( true );
+ }
+ if ( submitResponse?.data?.status === 400 ) {
+ setErrors( {
+ ...newErrors,
+ message:
+ submitResponse?.message ||
+ __(
+ 'An error occurred while saving the site. Please try again.',
+ 'onelogs'
+ ),
+ } );
+ setShowNotice( true );
+ }
+ } catch {
+ setErrors( {
+ ...newErrors,
+ message: __(
+ 'An unexpected error occurred. Please try again.',
+ 'onelogs'
+ ),
+ } );
+ setShowNotice( true );
+ setIsProcessing( false );
+ return;
+ } finally {
+ setIsProcessing( false );
+ }
+ };
+
+ // Check if form data has changed from original data (only for editing mode)
+ const hasChanges = useMemo( () => {
+ if ( ! editing ) {
+ return true;
+ } // Always allow submission for new sites
+
+ return (
+ formData.name !== originalData?.name ||
+ formData.url !== originalData?.url ||
+ formData.api_key !== originalData?.api_key
+ );
+ }, [ editing, formData, originalData ] );
+
+ // Button should be disabled if:
+ // 1. Currently processing, OR
+ // 2. Required fields are empty, OR
+ // 3. In editing mode and no changes have been made
+ const isButtonDisabled =
+ isProcessing ||
+ ! formData.name ||
+ ! formData.url ||
+ ! formData.api_key ||
+ ( editing && ! hasChanges );
+
+ return (
+
+ { showNotice && (
+ setShowNotice( false ) }
+ >
+ { errors.message ||
+ errors.name ||
+ errors.url ||
+ errors.api_key }
+
+ ) }
+
+
+ setFormData( { ...formData, name: value } )
+ }
+ help={ __(
+ 'This is the name of the site that will be registered.',
+ 'onelogs'
+ ) }
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
+ />
+
+ setFormData( { ...formData, url: value } )
+ }
+ help={ __(
+ 'It must start with http or https and end with /, like: https://rtcamp.com/',
+ 'onelogs'
+ ) }
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
+ />
+
+
+ setFormData( { ...formData, api_key: value } )
+ }
+ help={ __(
+ 'This is the API key that will be used to authenticate the site for OneLogs.',
+ 'onelogs'
+ ) }
+ __nextHasNoMarginBottom
+ />
+
+
+
+ );
+};
+
+export default SiteModal;
diff --git a/assets/src/components/SiteSettings.js b/assets/src/components/SiteSettings.tsx
similarity index 64%
rename from assets/src/components/SiteSettings.js
rename to assets/src/components/SiteSettings.tsx
index c9d4f70..59796f5 100644
--- a/assets/src/components/SiteSettings.js
+++ b/assets/src/components/SiteSettings.tsx
@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
import { useEffect, useState, useCallback } from 'react';
import {
TextareaControl,
@@ -16,21 +13,22 @@ import {
import { __ } from '@wordpress/i18n';
/**
- * internal dependencies
+ * Internal dependencies
*/
import { API_NAMESPACE, NONCE, API_KEY } from '../js/constants';
-/**
- * SiteSettings component for managing API key and governing site connection.
- *
- * @return {JSX.Element} Rendered component.
- */
+type NoticeState = {
+ type: 'success' | 'error' | 'warning' | 'info';
+ message: string;
+} | null;
+
const SiteSettings = () => {
- const [ apiKey, setApiKey ] = useState( '' );
+ const [ apiKey, setApiKey ] = useState( API_KEY );
const [ isLoading, setIsLoading ] = useState( false );
- const [ notice, setNotice ] = useState( null );
+ const [ notice, setNotice ] = useState< NoticeState >( null );
const [ governingSite, setGoverningSite ] = useState( '' );
- const [ showDisconnectionModal, setShowDisconnectionModal ] = useState( false );
+ const [ showDisconnectionModal, setShowDisconnectionModal ] =
+ useState( false );
const fetchApiKey = useCallback( async () => {
try {
@@ -48,10 +46,13 @@ const SiteSettings = () => {
}
const data = await response.json();
setApiKey( data?.secret_key || '' );
- } catch ( error ) {
+ } catch {
setNotice( {
type: 'error',
- message: __( 'Failed to fetch api key. Please try again later.', 'onelogs' ),
+ message: __(
+ 'Failed to fetch API key. Please try again later.',
+ 'onelogs'
+ ),
} );
} finally {
setIsLoading( false );
@@ -76,18 +77,27 @@ const SiteSettings = () => {
setApiKey( data.secret_key );
setNotice( {
type: 'warning',
- message: __( 'API key regenerated successfully. Please update your old key with this newly generated key to make sure plugin works properly.', 'onelogs' ),
+ message: __(
+ 'API key regenerated successfully. Please update your old key with this newly generated key to make sure plugin works properly.',
+ 'onelogs'
+ ),
} );
} else {
setNotice( {
type: 'error',
- message: __( 'Failed to regenerate api key. Please try again later.', 'onelogs' ),
+ message: __(
+ 'Failed to regenerate API key. Please try again later.',
+ 'onelogs'
+ ),
} );
}
- } catch ( error ) {
+ } catch {
setNotice( {
type: 'error',
- message: __( 'Error regenerating api key. Please try again later.', 'onelogs' ),
+ message: __(
+ 'Error regenerating API key. Please try again later.',
+ 'onelogs'
+ ),
} );
}
}, [] );
@@ -104,19 +114,21 @@ const SiteSettings = () => {
'X-WP-Nonce': NONCE,
'X-OneLogs-Token': apiKey,
},
- },
+ }
);
if ( ! response.ok ) {
throw new Error( 'Network response was not ok' );
}
const data = await response.json();
setGoverningSite( data?.governing_site_url || '' );
- } catch ( error ) {
+ } catch {
setNotice( {
type: 'error',
- message: __( 'Failed to fetch governing site. Please try again later.', 'onelogs' ),
- },
- );
+ message: __(
+ 'Failed to fetch governing site. Please try again later.',
+ 'onelogs'
+ ),
+ } );
} finally {
setIsLoading( false );
}
@@ -124,29 +136,32 @@ const SiteSettings = () => {
const deleteGoverningSiteConnection = useCallback( async () => {
try {
- const response = await fetch(
- `${ API_NAMESPACE }/governing-site`,
- {
- method: 'DELETE',
- headers: {
- 'Content-Type': 'application/json',
- 'X-WP-Nonce': NONCE,
- 'X-OneLogs-Token': apiKey,
- },
+ const response = await fetch( `${ API_NAMESPACE }/governing-site`, {
+ method: 'DELETE',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-WP-Nonce': NONCE,
+ 'X-OneLogs-Token': apiKey,
},
- );
+ } );
if ( ! response.ok ) {
throw new Error( 'Network response was not ok' );
}
setGoverningSite( '' );
setNotice( {
type: 'success',
- message: __( 'Governing site disconnected successfully.', 'onelogs' ),
+ message: __(
+ 'Governing site disconnected successfully.',
+ 'onelogs'
+ ),
} );
- } catch ( error ) {
+ } catch {
setNotice( {
type: 'error',
- message: __( 'Failed to disconnect governing site. Please try again later.', 'onelogs' ),
+ message: __(
+ 'Failed to disconnect governing site. Please try again later.',
+ 'onelogs'
+ ),
} );
} finally {
setShowDisconnectionModal( false );
@@ -168,18 +183,18 @@ const SiteSettings = () => {
return (
<>
-
{ notice && (
setNotice( null ) }
>
{ notice.message }
) }
-
@@ -189,17 +204,27 @@ const SiteSettings = () => {
-
@@ -236,7 +266,9 @@ const SiteSettings = () => {
variant="secondary"
isDestructive
onClick={ handleDisconnectGoverningSite }
- disabled={ governingSite.trim().length === 0 || isLoading }
+ disabled={
+ governingSite.trim().length === 0 || isLoading
+ }
>
{ __( 'Disconnect Governing Site', 'onelogs' ) }
@@ -245,8 +277,14 @@ const SiteSettings = () => {
{} } // to avoid ts warning
/>
@@ -255,10 +293,22 @@ const SiteSettings = () => {
setShowDisconnectionModal( false ) }
- shouldCloseOnClickOutside={ true }
+ shouldCloseOnClickOutside
>
-
-
-
- { __( 'OneLogs', 'onepress-logs' ) } + { __( 'OneLogs', 'onelogs' ) }
{ log.object_data.edit_link && (
- { log.object_data.edit_link_text } ) }
+
+ {
+ log.object_data
+ .edit_link_text
+ }
+
+ ) }
) }
-
);
} )() }
-
{ /*{ user?.display_name }*/ }
{ user?.display_name ?? 'Guest User' }
- { log.user_role ? log.user_role : 'None' }
+
+ { user?.display_name ??
+ 'Guest User' }
+
+
+ { log.user_role
+ ? log.user_role
+ : 'None' }
+
{ __( 'No logs found matching the current filters.', 'onelogs' ) }
++ { __( + 'No logs found matching the current filters.', + 'onelogs' + ) } +
) } ); diff --git a/assets/src/admin/logs/components/Pagination.tsx b/assets/src/admin/logs/components/Pagination.tsx index 26c92b2..3268668 100644 --- a/assets/src/admin/logs/components/Pagination.tsx +++ b/assets/src/admin/logs/components/Pagination.tsx @@ -9,18 +9,26 @@ interface PaginationProps { totalLogs: number; } -export const Pagination: React.FC
+
= ( {
-
);
};
diff --git a/assets/src/admin/logs/types.ts b/assets/src/admin/logs/types.ts
index aaf4d9e..f071fd9 100644
--- a/assets/src/admin/logs/types.ts
+++ b/assets/src/admin/logs/types.ts
@@ -19,7 +19,7 @@ export interface LogEntry {
summary: string;
created: string;
ip: string;
- meta: Record
{ totalLogs > 0 && (
@@ -42,9 +50,12 @@ export const Pagination: React.FC
- { __( 'Total logs:', 'onelogs' ) } { totalLogs.toLocaleString() }
+ { __( 'Total logs:', 'onelogs' ) }{ ' ' }
+ { totalLogs.toLocaleString() }
) }
- { __( 'Page', 'onelogs' ) } { currentPage } { __( 'of', 'onelogs' ) } { totalPages }
-
+
+
+ { __( 'Page', 'onelogs' ) } { currentPage }{ ' ' }
+ { __( 'of', 'onelogs' ) } { totalPages }
+
+
{ __( 'Are you sure you want to disconnect from the governing site? This action cannot be undone.', 'onelogs' ) }
-
+
-
+
+ { __( + 'Are you sure you want to disconnect from the governing site? This action cannot be undone.', + 'onelogs' + ) } +
+| { __( 'Site Name', 'onelogs' ) } | @@ -62,7 +74,10 @@ const SiteTable = ( { sites, onEdit, onDelete, setFormData, setShowModal } ) =>||||
|---|---|---|---|---|
| + | { __( 'No Brand Sites found.', 'onelogs' ) } | |||
| { site?.name } | { site?.url } | -{ site?.api_key.substring( 0, 10 ) }... |
+
+
+ { site?.api_key?.substring( 0, 10 ) }...
+
+ |
|