Skip to content

Commit

Permalink
✨ (admin) disallow disabling inheritance
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophiamersmann
sophiamersmann committed Sep 3, 2024
1 parent c4cb68d commit 4aba1f2
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 145 deletions.
1 change: 0 additions & 1 deletion adminSiteClient/ChartEditor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ export class ChartEditor extends AbstractChartEditor<ChartEditorManager> {
if (this.grapher.isMarimekko) tabs.push("marimekko")
tabs.push("revisions")
tabs.push("refs")
if (this.parentVariableId) tabs.push("inheritance")
tabs.push("export")
tabs.push("debug")
return tabs
Expand Down
13 changes: 10 additions & 3 deletions adminSiteClient/ChartEditorView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import {
ErrorMessagesForDimensions,
FieldWithDetailReferences,
} from "./ChartEditorTypes.js"
import { isIndicatorChartEditorInstance } from "./IndicatorChartEditor.js"

interface Variable {
id: number
Expand Down Expand Up @@ -350,6 +351,9 @@ export class ChartEditorView<
const { grapher, availableTabs } = editor

const chartEditor = isChartEditorInstance(editor) ? editor : undefined
const indicatorChartEditor = isIndicatorChartEditorInstance(editor)
? editor
: undefined

return (
<>
Expand Down Expand Up @@ -437,9 +441,12 @@ export class ChartEditorView<
{chartEditor && chartEditor.tab === "refs" && (
<EditorReferencesTab editor={chartEditor} />
)}
{editor.tab === "inheritance" && (
<EditorInheritanceTab editor={editor} />
)}
{indicatorChartEditor &&
indicatorChartEditor.tab === "inheritance" && (
<EditorInheritanceTab
editor={indicatorChartEditor}
/>
)}
{editor.tab === "export" && (
<EditorExportTab editor={editor} />
)}
Expand Down
113 changes: 91 additions & 22 deletions adminSiteClient/EditorDebugTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { observer } from "mobx-react"
import { Section } from "./Forms.js"
import { ChartEditor, isChartEditorInstance } from "./ChartEditor.js"
import { action } from "mobx"
import { copyToClipboard } from "@ourworldindata/utils"
import { copyToClipboard, mergeGrapherConfigs } from "@ourworldindata/utils"
import YAML from "yaml"
import { notification } from "antd"
import {
Expand Down Expand Up @@ -53,46 +53,115 @@ class EditorDebugTabForChart extends React.Component<{
})
}

@action.bound enableInheritance() {
const { patchConfig, parentConfig } = this.props.editor

// update live grapher
const newConfig = mergeGrapherConfigs(parentConfig ?? {}, patchConfig)
this.props.editor.updateLiveGrapher(newConfig)

this.props.editor.isInheritanceEnabled = true
}

render() {
const {
patchConfig,
parentConfig,
isInheritanceEnabled = false,
fullConfig,
parentVariableId,
grapher,
} = this.props.editor

const column = parentVariableId
? grapher.inputTable.get(parentVariableId.toString())
: undefined

const variableLink = (
<a
href={`/admin/variables/${parentVariableId}`}
target="_blank"
rel="noopener"
>
{column?.name ?? parentVariableId}
</a>
)

return (
<div>
<Section name="Config">
<button
className="btn btn-primary"
onClick={this.copyYamlToClipboard}
>
Copy YAML for ETL
</button>
<textarea
rows={7}
readOnly
className="form-control"
value={JSON.stringify(patchConfig, undefined, 2)}
/>
<button
className="btn btn-primary mt-2"
onClick={this.copyYamlToClipboard}
>
Copy YAML for ETL
</button>
</Section>

{parentConfig && (
<Section
name={
isInheritanceEnabled
? "Parent config (applied)"
: "Parent config (not currently applied)"
}
>
<textarea
rows={7}
readOnly
className="form-control"
value={JSON.stringify(parentConfig, undefined, 2)}
/>
</Section>
{parentVariableId && (
<>
<Section
name={
isInheritanceEnabled
? "Parent indicator"
: "Parent indicator (inheritance currently disabled)"
}
>
{isInheritanceEnabled ? (
<p>
This chart inherits settings from the
indicator {variableLink}.
</p>
) : (
<p>
This chart may inherit chart settings from
the indicator {variableLink}.
</p>
)}
{!isInheritanceEnabled && (
<button
className="btn btn-primary"
onClick={this.enableInheritance}
disabled={isInheritanceEnabled}
>
Enable inheritance
</button>
)}
</Section>
<Section
name={
isInheritanceEnabled
? "Parent config"
: "Parent config (not currently applied)"
}
>
<textarea
rows={7}
readOnly
className="form-control"
value={JSON.stringify(
parentConfig ?? {},
undefined,
2
)}
/>
<p className="mt-2">
<a
href={`/admin/variables/${parentVariableId}/config`}
target="_blank"
rel="noopener"
>
Edit parent config in the admin
</a>
</p>
</Section>
</>
)}

<Section name="Full Config">
Expand Down
123 changes: 4 additions & 119 deletions adminSiteClient/EditorInheritanceTab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,126 +1,11 @@
import React from "react"
import { observer } from "mobx-react"
import { Section, Toggle } from "./Forms.js"
import { ChartEditor, isChartEditorInstance } from "./ChartEditor.js"
import { action } from "mobx"
import { mergeGrapherConfigs, partition } from "@ourworldindata/utils"
import {
Chart,
IndicatorChartEditor,
isIndicatorChartEditorInstance,
} from "./IndicatorChartEditor.js"
import { AbstractChartEditor } from "./AbstractChartEditor.js"
import { Section } from "./Forms.js"
import { partition } from "@ourworldindata/utils"
import { Chart, IndicatorChartEditor } from "./IndicatorChartEditor.js"

@observer
export class EditorInheritanceTab<
Editor extends AbstractChartEditor,
> extends React.Component<{
editor: Editor
}> {
render() {
const { editor } = this.props
if (isChartEditorInstance(editor))
return <EditorInheritanceTabForChart editor={editor} />
else if (isIndicatorChartEditorInstance(editor))
return <EditorInheritanceTabForIndicatorChart editor={editor} />
else return null
}
}

@observer
class EditorInheritanceTabForChart extends React.Component<{
editor: ChartEditor
}> {
@action.bound onToggleInheritance(newValue: boolean) {
const { patchConfig, parentConfig } = this.props.editor

// update live grapher
const newParentConfig = newValue ? parentConfig : undefined
const newConfig = mergeGrapherConfigs(
newParentConfig ?? {},
patchConfig
)
this.props.editor.updateLiveGrapher(newConfig)

this.props.editor.isInheritanceEnabled = newValue
}

render() {
const {
parentVariableId,
parentConfig,
grapher,
isInheritanceEnabled = false,
} = this.props.editor

if (!parentVariableId) return null

const column = grapher.inputTable.get(parentVariableId.toString())

const variableLink = (
<a
href={`/admin/variables/${parentVariableId}`}
target="_blank"
rel="noopener"
>
{column?.name ?? parentVariableId}
</a>
)

return (
<div>
<Section name="Parent indicator">
{isInheritanceEnabled ? (
<p>
This chart inherits settings from the indicator{" "}
{variableLink}. Toggle the option below to disable
inheritance.
</p>
) : (
<p>
This chart may inherit chart settings from the
indicator {variableLink}. Toggle the option below to
enable inheritance and enrich this chart's config by
indicator-level chart settings.
</p>
)}
<Toggle
label="Inherit settings from indicator"
value={isInheritanceEnabled}
onValue={this.onToggleInheritance}
/>
</Section>

<Section
name={
isInheritanceEnabled
? "Parent config"
: "Parent config (not currently applied)"
}
>
<textarea
rows={7}
readOnly
className="form-control"
value={JSON.stringify(parentConfig ?? {}, undefined, 2)}
/>
<p>
<a
href={`/admin/variables/${parentVariableId}/config`}
target="_blank"
rel="noopener"
>
Edit parent config in the admin
</a>
</p>
</Section>
</div>
)
}
}

@observer
class EditorInheritanceTabForIndicatorChart extends React.Component<{
export class EditorInheritanceTab extends React.Component<{
editor: IndicatorChartEditor
}> {
render() {
Expand Down

0 comments on commit 4aba1f2

Please sign in to comment.