feat: add topbar to inspector (#2805)

src/components/EditorPage/EditorPage.tsx

@@ -5,7 +5,7 @@ import experiments, { EXPERIMENT_TUTORIAL_OPEN } from 'experiments'
 
 import NotFoundPage from 'components/NotFoundPage'
 import LoadingPage from 'components/LoadingPage'
-import TopBar from 'components/TopBar'
+import SDK6TopBar from 'components/SDK6TopBar'
 import ViewPort from 'components/ViewPort'
 import SideBar from 'components/SideBar'
 import LocalStorageToast from 'components/LocalStorageToast'
@@ -143,7 +143,7 @@ export default class EditorPage extends React.PureComponent<Props, State> {
 
     return (
       <div className="EditorPage">
-        {isPreviewing ? null : <TopBar />}
+        {isPreviewing ? null : <SDK6TopBar />}
         <Grid className={gridClasses}>
           <Grid.Row className={wrapperClasses}>
             <ViewPort />

src/components/InspectorPage/InspectorPage.container.ts

@@ -3,13 +3,15 @@ import { RootState } from 'modules/common/types'
 import { isLoggedIn } from 'modules/identity/selectors'
 import { getCurrentScene } from 'modules/scene/selectors'
 import { connectInspector, openInspector } from 'modules/inspector/actions'
+import { getIsInspectorEnabled } from 'modules/features/selectors'
 import { MapStateProps, MapDispatch, MapDispatchProps } from './InspectorPage.types'
 import EditorPage from './InspectorPage'
 
 const mapState = (state: RootState): MapStateProps => {
   return {
     isLoggedIn: isLoggedIn(state),
-    scene: getCurrentScene(state)
+    scene: getCurrentScene(state),
+    isInspectorEnabled: getIsInspectorEnabled(state)
   }
 }
 

src/components/InspectorPage/InspectorPage.tsx

@@ -4,6 +4,8 @@ import { Center, Loader } from 'decentraland-ui'
 
 import { Props, State } from './InspectorPage.types'
 import './InspectorPage.css'
+import TopBar from './TopBar'
+import NotFoundPage from 'components/NotFoundPage'
 
 export default class InspectorPage extends React.PureComponent<Props, State> {
   state: State = {
@@ -26,7 +28,11 @@ export default class InspectorPage extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { scene, isLoggedIn } = this.props
+    const { scene, isLoggedIn, isInspectorEnabled } = this.props
+
+    if (!isInspectorEnabled) {
+      return <NotFoundPage />
+    }
 
     if (!isLoggedIn) {
       return (
@@ -40,7 +46,10 @@ export default class InspectorPage extends React.PureComponent<Props, State> {
       <div className="InspectorPage">
         {!this.state.isLoaded && <Loader active />}
         {scene && (
-          <iframe ref={this.refIframe} title="inspector" id="inspector" src={`/inspector-index.html?parent=${window.location.origin}`} />
+          <>
+            <TopBar />
+            <iframe ref={this.refIframe} title="inspector" id="inspector" src={`/inspector-index.html?parent=${window.location.origin}`} />
+          </>
         )}
       </div>
     )

src/components/InspectorPage/InspectorPage.types.ts

@@ -5,6 +5,7 @@ import { connectInspector, ConnectInspectorAction, openInspector, OpenInspectorA
 export type Props = {
   scene: Scene | null
   isLoggedIn: boolean
+  isInspectorEnabled: boolean
   onOpen: typeof openInspector
   onConnect: typeof connectInspector
 }
@@ -13,6 +14,6 @@ export type State = {
   isLoaded: boolean
 }
 
-export type MapStateProps = Pick<Props, 'isLoggedIn' | 'scene'>
+export type MapStateProps = Pick<Props, 'isLoggedIn' | 'scene' | 'isInspectorEnabled'>
 export type MapDispatchProps = Pick<Props, 'onOpen' | 'onConnect'>
 export type MapDispatch = Dispatch<OpenInspectorAction | ConnectInspectorAction>

src/components/InspectorPage/TopBar/TopBar.container.ts

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux'
+import { goBack } from 'connected-react-router'
+import { RootState } from 'modules/common/types'
+import { getCurrentProject } from 'modules/project/selectors'
+import { getCurrentMetrics } from 'modules/scene/selectors'
+import { isSavingCurrentProject } from 'modules/sync/selectors'
+import { openModal } from 'modules/modal/actions'
+import { MapStateProps, MapDispatchProps, MapDispatch } from './TopBar.types'
+import TopBar from './TopBar'
+
+const mapState = (state: RootState): MapStateProps => ({
+  currentProject: getCurrentProject(state),
+  metrics: getCurrentMetrics(state),
+  isUploading: isSavingCurrentProject(state)
+})
+
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onBack: () => dispatch(goBack()),
+  onOpenModal: (name, metadata) => dispatch(openModal(name, metadata))
+})
+
+export default connect(mapState, mapDispatch)(TopBar)

src/components/InspectorPage/TopBar/TopBar.module.css

@@ -0,0 +1,43 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+}
+
+.nameContainer {
+  display: flex;
+  align-items: center;
+}
+
+.nameContainer :global(.ui.button.basic) {
+  padding: 0;
+  text-transform: none;
+  color: white !important;
+  font-size: 16px;
+}
+
+.editNameBtn:global(.ui.button) {
+  display: flex;
+  gap: 10px;
+  margin-right: 10px;
+}
+
+.editNameBtn:global(.ui.button .Icon) {
+  filter: brightness(0) invert(1);
+}
+
+.actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.downloadBtn:global(.ui.button) {
+  min-width: fit-content;
+  width: fit-content;
+}
+
+.downloadBtn:global(.ui.button) > i:global(.icon.download):not(.button) {
+  margin: 0;
+}

src/components/InspectorPage/TopBar/TopBar.tsx

@@ -0,0 +1,68 @@
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Button, Icon, Popup } from 'decentraland-ui'
+import OwnIcon from 'components/Icon'
+import { Props } from './TopBar.types'
+import styles from './TopBar.module.css'
+import { useCallback } from 'react'
+import DeploymentStatus from 'components/DeploymentStatus'
+
+export default function TopBar({ currentProject, isUploading, onBack, onOpenModal }: Props) {
+  const handleEditProject = useCallback(() => {
+    onOpenModal('EditProjectModal')
+  }, [onOpenModal])
+
+  const handlePublish = useCallback(() => {
+    console.error('TODO: Add publish project action')
+  }, [])
+
+  const handlePreview = useCallback(() => {
+    console.error('TODO: Add preview project action')
+  }, [])
+
+  const handleDownload = useCallback(() => {
+    console.error('TODO: Add download project action')
+  }, [])
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.nameContainer}>
+        <Button basic aria-label={t('inspector.top_bar.back')} onClick={onBack}>
+          <Icon name="chevron left" />
+        </Button>
+        {currentProject && (
+          <Button basic onClick={handleEditProject} disabled={isUploading} className={styles.editNameBtn}>
+            {currentProject.title}
+            <OwnIcon name="edit" className="edit-project-icon" />
+          </Button>
+        )}
+        {isUploading && <OwnIcon name="cloud-upload" className="cloud-upload-indicator is-uploading" />}
+      </div>
+      <div className={styles.actions}>
+        {currentProject ? <DeploymentStatus projectId={currentProject.id} /> : null}
+        <Popup
+          content={t('inspector.top_bar.download')}
+          trigger={
+            <Button
+              secondary
+              aria-label={t('inspector.top_bar.download')}
+              size="small"
+              className={styles.downloadBtn}
+              disabled={isUploading}
+              onClick={handleDownload}
+            >
+              <Icon name="download" />
+            </Button>
+          }
+        />
+        <Button secondary size="small" disabled={isUploading} onClick={handlePreview}>
+          <Icon name="eye" />
+          {t('inspector.top_bar.preview')}
+        </Button>
+        <Button primary size="small" disabled={isUploading} onClick={handlePublish}>
+          <Icon name="globe" />
+          {t('inspector.top_bar.publish')}
+        </Button>
+      </div>
+    </div>
+  )
+}

src/components/InspectorPage/TopBar/TopBar.types.ts

@@ -0,0 +1,18 @@
+import { Dispatch } from 'redux'
+import { ModelMetrics } from 'modules/models/types'
+import { OpenModalAction, openModal } from 'modules/modal/actions'
+import { Project } from 'modules/project/types'
+import { CallHistoryMethodAction, goBack } from 'connected-react-router'
+
+export type Props = {
+  metrics: ModelMetrics
+  currentProject: Project | null
+  isUploading: boolean
+  onBack: typeof goBack
+  onOpenModal: typeof openModal
+}
+
+export type MapStateProps = Pick<Props, 'currentProject' | 'metrics' | 'isUploading'>
+
+export type MapDispatchProps = Pick<Props, 'onBack' | 'onOpenModal'>
+export type MapDispatch = Dispatch<CallHistoryMethodAction | OpenModalAction>

src/components/TopBar/index.ts → src/components/InspectorPage/TopBar/index.ts

@@ -1,3 +1,2 @@
 import TopBar from './TopBar.container'
-
 export default TopBar

src/components/Modals/EditProjectModal/EditProjectModal.tsx

@@ -65,7 +65,7 @@ export default class EditProjectModal extends React.PureComponent<Props, State>
   }
 
   render() {
-    const { name, deploymentStatus, onClose } = this.props
+    const { name, deploymentStatus, currentScene, onClose } = this.props
     const { title, description, rows, cols, hasError } = this.state
     const isSubmitDisabled = hasError || deploymentStatus !== DeploymentStatus.UNPUBLISHED
 
@@ -77,13 +77,14 @@ export default class EditProjectModal extends React.PureComponent<Props, State>
             <div className="details">
               <ProjectFields.Title value={title} onChange={this.handleTitleChange} required icon="asterisk" />
               <ProjectFields.Description value={description} onChange={this.handleDescriptionChange} />
-
-              <div className="picker">
-                <Header sub className="picker-label">
-                  {t('edit_project_modal.custom_layout_label')}
-                </Header>
-                <ProjectLayoutPicker rows={rows} cols={cols} onChange={this.handleLayoutChange} />
-              </div>
+              {currentScene.sdk6 && (
+                <div className="picker">
+                  <Header sub className="picker-label">
+                    {t('edit_project_modal.custom_layout_label')}
+                  </Header>
+                  <ProjectLayoutPicker rows={rows} cols={cols} onChange={this.handleLayoutChange} />
+                </div>
+              )}
             </div>
             <div className="error">{deploymentStatus !== DeploymentStatus.UNPUBLISHED && t('edit_project_modal.unpublish_needed')}</div>
           </Modal.Content>

src/components/TopBar/TopBar.container.ts → src/components/SDK6TopBar/SDK6TopBar.container.ts

@@ -9,8 +9,8 @@ import { setGizmo, togglePreview, toggleSidebar } from 'modules/editor/actions'
 import { resetItem, duplicateItem, deleteItem } from 'modules/scene/actions'
 import { getCurrentMetrics } from 'modules/scene/selectors'
 import { isSavingCurrentProject } from 'modules/sync/selectors'
-import { MapStateProps, MapDispatchProps, MapDispatch } from './TopBar.types'
-import TopBar from './TopBar'
+import { MapStateProps, MapDispatchProps, MapDispatch } from './SDK6TopBar.types'
+import SDK6TopBar from './SDK6TopBar'
 import { hasHistory } from 'modules/location/selectors'
 
 const mapState = (state: RootState): MapStateProps => ({
@@ -39,4 +39,4 @@ const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onNavigate: path => dispatch(push(path))
 })
 
-export default connect(mapState, mapDispatch)(TopBar)
+export default connect(mapState, mapDispatch)(SDK6TopBar)