From d3f24f18802fa1ac9b642412a3cb934fe77da345 Mon Sep 17 00:00:00 2001
From: Johanna Tchon <johanna.tchon@liferay.com>
Date: Wed, 21 Dec 2022 09:03:38 -0800
Subject: [PATCH 1/6] ISSITES-5869 add page size to pagination

---
 .../dashboard-remote-app/src/components/Pagination.js    | 9 ++++++---
 .../dashboard-remote-app/src/components/Table.js         | 9 ++++++---
 .../dashboard-remote-app/src/hooks/useProducts.js        | 8 ++++----
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Pagination.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Pagination.js
index 55f41643eb8fba..29b339e1d2ceb3 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Pagination.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Pagination.js
@@ -5,16 +5,19 @@ import '../Dashboard.css';
 import getIconSpriteMap from './getIconSpriteMap';
 
 function Pagination(props) {
-	var {page, setPage, totalCount} = props;
+	var {delta, page, setDelta, setPage, totalCount} = props;
 
 	return (
 		<ClayPaginationBarWithBasicItems
-			activeDelta={10}
+			activeDelta={delta}
 			activePage={page}
+            deltas={[10, 25, 50].map((size) => ({
+                label: size,
+            }))}
 			ellipsisBuffer={1}
 			ellipsisProps={{'aria-label': 'More', 'title': 'More'}}
+            onDeltaChange={setDelta}
 			onPageChange={setPage}
-			showDeltasDropDown={false}
 			spritemap={getIconSpriteMap()}
 			totalItems={totalCount}
 		/>
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
index 0668a3e9ee007b..4ef320f5f79197 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
@@ -16,8 +16,9 @@ const Table = () => {
 	const publisherName = 'Acme Co';
 	const [languageId] = useState(Liferay.ThemeDisplay.getLanguageId());
 	const [page, setPage] = useState(1);
+	const [delta, setDelta] = useState(10);
 
-	const {data, status} = useProducts(languageId, page);
+	const {data, status} = useProducts(languageId, page, delta);
 
 	if (status === 'success' && data.totalCount === 0) {
 		return (
@@ -104,7 +105,9 @@ const Table = () => {
 				</table>
 
 				<Pagination
+					delta={delta}
 					page={page}
+					setDelta={setDelta}
 					setPage={setPage}
 					totalCount={data.totalCount}
 				/>
@@ -114,8 +117,8 @@ const Table = () => {
 
 	return (
 		<div className="align-items-center d-flex flex-column justify-items-center">
-			<div class="spinner-border text-primary" role="status">
-				<span class="sr-only">Loading...</span>
+			<div className="spinner-border text-primary" role="status">
+				<span className="sr-only">Loading...</span>
 			</div>
 
 			<div>
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js
index 54f6f99425000e..06dbac099d008b 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js
@@ -16,21 +16,21 @@ import {useQuery} from 'react-query';
 
 import fetchProducts from '../queries/fetchProducts';
 
-const getProducts = (_, languageId, page) => {
+const getProducts = (_, languageId, page, pageSize) => {
 	const queryValues = {
 		params: {
 			_,
 			languageId,
 			page,
-			pageSize: 10,
+			pageSize,
 		},
 	};
 
 	return fetchProducts(queryValues, languageId);
 };
 
-export default function useProducts(languageId, page) {
-	return useQuery(['Products', languageId, page, 10], getProducts, {
+export default function useProducts(languageId, page, pageSize) {
+	return useQuery(['Products', languageId, page, pageSize], getProducts, {
 		keepPreviousData: true,
 	});
 }

From 91e56182dc4175885405a1aefb5536d251ba5a98 Mon Sep 17 00:00:00 2001
From: Johanna Tchon <johanna.tchon@liferay.com>
Date: Thu, 22 Dec 2022 10:34:56 -0800
Subject: [PATCH 2/6] ISSITES-5869 use clay loading indicator

---
 .../dashboard-remote-app/src/components/Table.js             | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
index 4ef320f5f79197..a725c4e23a2805 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
@@ -1,4 +1,5 @@
 import {useState} from 'react';
+import ClayLoadingIndicator from '@clayui/loading-indicator';
 
 import Pagination from './Pagination';
 import TableBody from './TableBody';
@@ -117,9 +118,7 @@ const Table = () => {
 
 	return (
 		<div className="align-items-center d-flex flex-column justify-items-center">
-			<div className="spinner-border text-primary" role="status">
-				<span className="sr-only">Loading...</span>
-			</div>
+			<ClayLoadingIndicator displayType="primary" shape="squares" size="lg" />
 
 			<div>
 				Hang tight, we are preparing your arrival as publisher and

From c9303d47970b1bd99d98d2a8ba6af37cf8f37ac6 Mon Sep 17 00:00:00 2001
From: Johanna Tchon <johanna.tchon@liferay.com>
Date: Thu, 22 Dec 2022 16:22:35 -0800
Subject: [PATCH 3/6] ISSITES-5869 make sortable by table header

---
 .../dashboard-remote-app/src/Dashboard.css    | 12 ++++++++++
 .../src/components/Table.js                   | 24 +++++++++++++++++--
 .../src/components/TableHead.js               | 12 ++++++++--
 .../src/hooks/useProducts.js                  |  7 +++---
 4 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/Dashboard.css b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/Dashboard.css
index e69de29bb2d1d6..42cc6e42ca2cfb 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/Dashboard.css
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/Dashboard.css
@@ -0,0 +1,12 @@
+.table .column-name:hover {
+    cursor: pointer;
+}
+
+.table .column-name:hover:after {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='lexicon-icon lexicon-icon-order-arrow' height='12' width='12' role='presentation' viewBox='0 0 512 512'%3E%3Cpath class='lexicon-icon-outline order-arrow-arrow-down' d='M307.6,431.5l71.6,71.6c11.9,10.8,32.9,11.2,45.8,0l71.6-71.6c29.8-33.6-15.8-74.9-45.8-45.8l-16.7,16.7V31.6c0-42.5-64-42.5-64,0v370.8l-16.7-16.7C321.6,355.8,277.9,400.6,307.6,431.5z' fill='%23999AA3'%3E%3C/path%3E%3Cpath class='lexicon-icon-outline order-arrow-arrow-up' d='M204.4,80.5L132.8,8.9C120.9-1.8,99.9-2.3,87,8.9L15.4,80.5c-29.8,33.6,15.7,74.9,45.8,45.8l16.7-16.7v370.8c0,42.5,64,42.5,64,0V109.6l16.7,16.7C190.4,156.2,234.1,111.4,204.4,80.5z' fill='%23999AA3'%3E%3C/path%3E%3C/svg%3E");
+    padding-left: 0.5rem;
+}
+
+.table .column-name:hover svg {
+    display: none;
+}
\ No newline at end of file
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
index a725c4e23a2805..0ef332e7a61b2d 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
@@ -18,8 +18,28 @@ const Table = () => {
 	const [languageId] = useState(Liferay.ThemeDisplay.getLanguageId());
 	const [page, setPage] = useState(1);
 	const [delta, setDelta] = useState(10);
+	const [sort, setSort] = useState('');
+	const [order, setOrder] = useState(true);
 
-	const {data, status} = useProducts(languageId, page, delta);
+	const {data, refetch, status} = useProducts(languageId, page, delta, sort);
+
+	function handleSortClick(event) {
+		const sortCategory = event.target.dataset.category;
+
+		if (sortCategory === 'name' || sortCategory === 'modifiedDate') {
+			if (sort.includes(sortCategory)) {
+				const currentOrder = order ? ':asc' : ':desc';
+
+				setSort(sortCategory + currentOrder);
+				setOrder(!order);
+			} else {
+				setSort(sortCategory + ':asc');
+				setOrder(true);
+			}
+
+			refetch();
+		}
+	}
 
 	if (status === 'success' && data.totalCount === 0) {
 		return (
@@ -96,7 +116,7 @@ const Table = () => {
 		return (
 			<>
 				<table className="table">
-					<TableHead columns={columns} />
+					<TableHead columns={columns} handleSortClick={handleSortClick} order={order} sort={sort}/>
 					<TableBody
 						columns={columns}
 						data={data}
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableHead.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableHead.js
index 89277f13385011..5290c4aa8081be 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableHead.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableHead.js
@@ -1,9 +1,17 @@
-const TableHead = ({columns}) => {
+const TableHead = ({columns, handleSortClick, order, sort}) => {
 	return (
 		<thead>
 			<tr>
 				{columns.map(({label, accessor}) => {
-					return <th key={accessor}>{label}</th>;
+					if (sort.includes(accessor)) {
+						if (order) {
+							return <th className="column-name" data-category={accessor} key={accessor} onClick={handleSortClick}>{label} <svg class="lexicon-icon lexicon-icon-order-arrow-up" focusable="false" role="presentation"><use xlinkHref="/o/admin-theme/images/clay/icons.svg#order-arrow-up" /></svg></th>;
+						} else {
+							return <th className="column-name" data-category={accessor} key={accessor} onClick={handleSortClick}>{label} <svg class="lexicon-icon lexicon-icon-order-arrow-down" focusable="false" role="presentation"><use xlinkHref="/o/admin-theme/images/clay/icons.svg#order-arrow-down" /></svg></th>;
+						}
+					}
+
+					return <th className="column-name" data-category={accessor} key={accessor} onClick={handleSortClick}>{label}</th>;
 				})}
 			</tr>
 		</thead>
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js
index 06dbac099d008b..86e1defaad7d85 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js
@@ -16,21 +16,22 @@ import {useQuery} from 'react-query';
 
 import fetchProducts from '../queries/fetchProducts';
 
-const getProducts = (_, languageId, page, pageSize) => {
+const getProducts = (_, languageId, page, pageSize, sort) => {
 	const queryValues = {
 		params: {
 			_,
 			languageId,
 			page,
 			pageSize,
+			sort
 		},
 	};
 
 	return fetchProducts(queryValues, languageId);
 };
 
-export default function useProducts(languageId, page, pageSize) {
-	return useQuery(['Products', languageId, page, pageSize], getProducts, {
+export default function useProducts(languageId, page, pageSize, sort) {
+	return useQuery(['Products', languageId, page, pageSize, sort], getProducts, {
 		keepPreviousData: true,
 	});
 }

From aa33418913493bd49ee1a5f810959145c0c2fda5 Mon Sep 17 00:00:00 2001
From: Johanna Tchon <johanna.tchon@liferay.com>
Date: Tue, 27 Dec 2022 16:54:44 -0800
Subject: [PATCH 4/6] ISSITES-5869 copyright for all JS files

---
 .../src/components/Pagination.js                  | 14 ++++++++++++++
 .../dashboard-remote-app/src/components/Table.js  | 14 ++++++++++++++
 .../src/components/TableBody.js                   | 14 ++++++++++++++
 .../src/components/TableHead.js                   | 14 ++++++++++++++
 .../src/components/getIconSpriteMap.js            | 15 +++++++++------
 5 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Pagination.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Pagination.js
index 29b339e1d2ceb3..125a8e2fd8d35a 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Pagination.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Pagination.js
@@ -1,3 +1,17 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
 import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';
 import React from 'react';
 
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
index 0ef332e7a61b2d..82334383c3f7e2 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
@@ -1,3 +1,17 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
 import {useState} from 'react';
 import ClayLoadingIndicator from '@clayui/loading-indicator';
 
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableBody.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableBody.js
index a85608734c09e2..a5275a4059f255 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableBody.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableBody.js
@@ -1,3 +1,17 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
 const TableBody = ({columns, data, languageId, status}) => {
 	return (
 		<tbody>
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableHead.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableHead.js
index 5290c4aa8081be..60600aa13e63ed 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableHead.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableHead.js
@@ -1,3 +1,17 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
 const TableHead = ({columns, handleSortClick, order, sort}) => {
 	return (
 		<thead>
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/getIconSpriteMap.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/getIconSpriteMap.js
index 8b49c4a42a3d29..231553e5a055e9 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/getIconSpriteMap.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/getIconSpriteMap.js
@@ -1,12 +1,15 @@
 /**
  * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  *
- * The contents of this file are subject to the terms of the Liferay Enterprise
- * Subscription License ("License"). You may not use this file except in
- * compliance with the License. You can obtain a copy of the License by
- * contacting Liferay, Inc. See the License for the specific language governing
- * permissions and limitations under the License, including but not limited to
- * distribution rights of the Software.
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
  */
 
 export default function getIconSpriteMap() {

From 45bc41b32b540964bb82d11b2ec8076b8a93ab82 Mon Sep 17 00:00:00 2001
From: Johanna Tchon <johanna.tchon@liferay.com>
Date: Tue, 27 Dec 2022 16:23:33 -0800
Subject: [PATCH 5/6] ISSITES-5869 add search functionality to Dashboard

---
 .../src/components/Search.js                  |  70 ++++++++
 .../src/components/Table.js                   | 151 ++++++++++--------
 .../src/hooks/useProducts.js                  |   9 +-
 3 files changed, 159 insertions(+), 71 deletions(-)
 create mode 100644 workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Search.js

diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Search.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Search.js
new file mode 100644
index 00000000000000..a1327e72021ba1
--- /dev/null
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Search.js
@@ -0,0 +1,70 @@
+import React from 'react';
+
+import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
+import {ClayInput} from '@clayui/form';
+import ClayLayout from '@clayui/layout';
+import getIconSpriteMap from './getIconSpriteMap';
+
+function Search({handleClearSearch, handleKeyPress, searchTerm, totalCount}) {
+	return (
+        <>
+            <ClayLayout.Row justify="between">
+                <ClayLayout.Col size={3}>
+                    <ClayInput.Group>
+                        <ClayInput.GroupItem>
+                            <ClayInput
+                                aria-label="Search"
+                                className="form-control input-group-inset input-group-inset-after"
+                                id="searchInput"
+                                onKeyUp={handleKeyPress}
+                                placeholder="Search"
+                                type="text"
+                            />
+                            <ClayInput.GroupInsetItem after tag="span">
+                                {searchTerm &&
+                                    <ClayButtonWithIcon
+                                        aria-label="Close search"
+                                        displayType="unstyled"
+                                        onClick={handleClearSearch}
+                                        spritemap={getIconSpriteMap()}
+                                        symbol="times"
+                                    />
+                                }
+                                {!searchTerm &&
+                                    <ClayButtonWithIcon
+                                        aria-label="Search"
+                                        displayType="unstyled"
+                                        onClick={handleKeyPress}
+                                        spritemap={getIconSpriteMap()}
+                                        symbol="search"
+                                        type="submit"
+                                    />
+                                }
+                            </ClayInput.GroupInsetItem>
+                        </ClayInput.GroupItem>
+                    </ClayInput.Group>
+                </ClayLayout.Col>
+
+                <ClayLayout.Col>
+                    <ClayLayout.Row justify="end">
+                        <ClayButton
+                            aria-label="Add"
+                            className="nav-btn nav-btn-monospaced py-3 px-3"
+                            displayType="primary"
+                        >
+                            New App
+                        </ClayButton>
+                    </ClayLayout.Row>
+                </ClayLayout.Col>
+            </ClayLayout.Row>
+
+            {searchTerm && 
+                <div className="search-results">
+                    {totalCount} results for "{searchTerm}"
+                </div>            
+            }
+        </>
+	);
+}
+
+export default Search;
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
index 82334383c3f7e2..a02374f7e11973 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js
@@ -16,6 +16,7 @@ import {useState} from 'react';
 import ClayLoadingIndicator from '@clayui/loading-indicator';
 
 import Pagination from './Pagination';
+import Search from './Search';
 import TableBody from './TableBody';
 import TableHead from './TableHead';
 import useProducts from '../hooks/useProducts';
@@ -34,8 +35,18 @@ const Table = () => {
 	const [delta, setDelta] = useState(10);
 	const [sort, setSort] = useState('');
 	const [order, setOrder] = useState(true);
+	const [search, setSearch] = useState('');
 
-	const {data, refetch, status} = useProducts(languageId, page, delta, sort);
+	const {data, refetch, status} = useProducts(languageId, page, delta, sort, search);
+
+	function handleClearSearch() {
+		setSearch('');
+		document.getElementById('searchInput').value = '';
+	}
+
+	function handleKeyPress(event) {
+		setSearch(event.target.value);
+	}
 
 	function handleSortClick(event) {
 		const sortCategory = event.target.dataset.category;
@@ -57,78 +68,84 @@ const Table = () => {
 
 	if (status === 'success' && data.totalCount === 0) {
 		return (
-			<div className="align-items-center d-flex flex-column justify-items-center no-apps">
-				<svg
-					width="144"
-					height="80"
-					viewBox="0 0 144 80"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<rect width="144" height="80" rx="8" fill="#EDF3FE" />
-					<path
-						opacity="0.2"
-						d="M86 44H76V54H86V44Z"
-						fill="#0B5FFF"
-					/>
-					<path
-						d="M86 44H76V54H86V44Z"
-						stroke="#004AD7"
-						stroke-width="3"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-					<path
-						opacity="0.2"
-						d="M68 44H58V54H68V44Z"
-						fill="#0B5FFF"
-					/>
-					<path
-						d="M68 44H58V54H68V44Z"
-						stroke="#004AD7"
-						stroke-width="3"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-					<path
-						opacity="0.2"
-						d="M86 26H76V36H86V26Z"
-						fill="#0B5FFF"
-					/>
-					<path
-						d="M86 26H76V36H86V26Z"
-						stroke="#004AD7"
-						stroke-width="3"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-					<path
-						opacity="0.2"
-						d="M68 26H58V36H68V26Z"
-						fill="#0B5FFF"
-					/>
-					<path
-						d="M68 26H58V36H68V26Z"
-						stroke="#004AD7"
-						stroke-width="3"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
-
-				<h4 className="font-weight-bold">No apps yet</h4>
-
-				<div>
-					Create new apps and they will show up here. Click on "New
-					App" to start creating apps
+			<>
+				<Search handleClearSearch={handleClearSearch} handleKeyPress={handleKeyPress} searchTerm={search} totalCount={data.totalCount}/>
+
+				<div className="align-items-center d-flex flex-column justify-items-center no-apps">
+					<svg
+						width="144"
+						height="80"
+						viewBox="0 0 144 80"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<rect width="144" height="80" rx="8" fill="#EDF3FE" />
+						<path
+							opacity="0.2"
+							d="M86 44H76V54H86V44Z"
+							fill="#0B5FFF"
+						/>
+						<path
+							d="M86 44H76V54H86V44Z"
+							stroke="#004AD7"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							opacity="0.2"
+							d="M68 44H58V54H68V44Z"
+							fill="#0B5FFF"
+						/>
+						<path
+							d="M68 44H58V54H68V44Z"
+							stroke="#004AD7"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							opacity="0.2"
+							d="M86 26H76V36H86V26Z"
+							fill="#0B5FFF"
+						/>
+						<path
+							d="M86 26H76V36H86V26Z"
+							stroke="#004AD7"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							opacity="0.2"
+							d="M68 26H58V36H68V26Z"
+							fill="#0B5FFF"
+						/>
+						<path
+							d="M68 26H58V36H68V26Z"
+							stroke="#004AD7"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+
+					<h4 className="font-weight-bold">No apps yet</h4>
+
+					<div>
+						Create new apps and they will show up here. Click on "New
+						App" to start creating apps
+					</div>
 				</div>
-			</div>
+			</>
 		);
 	}
 
 	if (status === 'success' && data.totalCount !== 0) {
 		return (
 			<>
+				<Search handleClearSearch={handleClearSearch} handleKeyPress={handleKeyPress} searchTerm={search} totalCount={data.totalCount}/>
+
 				<table className="table">
 					<TableHead columns={columns} handleSortClick={handleSortClick} order={order} sort={sort}/>
 					<TableBody
@@ -156,7 +173,7 @@ const Table = () => {
 
 			<div>
 				Hang tight, we are preparing your arrival as publisher and
-				member of{' '}
+				member of&nbsp;
 				<span className="font-weight-bold">{publisherName}</span>
 			</div>
 		</div>
diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js
index 86e1defaad7d85..ace4c843ae3ba8 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/hooks/useProducts.js
@@ -16,22 +16,23 @@ import {useQuery} from 'react-query';
 
 import fetchProducts from '../queries/fetchProducts';
 
-const getProducts = (_, languageId, page, pageSize, sort) => {
+const getProducts = (_, languageId, page, pageSize, sort, search) => {
 	const queryValues = {
 		params: {
 			_,
 			languageId,
 			page,
 			pageSize,
-			sort
+			sort,
+			search
 		},
 	};
 
 	return fetchProducts(queryValues, languageId);
 };
 
-export default function useProducts(languageId, page, pageSize, sort) {
-	return useQuery(['Products', languageId, page, pageSize, sort], getProducts, {
+export default function useProducts(languageId, page, pageSize, sort, search) {
+	return useQuery(['Products', languageId, page, pageSize, sort, search], getProducts, {
 		keepPreviousData: true,
 	});
 }

From ffb0170561a3199cbecda77a7d04efd32189e2be Mon Sep 17 00:00:00 2001
From: Johanna Tchon <johanna.tchon@liferay.com>
Date: Tue, 27 Dec 2022 16:54:14 -0800
Subject: [PATCH 6/6] ISSITES-5869 copyright for search

---
 .../dashboard-remote-app/src/components/Search.js  | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Search.js b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Search.js
index a1327e72021ba1..22c0fabd5292ac 100644
--- a/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Search.js
+++ b/workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Search.js
@@ -1,3 +1,17 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
 import React from 'react';
 
 import ClayButton, {ClayButtonWithIcon} from '@clayui/button';