diff --git a/apps/studio/components/interfaces/Explorer/ExplorerNotebookPrintHeader.tsx b/apps/studio/components/interfaces/Explorer/ExplorerNotebookPrintHeader.tsx new file mode 100644 index 00000000000..bbd31eb8044 --- /dev/null +++ b/apps/studio/components/interfaces/Explorer/ExplorerNotebookPrintHeader.tsx @@ -0,0 +1,33 @@ +import dayjs from 'dayjs' + +import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject' + +interface ExplorerNotebookPrintHeaderProps { + name: string +} + +export const ExplorerNotebookPrintHeader = ({ name }: ExplorerNotebookPrintHeaderProps) => { + const { data: project } = useSelectedProjectQuery() + + return ( +
+
+
+
+ + Supabase +
+

+ Explorer Notebook +

+
+
+

{name}

+

Project: {project?.name}

+

Exported {dayjs().format('MMM D, YYYY')}

+
+
+
+
+ ) +} diff --git a/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx index 70c3b970644..ef8c555b677 100644 --- a/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx +++ b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx @@ -14,6 +14,7 @@ import { import { acceptUntrustedSql } from '@supabase/pg-meta' import { useQueryClient } from '@tanstack/react-query' import { LOCAL_STORAGE_KEYS, useParams } from 'common' +import dayjs from 'dayjs' import { Check, Copy, @@ -48,6 +49,7 @@ import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' +import { ExplorerNotebookPrintHeader } from './ExplorerNotebookPrintHeader' import { findQueryCellsMatchingSql, isMutatingSql, @@ -82,6 +84,7 @@ import { import { useUpsertNotebookMutation } from '@/data/content/notebooks/notebook-upsert-mutation' import { acceptUntrustedLogsSql } from '@/data/logs/safe-analytics-sql' import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage' +import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject' import { getNotebooksStateSnapshot, useCurrentNotebook, @@ -104,6 +107,8 @@ export const ExplorerNotebookTab = () => { true ) + const { data: project } = useSelectedProjectQuery() + const currentNotebook = useCurrentNotebook() const { name, content } = currentNotebook?.notebook ?? {} const { isNotFound } = useLoadNotebook({ id, projectRef: ref }) @@ -471,7 +476,10 @@ export const ExplorerNotebookTab = () => { ref={scrollContainerRef} className="w-full mx-auto flex-grow min-h-0 overflow-y-auto print:h-auto print:overflow-visible" > -
+
+ {/* [Joshen] This is meant to only render when printing the notebook */} + + {cells.length === 0 && ( } diff --git a/apps/studio/components/ui/SortableSection.tsx b/apps/studio/components/ui/SortableSection.tsx index d1822680921..1d76c90dc24 100644 --- a/apps/studio/components/ui/SortableSection.tsx +++ b/apps/studio/components/ui/SortableSection.tsx @@ -69,7 +69,7 @@ export const SortableSection = ({
{actions} diff --git a/apps/studio/styles/globals.css b/apps/studio/styles/globals.css index 982263cf2d6..c98ddf05708 100644 --- a/apps/studio/styles/globals.css +++ b/apps/studio/styles/globals.css @@ -187,6 +187,16 @@ body, box-sizing: border-box; } +/* Padding on an in-DOM container only applies once (at the start/end of the + * box), not on every printed page it spans, so continuation pages fell back + * to whatever margin the print dialog happened to have. Setting only the + * vertical page margin here applies it uniformly to every page's top/bottom, + * without touching page width or the dialog's own left/right margin. */ +@page { + padding-top: 0.5in; + padding-bottom: 0.5in; +} + @media print { #panel-content, #panel-project-content {