enhance(admin): make tagging work immediately for newly-created charts

owid · Jan 31, 2025 · a1baf5d · a1baf5d
1 parent a774ccc
commit a1baf5d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/adminSiteClient/ChartEditorPage.tsx b/adminSiteClient/ChartEditorPage.tsx
@@ -159,6 +159,17 @@ export class ChartEditorPage
         this.refresh()
     }
 
+    componentDidUpdate(
+        prevProps: Readonly<{
+            grapherId?: number
+            grapherConfig?: GrapherInterface
+        }>
+    ): void {
+        if (prevProps.grapherId !== this.props.grapherId) {
+            void this.fetchTags()
+        }
+    }
+
     render(): React.ReactElement {
         return <ChartEditorView manager={this} />
     }

diff --git a/adminSiteClient/EditorBasicTab.tsx b/adminSiteClient/EditorBasicTab.tsx
@@ -360,11 +360,12 @@ class VariablesSection<
 // eslint-disable-next-line react-refresh/only-export-components
 const TagsSection = (props: {
     chartId: number | undefined
-    editor: ChartEditor
+    tags: DbChartTagJoin[] | undefined
+    availableTags: DbChartTagJoin[] | undefined
     onSaveTags: (tags: DbChartTagJoin[]) => void
 }) => {
-    const { tags, availableTags } = props.editor
-    const canTag = !!props.chartId && tags && availableTags
+    const { chartId, tags, availableTags } = props
+    const canTag = !!chartId && tags && availableTags
     return (
         <Section name="Tags">
             {canTag ? (
@@ -386,7 +387,10 @@ const TagsSection = (props: {
                     </small>
                 </>
             ) : (
-                <p>Can't tag this chart. Maybe it hasn't been saved yet?</p>
+                <p>
+                    Can't tag this chart
+                    {!chartId && <>, because it hasn't been saved yet</>}.
+                </p>
             )}
         </Section>
     )
@@ -553,7 +557,8 @@ export class EditorBasicTab<
                 {isChartEditorInstance(editor) && (
                     <TagsSection
                         chartId={grapher.id}
-                        editor={editor}
+                        tags={editor.tags}
+                        availableTags={editor.availableTags}
                         onSaveTags={this.onSaveTags}
                     />
                 )}