Merge pull request #4216 from serlo/feat-warning-label-editor-non-pro…

…duction-env feat(editor): show user a warning in test environments that content might disappear
serlo · Oct 24, 2024 · f99c014 · f99c014
2 parents 28c634e + 1be914f
commit f99c014
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/packages/editor/src/i18n/strings/de/edit.ts b/packages/editor/src/i18n/strings/de/edit.ts
@@ -5,6 +5,8 @@ export const editStrings = {
   confirmRouteChange:
     'Willst du wirklich die Seite verlassen ohne zu speichern?',
   noChangesWarning: 'Bisher hast du nichts geändert',
+  savedContentMightDisappearWarning:
+    '⚠️ Dies ist eine Testumgebung. Bitte erstelle hier noch keine Inhalte, die du langfristig behalten willst.',
   addPluginsModal: {
     searchInputPlaceholder: 'Suche...',
     basicPluginsTitle: 'Inhalte',

diff --git a/packages/editor/src/i18n/strings/en/edit.ts b/packages/editor/src/i18n/strings/en/edit.ts
@@ -4,6 +4,8 @@ export const editStrings = {
   lang: 'en',
   confirmRouteChange: 'Are you sure you want to leave without saving?',
   noChangesWarning: 'Nothing changed so there is no need to save yet',
+  savedContentMightDisappearWarning:
+    '⚠️ This is a test environment. Please do not create content that you want to keep long term here.',
   addPluginsModal: {
     searchInputPlaceholder: 'Search...',
     basicPluginsTitle: 'Content Elements',

diff --git a/packages/editor/src/package/config.ts b/packages/editor/src/package/config.ts
@@ -29,4 +29,5 @@ export const defaultSerloEditorProps = {
   plugins: defaultPlugins,
   onChange: undefined,
   language: 'de' as SupportedLanguage,
+  isProductionEnvironment: false,
 }
diff --git a/packages/editor/src/package/editor.tsx b/packages/editor/src/package/editor.tsx
@@ -34,6 +34,7 @@ export interface SerloEditorProps {
   onChange?: (state: StorageFormat) => void
   language?: SupportedLanguage
   editorVariant: EditorVariant
+  isProductionEnvironment?: boolean
   _testingSecret?: string | null
   _ltik?: string
 }
@@ -46,6 +47,7 @@ export function SerloEditor(props: SerloEditorProps) {
     onChange,
     language,
     plugins,
+    isProductionEnvironment,
     _testingSecret,
     _ltik,
   } = {
@@ -76,6 +78,7 @@ export function SerloEditor(props: SerloEditorProps) {
       <EditStringsProvider value={editStrings}>
         <EditorVariantContext.Provider value={editorVariant}>
           <LtikContext.Provider value={_ltik}>
+            {isProductionEnvironment ? null : renderTestEnvironmentWarning()}
             <Editor
               initialState={migratedState.document}
               onChange={handleDocumentChange}
@@ -100,4 +103,12 @@ export function SerloEditor(props: SerloEditorProps) {
       document,
     })
   }
+
+  function renderTestEnvironmentWarning() {
+    return (
+      <div className="bg-editor-primary-100 px-1.5 py-0.5 text-sm">
+        {editStrings.savedContentMightDisappearWarning}
+      </div>
+    )
+  }
 }