[desk-tool] Make document pane's footer bar full width

packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentOperationResults.tsx → packages/@sanity/desk-tool/src/panes/documentPane/documentOperationResults.tsx

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import {useDocumentOperationEvent} from '@sanity/react-hooks'
 import Snackbar from 'part:@sanity/components/snackbar/default'
 import React from 'react'

packages/@sanity/desk-tool/src/panes/documentPane/documentPane.css

@@ -2,11 +2,27 @@
 
 .root {
   display: flex;
+  flex-direction: column;
   height: 100%;
   outline: none;
+}
+
+.documentAndChangesContainer {
+  flex: 1;
+  min-height: 0;
+  display: flex;
   position: relative;
 }
 
+.footerContainer {
+  background: var(--component-bg);
+  border-top: 1px solid var(--hairline-color);
+
+  @nest .isCollapsed & {
+    display: none;
+  }
+}
+
 .isDisabled {
   display: none; /* hide on mobile */
 

packages/@sanity/desk-tool/src/panes/documentPane/documentPane.tsx

@@ -1,5 +1,6 @@
 import {ClickOutside} from 'part:@sanity/components/click-outside'
 import {Popover} from 'part:@sanity/components/popover'
+import Snackbar from 'part:@sanity/components/snackbar/default'
 import * as PathUtils from '@sanity/util/paths'
 import classNames from 'classnames'
 import React, {useCallback, useRef, useState} from 'react'
@@ -9,8 +10,10 @@ import {useDeskToolFeatures} from '../../features'
 import {ChangesPanel} from './changesPanel'
 import {useDocumentHistory} from './documentHistory'
 import {DocumentPanel, getProductionPreviewItem} from './documentPanel'
+import {DocumentOperationResults} from './documentOperationResults'
 import {InspectDialog} from './inspectDialog'
 import {DocumentActionShortcuts, isInspectHotkey, isPreviewHotkey} from './keyboardShortcuts'
+import {DocumentStatusBar} from './statusBar'
 import {Timeline, sinceTimelineProps, revTimelineProps} from './timeline'
 import {Doc, DocumentViewType, MenuItemGroup} from './types'
 
@@ -207,54 +210,70 @@ export function DocumentPane(props: DocumentPaneProps) {
           isSelected ? styles.isActive : styles.isDisabled
         ])}
       >
-        <div className={styles.documentContainer}>
-          {isInspectOpen && <InspectDialog value={value} onClose={handleInspectClose} />}
+        <div className={styles.documentAndChangesContainer}>
+          <div className={styles.documentContainer}>
+            {isInspectOpen && <InspectDialog value={value} onClose={handleInspectClose} />}
 
-          <DocumentPanel
-            activeViewId={activeViewId}
-            connectionState={connectionState}
-            documentId={documentId}
-            documentType={documentType}
-            idPrefix={paneKey}
-            initialFocusPath={initialFocusPath}
-            initialValue={initialValue}
-            isClosable={isClosable}
-            isCollapsed={isCollapsed}
-            isHistoryOpen={isChangesOpen}
-            isTimelineOpen={isTimelineOpen}
-            markers={markers}
-            menuItemGroups={menuItemGroups}
-            onChange={onChange}
-            onCloseView={handleClosePane}
-            onCollapse={onCollapse}
-            onExpand={onExpand}
-            onSetActiveView={handleSetActiveView}
-            onSplitPane={handleSplitPane}
-            onTimelineOpen={handleTimelineRev}
-            paneTitle={paneTitle}
-            schemaType={schemaType}
-            timelineMode={timelineMode}
-            toggleInspect={toggleInspect}
-            value={value}
-            versionSelectRef={versionSelectRef}
-            views={views}
-          />
-        </div>
-
-        {features.reviewChanges && !isCollapsed && isChangesOpen && (
-          <div className={styles.changesContainer}>
-            <ChangesPanel
-              changesSinceSelectRef={changesSinceSelectRef}
+            <DocumentPanel
+              activeViewId={activeViewId}
+              connectionState={connectionState}
               documentId={documentId}
+              documentType={documentType}
+              idPrefix={paneKey}
+              initialFocusPath={initialFocusPath}
+              initialValue={initialValue}
+              isClosable={isClosable}
+              isCollapsed={isCollapsed}
+              isHistoryOpen={isChangesOpen}
               isTimelineOpen={isTimelineOpen}
-              loading={historyState === 'loading'}
-              onTimelineOpen={handleTimelineSince}
+              markers={markers}
+              menuItemGroups={menuItemGroups}
+              onChange={onChange}
+              onCloseView={handleClosePane}
+              onCollapse={onCollapse}
+              onExpand={onExpand}
+              onSetActiveView={handleSetActiveView}
+              onSplitPane={handleSplitPane}
+              onTimelineOpen={handleTimelineRev}
+              paneTitle={paneTitle}
               schemaType={schemaType}
-              since={historyController.sinceTime}
               timelineMode={timelineMode}
+              toggleInspect={toggleInspect}
+              value={value}
+              versionSelectRef={versionSelectRef}
+              views={views}
             />
           </div>
+
+          {features.reviewChanges && !isCollapsed && isChangesOpen && (
+            <div className={styles.changesContainer}>
+              <ChangesPanel
+                changesSinceSelectRef={changesSinceSelectRef}
+                documentId={documentId}
+                isTimelineOpen={isTimelineOpen}
+                loading={historyState === 'loading'}
+                onTimelineOpen={handleTimelineSince}
+                schemaType={schemaType}
+                since={historyController.sinceTime}
+                timelineMode={timelineMode}
+              />
+            </div>
+          )}
+        </div>
+
+        <div className={styles.footerContainer}>
+          <DocumentStatusBar
+            id={documentId}
+            type={documentType}
+            lastUpdated={value && value._updatedAt}
+          />
+        </div>
+
+        {connectionState === 'reconnecting' && (
+          <Snackbar kind="warning" isPersisted title="Connection lost. Reconnecting…" />
         )}
+
+        <DocumentOperationResults id={documentId} type={documentType} />
       </DocumentActionShortcuts>
     </Popover>
   )

packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.css

@@ -29,12 +29,3 @@
   height: 100%;
   overflow: auto;
 }
