Fix: Import & Export from Github causes reloading the playground even before accept this step.

packages/playground/website/src/components/layout/index.tsx

@@ -175,15 +175,17 @@ function Modals(blueprint: Blueprint) {
  ) : (
  ''
  )}
+
  <GithubImportModal
+ defaultOpen={(currentModal === 'github-import-modal')}
  onImported={({
- url,
- path,
- files,
- pluginOrThemeName,
- contentType,
- urlInformation: { owner, repo, type, pr },
- }) => {
+  url,
+  path,
+  files,
+  pluginOrThemeName,
+  contentType,
+  urlInformation: { owner, repo, type, pr },
+  }) => {
  setGithubExportValues({
  repoUrl: url,
  prNumber: pr?.toString(),
@@ -196,7 +198,9 @@ function Modals(blueprint: Blueprint) {
  setGithubExportFiles(files);
  }}
  />
+
  <GithubExportModal
+ defaultOpen={(currentModal === 'github-export-modal')}
  allowZipExport={
  (query.get('ghexport-allow-include-zip') ?? 'yes') === 'yes'
  }

packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx

@@ -1,17 +1,20 @@
 import { MenuItem } from '@wordpress/components';
-import { openModal } from '../../github/github-export-form/modal';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useDispatch } from 'react-redux';
 
 interface Props {
  onClose: () => void;
  disabled?: boolean;
 }
 export function GithubExportMenuItem({ onClose, disabled }: Props) {
+ const dispatch: PlaygroundDispatch = useDispatch();
  return (
  <MenuItem
  aria-label="Export WordPress theme, plugin, or wp-content directory to a GitHub repository as a Pull Request."
  disabled={disabled}
  onClick={() => {
- openModal();
+ dispatch(setActiveModal('github-export-modal'));
  onClose();
  }}
  >

packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx

@@ -1,17 +1,20 @@
 import { MenuItem } from '@wordpress/components';
-import { openModal } from '../../github/github-import-form/modal';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useDispatch } from 'react-redux';
 
 interface Props {
  onClose: () => void;
  disabled?: boolean;
 }
 export function GithubImportMenuItem({ onClose, disabled }: Props) {
+ const dispatch: PlaygroundDispatch = useDispatch();
  return (
  <MenuItem
  aria-label="Import WordPress theme, plugin, or wp-content directory from a GitHub repository."
  disabled={disabled}
  onClick={() => {
- openModal();
+ dispatch(setActiveModal('github-import-modal'));
  onClose();
  }}
  >

packages/playground/website/src/github/github-export-form/modal.tsx

@@ -3,13 +3,19 @@
 import Modal, { defaultStyles } from '../../components/modal';
 import GitHubExportForm, { GitHubExportFormProps } from './form';
 import { usePlaygroundClient } from '../../lib/use-playground-client';
+import { addURLState, removeURLState } from '../utils';
+import { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useDispatch } from 'react-redux';
+import { useEffect, useState } from 'react';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
 
 const query = new URLSearchParams(window.location.search);
 export const isGitHubExportModalOpen = signal(
  query.get('state') === 'github-export'
 );
 
 interface GithubExportModalProps {
+ defaultOpen?: boolean;
  allowZipExport: GitHubExportFormProps['allowZipExport'];
  onExported?: GitHubExportFormProps['onExported'];
  initialFilesBeforeChanges?: GitHubExportFormProps['initialFilesBeforeChanges'];
@@ -18,36 +24,43 @@
 export function closeModal() {
  isGitHubExportModalOpen.value = false;
  // Remove ?state=github-export from the URL.
- const url = new URL(window.location.href);
- url.searchParams.delete('state');
- window.history.replaceState({}, '', url.href);
+ removeURLState();
 }
 export function openModal() {
  isGitHubExportModalOpen.value = true;
  // Add a ?state=github-export to the URL so that the user can refresh the page
  // and still see the modal.
- const url = new URL(window.location.href);
- url.searchParams.set('state', 'github-export');
- window.history.replaceState({}, '', url.href);
+ addURLState('github-export');
 }
 export function GithubExportModal({
+ defaultOpen,
  onExported,
  allowZipExport,
  initialValues,
  initialFilesBeforeChanges,
 }: GithubExportModalProps) {
+ const dispatch: PlaygroundDispatch = useDispatch();
  const playground = usePlaygroundClient();
+ const [isOpen, toggleOpen] = useState(defaultOpen || isGitHubExportModalOpen.value);
+ useEffect(() => {
+ toggleOpen(defaultOpen || isGitHubExportModalOpen.value);
+ }, [defaultOpen, isGitHubExportModalOpen.value]);
+ const handleOnClose = () => {
+ toggleOpen(false);
+ closeModal();
+ dispatch(setActiveModal(null));
+ }
  return (
  <Modal
  style={{
  ...defaultStyles,
  content: { ...defaultStyles.content, width: 600 },
  }}
- isOpen={isGitHubExportModalOpen.value}
- onRequestClose={closeModal}
+ isOpen={isOpen}
+ onRequestClose={handleOnClose}
  >
  <GitHubExportForm
- onClose={closeModal}
+ onClose={handleOnClose}
  onExported={onExported}
  playground={playground!}
  initialValues={initialValues}

packages/playground/website/src/github/github-import-form/modal.tsx

@@ -2,49 +2,61 @@
 import Modal, { defaultStyles } from '../../components/modal';
 import GitHubImportForm, { GitHubImportFormProps } from './form';
 import { usePlaygroundClient } from '../../lib/use-playground-client';
+import { addURLState, removeURLState } from '../utils';
+import { useEffect, useState } from 'react';
+import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useDispatch } from 'react-redux';
 
 const query = new URLSearchParams(window.location.search);
 export const isGitHubModalOpen = signal(query.get('state') === 'github-import');
 
 interface GithubImportModalProps {
+ defaultOpen?: boolean;
  onImported?: GitHubImportFormProps['onImported'];
 }
 export function closeModal() {
  isGitHubModalOpen.value = false;
  // Remove ?state=github-import from the URL.
- const url = new URL(window.location.href);
- url.searchParams.delete('state');
- window.history.replaceState({}, '', url.href);
+ removeURLState();
 }
 export function openModal() {
  isGitHubModalOpen.value = true;
  // Add a ?state=github-import to the URL so that the user can refresh the page
  // and still see the modal.
- const url = new URL(window.location.href);
- url.searchParams.set('state', 'github-import');
- window.history.replaceState({}, '', url.href);
+ addURLState('github-import');
 }
-export function GithubImportModal({ onImported }: GithubImportModalProps) {
+export function GithubImportModal({ defaultOpen, onImported }: GithubImportModalProps) {
+ const dispatch: PlaygroundDispatch = useDispatch();
  const playground = usePlaygroundClient();
+ const [isOpen, toggleOpen] = useState(defaultOpen || isGitHubModalOpen.value);
+ useEffect(() => {
+ toggleOpen(defaultOpen || isGitHubModalOpen.value);
+ }, [defaultOpen, isGitHubModalOpen.value]);
+ const handleOnClose = () => {
+ toggleOpen(false);
+ closeModal();
+ dispatch(setActiveModal(null));
+ }
  return (
  <Modal
  style={{
  ...defaultStyles,
  content: { ...defaultStyles.content, width: 600 },
  }}
- isOpen={isGitHubModalOpen.value}
- onRequestClose={closeModal}
+ isOpen={isOpen}
+ onRequestClose={handleOnClose}
  >
  <GitHubImportForm
  playground={playground!}
- onClose={closeModal}
+ onClose={handleOnClose}
  onImported={(details) => {
  playground!.goTo('/');
  // eslint-disable-next-line no-alert
  alert(
  'Import finished! Your Playground site has been updated.'
  );
- closeModal();
+ handleOnClose();
  onImported?.(details);
  }}
  />

packages/playground/website/src/github/utils.tsx

@@ -0,0 +1,15 @@
+
+export function removeURLState() {
+ // Remove ?state=github-xxx from the URL.
+ const url = new URL(window.location.href);
+ url.searchParams.delete('state');
+ window.history.pushState({}, '', url.toString());
+}
+
+export function addURLState(name: string) {
+ // Add a ?state=github-xxx to the URL so that the user can refresh the page
+ // and still see the modal.
+ const url = new URL(window.location.href);
+ url.searchParams.set('state', name);
+ window.history.pushState({}, '', url.toString());
+}