From c3ee1889db8a904731366bb147b2b94f3497a544 Mon Sep 17 00:00:00 2001
From: Agata <a.j.dobrowolska@gmail.com>
Date: Thu, 31 Oct 2024 15:54:03 +0100
Subject: [PATCH] New dropdown menu

---
 .../components/site-manager/sidebar/index.tsx | 58 ++++++++++++++++---
 .../site-manager/sidebar/style.module.css     |  6 ++
 .../site-manager/site-info-panel/index.tsx    | 31 ++--------
 .../github-export-menu-item.tsx               |  2 +-
 .../toolbar-buttons/restore-from-zip.tsx      |  6 +-
 5 files changed, 65 insertions(+), 38 deletions(-)

diff --git a/packages/playground/website/src/components/site-manager/sidebar/index.tsx b/packages/playground/website/src/components/site-manager/sidebar/index.tsx
index 34521309fe..1d9a141f3d 100644
--- a/packages/playground/website/src/components/site-manager/sidebar/index.tsx
+++ b/packages/playground/website/src/components/site-manager/sidebar/index.tsx
@@ -10,9 +10,9 @@ import {
 	Icon,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
-	Flex,
+	Flex, DropdownMenu,
 } from '@wordpress/components';
-import { page } from '@wordpress/icons';
+import { moreVertical, page } from '@wordpress/icons';
 import { ClockIcon, WordPressIcon } from '@wp-playground/components';
 import {
 	setActiveSite,
@@ -27,6 +27,10 @@ import {
 } from '../../../lib/state/redux/slice-sites';
 import { PlaygroundRoute, redirectTo } from '../../../lib/state/url/router';
 import { setSiteManagerSection } from '../../../lib/state/redux/slice-ui';
+import { WordPressPRMenuItem } from '../../toolbar-buttons/wordpress-pr-menu-item';
+import { GutenbergPRMenuItem } from '../../toolbar-buttons/gutenberg-pr-menu-item';
+import { RestoreFromZipMenuItem } from '../../toolbar-buttons/restore-from-zip';
+import { GithubImportMenuItem } from '../../toolbar-buttons/github-import-menu-item';
 
 export function Sidebar({
 	className,
@@ -35,6 +39,7 @@ export function Sidebar({
 	className?: string;
 	afterSiteClick?: (slug: string) => void;
 }) {
+	const offline = useAppSelector((state) => state.ui.offline);
 	const storedSites = useAppSelector(selectSortedSites).filter(
 		(site) => site.metadata.storage !== 'none'
 	);
@@ -86,11 +91,50 @@ export function Sidebar({
 			role=""
 			aria-orientation={undefined}
 		>
-			<h1 className="sr-only">WordPress Playground</h1>
-			<div className={css.sidebarHeader}>
-				{/* Remove Playground logo because branding isn't finalized. */}
-				{/* <Logo className={css.sidebarLogoButton} /> */}
-			</div>
+			{/* Padding 3px is because of focus on dropdown button */}
+			<Flex justify={'space-between'} direction={'row'} style={{ padding: '3px'}}>
+				<h1 className="sr-only">WordPress Playground</h1>
+				<div className={css.sidebarHeader}>
+					{/* Remove Playground logo because branding isn't finalized. */}
+					{/* <Logo className={css.sidebarLogoButton} /> */}
+				</div>
+				<DropdownMenu
+					className={css.componentsDropdown}
+					icon={moreVertical}
+					label="Import actions"
+					popoverProps={{
+						placement: 'bottom-end',
+					}}
+				>
+					{({ onClose }) => (
+						<>
+							<WordPressPRMenuItem
+								onClose={onClose}
+								disabled={
+									offline
+								}
+							/>
+							<GutenbergPRMenuItem
+								onClose={onClose}
+								disabled={
+									offline
+								}
+							/>
+							<GithubImportMenuItem
+								onClose={onClose}
+								disabled={
+									offline
+								}
+							/>
+							<RestoreFromZipMenuItem
+								text={'Import from .zip'}
+								onClose={onClose}
+								disabled={false}
+							/>
+						</>
+					)}
+				</DropdownMenu>
+			</Flex>
 			<nav className={classNames(css.sidebarSection, css.sidebarContent)}>
 				<MenuGroup className={css.sidebarList}>
 					<MenuItem
diff --git a/packages/playground/website/src/components/site-manager/sidebar/style.module.css b/packages/playground/website/src/components/site-manager/sidebar/style.module.css
index bd38b89b96..72853fc8ed 100644
--- a/packages/playground/website/src/components/site-manager/sidebar/style.module.css
+++ b/packages/playground/website/src/components/site-manager/sidebar/style.module.css
@@ -105,3 +105,9 @@
 	font-weight: 400;
 	vertical-align: middle;
 }
+
+.components-dropdown {
+	button {
+		color: white;
+	}
+}
diff --git a/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx b/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
index b6216ac49c..9826d7c426 100644
--- a/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
+++ b/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
@@ -18,7 +18,6 @@ import { usePlaygroundClientInfo } from '../../../lib/use-playground-client';
 import { OfflineNotice } from '../../offline-notice';
 import { DownloadAsZipMenuItem } from '../../toolbar-buttons/download-as-zip';
 import { GithubExportMenuItem } from '../../toolbar-buttons/github-export-menu-item';
-import { GithubImportMenuItem } from '../../toolbar-buttons/github-import-menu-item';
 import { ReportError } from '../../toolbar-buttons/report-error';
 import { RestoreFromZipMenuItem } from '../../toolbar-buttons/restore-from-zip';
 import { TemporarySiteNotice } from '../temporary-site-notice';
@@ -32,8 +31,6 @@ import { encodeStringAsBase64 } from '../../../lib/base64';
 import { ActiveSiteSettingsForm } from '../site-settings-form/active-site-settings-form';
 import { getRelativeDate } from '../../../lib/get-relative-date';
 import { removeSite } from '../../../lib/state/redux/slice-sites';
-import { WordPressPRMenuItem } from '../../toolbar-buttons/wordpress-pr-menu-item';
-import { GutenbergPRMenuItem } from '../../toolbar-buttons/gutenberg-pr-menu-item';
 
 export function SiteInfoPanel({
 	className,
@@ -240,39 +237,19 @@ export function SiteInfoPanel({
 											</MenuGroup>
 										)}
 										<MenuGroup>
-											<DownloadAsZipMenuItem
-												onClose={onClose}
-												disabled={!playground}
-											/>
-											<RestoreFromZipMenuItem
-												onClose={onClose}
-												disabled={!playground}
-											/>
-										</MenuGroup>
-										<MenuGroup>
-											<GithubImportMenuItem
-												onClose={onClose}
-												disabled={
-													offline || !playground
-												}
-											/>
 											<GithubExportMenuItem
 												onClose={onClose}
 												disabled={
 													offline || !playground
 												}
 											/>
-											<WordPressPRMenuItem
+											<DownloadAsZipMenuItem
 												onClose={onClose}
-												disabled={
-													offline || !playground
-												}
+												disabled={!playground}
 											/>
-											<GutenbergPRMenuItem
+											<RestoreFromZipMenuItem
 												onClose={onClose}
-												disabled={
-													offline || !playground
-												}
+												disabled={!playground}
 											/>
 										</MenuGroup>
 										<MenuGroup>
diff --git a/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx b/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx
index 7873ed4b6d..e63089a639 100644
--- a/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx
@@ -19,7 +19,7 @@ export function GithubExportMenuItem({ onClose, disabled }: Props) {
 				onClose();
 			}}
 		>
-			Export PR to GitHub
+			Export to GitHub
 		</MenuItem>
 	);
 }
diff --git a/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx b/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx
index 236ac3a6d6..48f5bb0282 100644
--- a/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx
@@ -4,8 +4,8 @@ import { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { useDispatch } from 'react-redux';
 import { modalSlugs } from '../layout';
 
-type Props = { onClose: () => void; disabled: boolean };
-export function RestoreFromZipMenuItem({ onClose, disabled }: Props) {
+type Props = { text?: string; onClose: () => void; disabled: boolean };
+export function RestoreFromZipMenuItem({ text = 'Restore from .zip', onClose, disabled }: Props) {
 	const dispatch: PlaygroundDispatch = useDispatch();
 
 	return (
@@ -20,7 +20,7 @@ export function RestoreFromZipMenuItem({ onClose, disabled }: Props) {
 			}}
 			disabled={disabled}
 		>
-			Restore from .zip
+			{ text }
 		</MenuItem>
 	);
 }