-
-.footerContainer {
-  background: var(--component-bg);
-  border-top: 1px solid var(--hairline-color);
-
-  @nest .isCollapsed & {
-    display: none;
-  }
-}

packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.tsx

@@ -1,19 +1,15 @@
 import classNames from 'classnames'
 import {PortalProvider} from 'part:@sanity/components/portal'
-import Snackbar from 'part:@sanity/components/snackbar/default'
 import React, {createElement, useCallback, useEffect, useMemo, useRef} from 'react'
 import {useDeskToolFeatures} from '../../../features'
 import {useDocumentHistory} from '../documentHistory'
 import {Doc, DocumentView, MenuItemGroup} from '../types'
-import {DocumentOperationResults} from './documentOperationResults'
 import {DocumentHeaderTitle} from './header/title'
 import {DocumentPanelHeader} from './header/header'
 import {getMenuItems} from './menuItems'
 import {FormView} from './views'
-import {DocumentStatusBar} from './statusBar'
 
 import styles from './documentPanel.css'
-import {Chunk} from '@sanity/field/diff'
 
 interface DocumentPanelProps {
   activeViewId: string
@@ -178,20 +174,6 @@ export function DocumentPanel(props: DocumentPanelProps) {
           <div data-portal-container ref={portalContainerRef} />
         </div>
       </PortalProvider>
-
-      <div className={styles.footerContainer}>
-        <DocumentStatusBar
-          id={props.documentId}
-          type={props.documentType}
-          lastUpdated={props.value && props.value._updatedAt}
-        />
-      </div>
-
-      {props.connectionState === 'reconnecting' && (
-        <Snackbar kind="warning" isPersisted title="Connection lost. Reconnecting…" />
-      )}
-
-      <DocumentOperationResults id={props.documentId} type={props.documentType} />
     </div>
   )
 }

packages/@sanity/desk-tool/src/panes/documentPane/keyboardShortcuts/documentActionShortcuts.tsx

@@ -8,7 +8,7 @@ import {RenderActionCollectionState} from 'part:@sanity/base/actions/utils'
 import {useEditState} from '@sanity/react-hooks'
 import resolveDocumentActions from 'part:@sanity/base/document-actions/resolver'
 import isHotkey from 'is-hotkey'
-import {ActionStateDialog} from '../documentPanel/statusBar'
+import {ActionStateDialog} from '../statusBar'
 
 interface ResponderProps extends React.ComponentProps<'div'> {
   states: any[]

packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/statusBar/documentStatusBar.tsx → packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBar.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
 import React from 'react'
-import TimeAgo from '../../../../components/TimeAgo'
-import {useDocumentHistory} from '../../documentHistory'
+import TimeAgo from '../../../components/TimeAgo'
+import {useDocumentHistory} from '../documentHistory'
 import styles from './documentStatusBar.css'
 import {DocumentStatusBarActions} from './documentStatusBarActions'
 import {DocumentStatusBarBadges} from './documentStatusBarBadges'
@@ -14,7 +14,7 @@ import {RenderBadgeCollectionState} from 'part:@sanity/base/actions/utils'
 interface Props {
   id: string
   type: string
-  lastUpdated?: string
+  lastUpdated?: string | null
 }
 
 export function DocumentStatusBar(props: Props) {

packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/statusBar/documentStatusBarActions.tsx → packages/@sanity/desk-tool/src/panes/documentPane/statusBar/documentStatusBarActions.tsx

@@ -6,7 +6,7 @@ import Hotkeys from 'part:@sanity/components/typography/hotkeys'
 import {RenderActionCollectionState} from 'part:@sanity/base/actions/utils'
 import resolveDocumentActions from 'part:@sanity/base/document-actions/resolver'
 
-import {HistoryRestoreAction} from '../../../../actions/HistoryRestoreAction'
+import {HistoryRestoreAction} from '../../../actions/HistoryRestoreAction'
 import styles from './documentStatusBarActions.css'
 import {ActionMenu} from './actionMenu'
 import {ActionStateDialog} from './actionStateDialog'

packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/statusBar/historyStatusBar.tsx → packages/@sanity/desk-tool/src/panes/documentPane/statusBar/historyStatusBar.tsx

@@ -1,7 +1,5 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-
 import React from 'react'
-import TimeAgo from '../../../../components/TimeAgo'
+import TimeAgo from '../../../components/TimeAgo'
 import {HistoryStatusBarActions} from './documentStatusBarActions'
 
 import styles from './documentStatusBar.css'