lint fixes (+3 squashed commits) (#55773)

Squashed commits:
[b107c819e2] Feedback application
[8ba71aaab4] Post rebase conflicts
[13eb412e35] Add: Ability to crate custom DataViews.

packages/edit-site/src/components/page-pages/index.js

@@ -6,19 +6,20 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
 import Link from '../routes/link';
 import { DataViews, viewTypeSupportsMap } from '../dataviews';
-import { default as DEFAULT_VIEWS } from './default-views';
+import { default as DEFAULT_VIEWS } from '../sidebar-dataviews/default-views';
 import {
 	useTrashPostAction,
 	usePermanentlyDeletePostAction,
@@ -44,21 +45,69 @@ const defaultConfigPerViewType = {
 // The reason for that is to match the default statuses coming from the endpoint (entity request).
 export const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All statuses but 'trash'.
 
-export default function PagePages() {
-	const postType = 'page';
-	const [ selection, setSelection ] = useState( [] );
+function useView( type ) {
 	const {
-		params: { path, activeView = 'all' },
+		params: { activeView = 'all', isCustom = 'false' },
 	} = useLocation();
-	const initialView = DEFAULT_VIEWS.find(
-		( { slug } ) => slug === activeView
-	).view;
-	const [ view, setView ] = useState( initialView );
+	const selectedDefaultView =
+		isCustom === 'false' &&
+		DEFAULT_VIEWS[ type ].find( ( { slug } ) => slug === activeView )?.view;
+	const [ view, setView ] = useState( selectedDefaultView );
+
 	useEffect( () => {
-		setView(
-			DEFAULT_VIEWS.find( ( { slug } ) => slug === activeView ).view
+		if ( selectedDefaultView ) {
+			setView( selectedDefaultView );
+		}
+	}, [ selectedDefaultView ] );
+	const editedViewRecord = useSelect(
+		( select ) => {
+			if ( isCustom !== 'true' ) {
+				return;
+			}
+			const { getEditedEntityRecord } = select( coreStore );
+			const dataviewRecord = getEditedEntityRecord(
+				'postType',
+				'wp_dataviews',
+				Number( activeView )
+			);
+			return dataviewRecord;
+		},
+		[ activeView, isCustom ]
+	);
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	const customView = useMemo( () => {
+		return (
+			editedViewRecord?.content && JSON.parse( editedViewRecord?.content )
 		);
-	}, [ path, activeView ] );
+	}, [ editedViewRecord?.content ] );
+	const setCustomView = useCallback(
+		( viewToSet ) => {
+			editEntityRecord(
+				'postType',
+				'wp_dataviews',
+				editedViewRecord?.id,
+				{
+					content: JSON.stringify( viewToSet ),
+				}
+			);
+		},
+		[ editEntityRecord, editedViewRecord?.id ]
+	);
+
+	if ( isCustom === 'false' ) {
+		return [ view, setView ];
+	} else if ( isCustom === 'true' && customView ) {
+		return [ customView, setCustomView ];
+	}
+	// Loading state where no the view was not found on custom views or default views.
+	return [ DEFAULT_VIEWS[ type ][ 0 ].view, setView ];
+}
+
+export default function PagePages() {
+	const postType = 'page';
+	const [ view, setView ] = useView( postType );
+	const [ selection, setSelection ] = useState( [] );
 	const { records: statuses, isResolving: isLoadingStatus } =
 		useEntityRecords( 'root', 'status' );
 	const defaultStatuses = useMemo( () => {

packages/edit-site/src/components/sidebar-dataviews/add-new-view.js

@@ -0,0 +1,142 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Modal,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { plus } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import DEFAULT_VIEWS from './default-views';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+function AddNewItemModalContent( { type, setIsAdding } ) {
+	const {
+		params: { path },
+	} = useLocation();
+	const history = useHistory();
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const [ title, setTitle ] = useState( '' );
+	const [ isSaving, setIsSaving ] = useState( false );
+	return (
+		<form
+			onSubmit={ async ( event ) => {
+				event.preventDefault();
+				setIsSaving( true );
+				const { getEntityRecords } = resolveSelect( coreStore );
+				let dataViewTaxonomyId;
+				const dataViewTypeRecords = await getEntityRecords(
+					'taxonomy',
+					'wp_dataviews_type',
+					{ slug: type }
+				);
+				if ( dataViewTypeRecords && dataViewTypeRecords.length > 0 ) {
+					dataViewTaxonomyId = dataViewTypeRecords[ 0 ].id;
+				} else {
+					const record = await saveEntityRecord(
+						'taxonomy',
+						'wp_dataviews_type',
+						{ name: type }
+					);
+					if ( record && record.id ) {
+						dataViewTaxonomyId = record.id;
+					}
+				}
+				const savedRecord = await saveEntityRecord(
+					'postType',
+					'wp_dataviews',
+					{
+						title,
+						status: 'publish',
+						wp_dataviews_type: dataViewTaxonomyId,
+						content: JSON.stringify(
+							DEFAULT_VIEWS[ type ][ 0 ].view
+						),
+					}
+				);
+				history.push( {
+					path,
+					activeView: savedRecord.id,
+					isCustom: 'true',
+				} );
+				setIsSaving( false );
+				setIsAdding( false );
+			} }
+		>
+			<VStack spacing="5">
+				<TextControl
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					placeholder={ __( 'My view' ) }
+					className="patterns-create-modal__name-input"
+				/>
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						onClick={ () => {
+							setIsAdding( false );
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+
+					<Button
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title || isSaving }
+						isBusy={ isSaving }
+					>
+						{ __( 'Create' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+export default function AddNewItem( { type } ) {
+	const [ isAdding, setIsAdding ] = useState( false );
+	return (
+		<>
+			<SidebarNavigationItem
+				icon={ plus }
+				onClick={ () => {
+					setIsAdding( true );
+				} }
+				className="dataviews__siderbar-content-add-new-item"
+			>
+				{ __( 'New view' ) }
+			</SidebarNavigationItem>
+			{ isAdding && (
+				<Modal
+					title={ __( 'Add new view' ) }
+					onRequestClose={ () => {
+						setIsAdding( false );
+					} }
+					overlayClassName=""
+				>
+					<AddNewItemModalContent
+						type={ type }
+						setIsAdding={ setIsAdding }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}

packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewItem from './dataview-item';
+import AddNewItem from './add-new-view';
+
+const EMPTY_ARRAY = [];
+
+function CustomDataViewItem( { dataviewId, isActive } ) {
+	const { dataview } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord } = select( coreStore );
+			return {
+				dataview: getEditedEntityRecord(
+					'postType',
+					'wp_dataviews',
+					dataviewId
+				),
+			};
+		},
+		[ dataviewId ]
+	);
+	const type = useMemo( () => {
+		const viewContent = JSON.parse( dataview.content );
+		return viewContent.type;
+	}, [ dataview.content ] );
+	return (
+		<DataViewItem
+			title={ dataview.title }
+			type={ type }
+			isActive={ isActive }
+			isCustom="true"
+			customViewId={ dataviewId }
+		/>
+	);
+}
+
+export function useCustomDataViews( type ) {
+	const customDataViews = useSelect( ( select ) => {
+		const { getEntityRecords } = select( coreStore );
+		const dataViewTypeRecords = getEntityRecords(
+			'taxonomy',
+			'wp_dataviews_type',
+			{ slug: type }
+		);
+		if ( ! dataViewTypeRecords || dataViewTypeRecords.length === 0 ) {
+			return EMPTY_ARRAY;
+		}
+		const dataViews = getEntityRecords( 'postType', 'wp_dataviews', {
+			wp_dataviews_type: dataViewTypeRecords[ 0 ].id,
+			orderby: 'date',
+			order: 'asc',
+		} );
+		if ( ! dataViews ) {
+			return EMPTY_ARRAY;
+		}
+		return dataViews;
+	} );
+	return customDataViews;
+}
+
+export default function CustomDataViewsList( { type, activeView, isCustom } ) {
+	const customDataViews = useCustomDataViews( type );
+	return (
+		<ItemGroup>
+			{ customDataViews.map( ( customViewRecord ) => {
+				return (
+					<CustomDataViewItem
+						key={ customViewRecord.id }
+						dataviewId={ customViewRecord.id }
+						isActive={
+							isCustom === 'true' &&
+							Number( activeView ) === customViewRecord.id
+						}
+					/>
+				);
+			} ) }
+			<AddNewItem type={ type } />
+		</ItemGroup>
+	);
+}

packages/edit-site/src/components/sidebar-dataviews/dataview-item.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { page, columns } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { useLink } from '../routes/link';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { unlock } from '../../lock-unlock';
+const { useLocation } = unlock( routerPrivateApis );
+
+function getDataViewIcon( type ) {
+	const icons = { list: page, grid: columns };
+	return icons[ type ];
+}
+
+export default function DataViewItem( {
+	title,
+	slug,
+	customViewId,
+	type,
+	icon,
+	isActive,
+	isCustom,
+} ) {
+	const {
+		params: { path },
+	} = useLocation();
+
+	const iconToUse = icon || getDataViewIcon( type );
+
+	const linkInfo = useLink( {
+		path,
+		activeView: isCustom === 'true' ? customViewId : slug,
+		isCustom,
+	} );
+	return (
+		<SidebarNavigationItem
+			icon={ iconToUse }
+			{ ...linkInfo }
+			aria-current={ isActive ? 'true' : undefined }
+		>
+			{ title }
+		</SidebarNavigationItem>
+	);
+}