feat(admin): show save buttons for chart views

adminSiteClient/ChartViewEditor.ts

@@ -14,6 +14,7 @@ export interface Chart {
 
 export interface ChartViewEditorManager extends AbstractChartEditorManager {
     chartViewId: number
+    parentChartId: number
 }
 
 export class ChartViewEditor extends AbstractChartEditor<ChartViewEditorManager> {
@@ -40,6 +41,10 @@ export class ChartViewEditor extends AbstractChartEditor<ChartViewEditorManager>
         return false
     }
 
+    @computed get parentChartId(): number {
+        return this.manager.parentChartId
+    }
+
     async saveGrapher({
         onError,
     }: { onError?: () => void } = {}): Promise<void> {

adminSiteClient/SaveButtons.tsx

@@ -12,6 +12,10 @@ import {
     ErrorMessagesForDimensions,
 } from "./ChartEditorTypes.js"
 import { AbstractChartEditor } from "./AbstractChartEditor.js"
+import {
+    ChartViewEditor,
+    isChartViewEditorInstance,
+} from "./ChartViewEditor.js"
 
 @observer
 export class SaveButtons<
@@ -33,6 +37,13 @@ export class SaveButtons<
                     {...passthroughProps}
                 />
             )
+        else if (isChartViewEditorInstance(editor))
+            return (
+                <SaveButtonsForChartView
+                    editor={editor}
+                    {...passthroughProps}
+                />
+            )
         else return null
     }
 }
@@ -166,3 +177,53 @@ class SaveButtonsForIndicatorChart extends React.Component<{
         )
     }
 }
+
+@observer
+class SaveButtonsForChartView extends React.Component<{
+    editor: ChartViewEditor
+    errorMessages: ErrorMessages
+    errorMessagesForDimensions: ErrorMessagesForDimensions
+}> {
+    @action.bound onSaveChart() {
+        void this.props.editor.saveGrapher()
+    }
+
+    @computed get hasEditingErrors(): boolean {
+        const { errorMessages, errorMessagesForDimensions } = this.props
+
+        if (!isEmpty(errorMessages)) return true
+
+        const allErrorMessagesForDimensions = Object.values(
+            errorMessagesForDimensions
+        ).flat()
+        return allErrorMessagesForDimensions.some((error) => error)
+    }
+
+    render() {
+        const { hasEditingErrors } = this
+        const { editor } = this.props
+        const { grapher } = editor
+
+        const isSavingDisabled = grapher.hasFatalErrors || hasEditingErrors
+
+        return (
+            <div className="SaveButtons">
+                <button
+                    className="btn btn-success"
+                    onClick={this.onSaveChart}
+                    disabled={isSavingDisabled}
+                >
+                    Save chart view
+                </button>{" "}
+                <a
+                    className="btn btn-secondary"
+                    href={`/admin/charts/${editor.parentChartId}/edit`}
+                    target="_blank"
+                    rel="noopener"
+                >
+                    Go to parent chart
+                </a>
+            </div>
+        )
+    }
+}