Use one panel for both story panels

Author: gjmooney

packages/base/src/formbuilder/objectform/StoryForm.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@jupyter/react-components';
+import React from 'react';
+
+import {
+  BaseForm,
+  IBaseFormProps,
+} from '@/src/formbuilder/objectform/baseform';
+
+interface IStoryFormProps extends IBaseFormProps {
+  togglePreview: () => void;
+}
+
+export class StoryEditorForm extends BaseForm {
+  props: IStoryFormProps;
+
+  constructor(props: IStoryFormProps) {
+    super(props);
+  }
+
+  render(): React.ReactNode {
+    return (
+      <>
+        <BaseForm
+          formContext="update"
+          sourceData={this.props.sourceData}
+          model={this.props.model}
+          schema={this.props.schema}
+          syncData={this.props.syncData}
+          filePath={this.props.model.filePath}
+        />
+        <Button onClick={this.props.togglePreview}>Preview</Button>
+      </>
+    );
+  }
+}

packages/base/src/panelview/components/story-maps/StoryEditorPanel.tsx

@@ -1,15 +1,16 @@
 import { IJGISStoryMap, IJupyterGISModel } from '@jupytergis/schema';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { BaseForm } from '@/src/formbuilder/objectform/baseform';
+import { StoryEditorForm } from '@/src/formbuilder/objectform/StoryForm';
 import { deepCopy } from '@/src/tools';
 import { IDict } from '@/src/types';
 
 interface IStoryPanelProps {
   model: IJupyterGISModel;
+  togglePreview: () => void;
 }
 
-export function StoryEditorPanel({ model }: IStoryPanelProps) {
+export function StoryEditorPanel({ model, togglePreview }: IStoryPanelProps) {
   const [schema, setSchema] = useState<IDict | undefined>(undefined);
   const [storyData, setStoryData] = useState<IJGISStoryMap | null>(null);
 
@@ -73,13 +74,14 @@ export function StoryEditorPanel({ model }: IStoryPanelProps) {
   return (
     <div style={{ padding: '10px' }}>
       <h3>Story Map Properties</h3>
-      <BaseForm
+      <StoryEditorForm
         formContext="update"
         sourceData={storyData}
         model={model}
         schema={schema}
         syncData={syncStoryData}
         filePath={model.filePath}
+        togglePreview={togglePreview}
       />
     </div>
   );

packages/base/src/panelview/components/story-maps/StoryViewerPanel.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@jupyter/react-components';
 import {
   IJGISLayer,
   IJGISStoryMap,
@@ -11,9 +12,10 @@ import StoryNavBar from './StoryNavBar';
 
 interface IStoryViewerPanelProps {
   model: IJupyterGISModel;
+  togglePreview: () => void;
 }
 
-function StoryViewerPanel({ model }: IStoryViewerPanelProps) {
+function StoryViewerPanel({ model, togglePreview }: IStoryViewerPanelProps) {
   // ! TODO change name and remove rank from schema
   const [currentRankDisplayed, setCurrentRankDisplayed] = useState(0);
   const [storyData, setStoryData] = useState<IJGISStoryMap | null>(null);
@@ -198,6 +200,7 @@ function StoryViewerPanel({ model }: IStoryViewerPanelProps) {
           hasNext={currentRankDisplayed < landmarks.length - 1}
         />
       )}
+      <Button onClick={togglePreview}>Edit Story</Button>
     </div>
   );
 }

packages/base/src/panelview/rightpanel.tsx

@@ -25,13 +25,16 @@ interface IRightPanelProps {
 }
 
 export const RightPanel: React.FC<IRightPanelProps> = props => {
+  const [displayPreview, setDisplayPreview] = React.useState(false);
   const [settings, setSettings] = React.useState(props.model.jgisSettings);
   const tabInfo = [
     !settings.objectPropertiesDisabled
       ? { name: 'objectProperties', title: 'Object Properties' }
       : false,
-    { name: 'storyEditorPanel', title: 'S Editor' },
-    { name: 'storyViewerPanel', title: 'S Viewer' },
+    {
+      name: 'storyPanel',
+      title: displayPreview ? 'Story Map' : 'Story Editor',
+    },
     !settings.annotationsDisabled
       ? { name: 'annotations', title: 'Annotations' }
       : false,
@@ -86,6 +89,10 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
   const [selectedObjectProperties, setSelectedObjectProperties] =
     React.useState(undefined);
 
+  const togglePreview = () => {
+    setDisplayPreview(!displayPreview);
+  };
+
   return (
     <div
       className="jgis-right-panel-container"
@@ -125,19 +132,18 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
           </TabsContent>
         )}
 
-        <TabsContent
-          value="storyEditorPanel"
-          className="jgis-panel-tab-content"
-        >
-          {/* switch to this panel when clicking create story */}
-          <StoryEditorPanel model={props.model}></StoryEditorPanel>
-        </TabsContent>
-
-        <TabsContent
-          value="storyViewerPanel"
-          className="jgis-panel-tab-content"
-        >
-          <StoryViewerPanel model={props.model}></StoryViewerPanel>
+        <TabsContent value="storyPanel" className="jgis-panel-tab-content">
+          {displayPreview ? (
+            <StoryViewerPanel
+              model={props.model}
+              togglePreview={togglePreview}
+            />
+          ) : (
+            <StoryEditorPanel
+              model={props.model}
+              togglePreview={togglePreview}
+            />
+          )}
         </TabsContent>
 
         {!settings.annotationsDisabled && (