Issue 218/enhance msg state

webapp/src/RepoGit.ts

@@ -8,7 +8,7 @@ import { LyraConfig } from '@/utils/lyraConfig';
 import packageJson from '../package.json';
 import { ServerProjectConfig } from '@/utils/serverConfig';
 import { SimpleGitWrapper } from '@/utils/git/SimpleGitWrapper';
-import { unflattenObject } from '@/utils/unflattenObject';
+import { unflattenTranslateIdTextState } from '@/utils/unflattenObject';
 import { debug, error, info, warn } from '@/utils/log';
 import { WriteLanguageFileError, WriteLanguageFileErrors } from '@/errors';
 import { type TranslationMap } from '@/utils/adapters';
@@ -215,10 +215,13 @@ export class RepoGit {
           Object.entries(translationsBySourceFile).map(
             async ([sourceFile, translation]) => {
               const yamlPath = path.join(translationsPath, sourceFile);
-              const yamlOutput = stringify(unflattenObject(translation), {
-                doubleQuotedAsJSON: true,
-                singleQuote: true,
-              });
+              const yamlOutput = stringify(
+                unflattenTranslateIdTextState(translation),
+                {
+                  doubleQuotedAsJSON: true,
+                  singleQuote: true,
+                },
+              );
               try {
                 await fs.writeFile(yamlPath, yamlOutput, { flush: true });
                 info(`Successfully wrote to: ${yamlPath}`);

webapp/src/app/api/projects/[projectName]/languages/[languageId]/messages/[messageId]/route.ts

@@ -17,8 +17,18 @@ type TranslationError = {
   translationText: string;
 };
 
-type TranslationIdle = {
-  translationStatus: 'idle';
+type TranslationMissing = {
+  translationStatus: 'missing';
+  translationText: string;
+};
+
+type TranslationPublished = {
+  translationStatus: 'published';
+  translationText: string;
+};
+
+type TranslationUpdated = {
+  translationStatus: 'updated';
   translationText: string;
 };
 
@@ -42,7 +52,9 @@ type TranslationModified = {
 };
 
 export type TranslationState =
-  | TranslationIdle
+  | TranslationPublished
+  | TranslationUpdated
+  | TranslationMissing
   | TranslationInvalid
   | TranslationUpdating
   | TranslationSuccess

webapp/src/app/projects/[projectName]/[languageName]/page.tsx

@@ -39,8 +39,8 @@ const MessagesPage: NextPage<{
   }
 
   filteredMessages.sort((m0, m1) => {
-    const trans0 = translations[m0.id]?.trim() ?? '';
-    const trans1 = translations[m1.id]?.trim() ?? '';
+    const trans0 = translations[m0.id]?.text.trim() ?? '';
+    const trans1 = translations[m1.id]?.text.trim() ?? '';
 
     if (!trans0) {
       return -1;

webapp/src/components/MessageForm.tsx

@@ -30,7 +30,7 @@ type MessageFormProps = {
   layout: MessageFormLayout;
   message: MessageData;
   projectName: string;
-  translation: string;
+  translation: TranslationState;
 };
 
 const MessageForm: FC<MessageFormProps> = ({
@@ -44,10 +44,7 @@ const MessageForm: FC<MessageFormProps> = ({
   const resetValue = useRef(translation);
   const lg = useMediaQuery(theme.breakpoints.up('lg'));
 
-  const [state, setState] = useState<TranslationState>({
-    translationStatus: 'idle',
-    translationText: translation,
-  });
+  const [state, setState] = useState<TranslationState>(translation);
 
   useEffect(() => {
     resetValue.current = translation;
@@ -63,7 +60,7 @@ const MessageForm: FC<MessageFormProps> = ({
       } catch (e) {
         if (e instanceof Error) {
           setState({
-            original: resetValue.current,
+            original: resetValue.current.translationText,
             translationStatus: 'invalid',
             translationText: ev.target.value,
             validationError: e.toString(),
@@ -72,7 +69,7 @@ const MessageForm: FC<MessageFormProps> = ({
         }
       }
       setState({
-        original: resetValue.current,
+        original: resetValue.current.translationText,
         translationStatus: 'modified',
         translationText: ev.target.value,
       });
@@ -131,7 +128,7 @@ const MessageForm: FC<MessageFormProps> = ({
         s.translationStatus === 'error'
       ) {
         return {
-          translationStatus: 'idle',
+          translationStatus: s.original ? 'missing' : 'updated',
           translationText: s.original,
         };
       }
@@ -150,7 +147,7 @@ const MessageForm: FC<MessageFormProps> = ({
       }
       if (s.translationStatus === 'success') {
         return {
-          translationStatus: 'idle',
+          translationStatus: 'updated',
           translationText: s.translationText,
         };
       }
@@ -307,30 +304,29 @@ const MessageForm: FC<MessageFormProps> = ({
             )}
             <LoadingButton
               disabled={
-                state.translationStatus === 'idle' ||
+                state.translationStatus === 'missing' ||
+                state.translationStatus === 'published' ||
+                state.translationStatus === 'updated' ||
                 state.translationStatus === 'invalid' ||
                 state.translationStatus === 'success'
               }
               loading={state.translationStatus === 'updating'}
               loadingPosition="start"
               onClick={onSave}
               startIcon={
-                state.translationStatus === 'idle' &&
-                state.translationText === '' ? (
-                  <MuiError />
-                ) : (
-                  <Check />
-                )
+                state.translationStatus === 'missing' ? <MuiError /> : <Check />
               }
               sx={{ minWidth: 'max-content' }}
             >
-              {state.translationStatus === 'idle'
-                ? state.translationText
-                  ? 'Published'
-                  : 'Missing'
-                : state.translationStatus === 'success'
+              {state.translationStatus === 'published'
+                ? 'Published'
+                : state.translationStatus === 'updated'
                   ? 'Updated'
-                  : 'Save'}
+                  : state.translationStatus === 'missing'
+                    ? 'Missing'
+                    : state.translationStatus === 'success'
+                      ? 'Updated'
+                      : 'Save'}
             </LoadingButton>
           </ButtonGroup>
         </Box>

webapp/src/components/MessageList.tsx

@@ -1,18 +1,17 @@
 'use client';
 
-import { ListItem } from '@mui/material';
+import { ListItem, useMediaQuery, useTheme } from '@mui/material';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
-import { useMediaQuery, useTheme } from '@mui/material';
 
 import MessageForm, { messageFormHeight } from '@/components/MessageForm';
-import { MessageData } from '@/utils/adapters';
+import { MessageData, TranslateIdTextState } from '@/utils/adapters';
 
 type MessageListProps = {
   languageName: string;
   messages: MessageData[];
   projectName: string;
-  translations: Record<string, string>;
+  translations: TranslateIdTextState;
 };
 
 const MessageList: FC<MessageListProps> = ({
@@ -55,7 +54,19 @@ const MessageList: FC<MessageListProps> = ({
             layout={layout}
             message={message}
             projectName={projectName}
-            translation={translations[message.id] || ''}
+            translation={
+              translations[message.id]
+                ? translations[message.id].state === 'UPDATED'
+                  ? {
+                      translationStatus: 'updated',
+                      translationText: translations[message.id].text,
+                    }
+                  : {
+                      translationStatus: 'published',
+                      translationText: translations[message.id].text,
+                    }
+                : { translationStatus: 'missing', translationText: '' }
+            }
           />
         </ListItem>
       );

webapp/src/dataAccess.ts

@@ -1,6 +1,6 @@
 import { RepoGit } from '@/RepoGit';
 import { ServerConfig, ServerProjectConfig } from '@/utils/serverConfig';
-import { getTranslationsIdText } from './utils/translationObjectUtil';
+import { getTranslationsIdTextState } from './utils/translationObjectUtil';
 import { LanguageNotSupported } from './errors';
 import { Store } from '@/store/Store';
 
@@ -51,7 +51,7 @@ export async function accessLanguage(
   const translationsWithFilePath =
     await projectStore.getTranslations(languageName);
 
-  const translations = getTranslationsIdText(translationsWithFilePath);
+  const translations = getTranslationsIdTextState(translationsWithFilePath);
 
   return {
     messages,

webapp/src/store/ProjectStore.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, jest } from '@jest/globals';
 
 import { ProjectStore } from './ProjectStore';
-import { IMessageAdapter } from '@/utils/adapters';
+import { IMessageAdapter, TranslateState } from '@/utils/adapters';
 
 function mockMsgAdapter(): jest.Mocked<IMessageAdapter> {
   return {
@@ -39,12 +39,14 @@ describe('ProjectStore', () => {
         de: {
           'greeting.headline': {
             sourceFile: '',
+            state: TranslateState.PUBLISHED,
             text: 'Hallo',
           },
         },
         sv: {
           'greeting.headline': {
             sourceFile: '',
+            state: TranslateState.PUBLISHED,
             text: 'Hej',
           },
         },
@@ -53,7 +55,11 @@ describe('ProjectStore', () => {
 
     const actual = await projectStore.getTranslations('de');
     expect(actual).toEqual({
-      'greeting.headline': { sourceFile: '', text: 'Hallo' },
+      'greeting.headline': {
+        sourceFile: '',
+        state: TranslateState.PUBLISHED,
+        text: 'Hallo',
+      },
     });
   });
 
@@ -84,6 +90,7 @@ describe('ProjectStore', () => {
         de: {
           'greeting.headline': {
             sourceFile: '',
+            state: TranslateState.PUBLISHED,
             text: 'Hallo',
           },
         },
@@ -97,13 +104,16 @@ describe('ProjectStore', () => {
     expect(before).toEqual({
       'greeting.headline': {
         sourceFile: '',
+        state: TranslateState.PUBLISHED,
         text: 'Hallo',
       },
     });
     expect(after).toEqual({
       'greeting.headline': {
         sourceFile: '',
+        state: TranslateState.UPDATED,
         text: 'Hallo!',
+        timestamp: expect.any(Number),
       },
     });
   });
@@ -123,6 +133,7 @@ describe('ProjectStore', () => {
         de: {
           'greeting.headline': {
             sourceFile: '',
+            state: TranslateState.PUBLISHED,
             text: 'Hallo',
           },
         },
@@ -135,7 +146,9 @@ describe('ProjectStore', () => {
     expect(actual).toEqual({
       'greeting.headline': {
         sourceFile: '',
+        state: TranslateState.UPDATED,
         text: 'Hallo!',
+        timestamp: expect.any(Number),
       },
     });
   });
@@ -157,6 +170,7 @@ describe('ProjectStore', () => {
             en: {
               'core.click': {
                 sourceFile: 'en.yml',
+                state: TranslateState.PUBLISHED,
                 text: 'Click',
               },
             },
@@ -185,12 +199,14 @@ describe('ProjectStore', () => {
         de: {
           'greeting.headline': {
             sourceFile: '',
+            state: TranslateState.PUBLISHED,
             text: 'Hallo',
           },
         },
         sv: {
           'greeting.headline': {
             sourceFile: '',
+            state: TranslateState.PUBLISHED,
             text: 'Hej',
           },
         },
@@ -202,12 +218,14 @@ describe('ProjectStore', () => {
       de: {
         'greeting.headline': {
           sourceFile: '',
+          state: TranslateState.PUBLISHED,
           text: 'Hallo',
         },
       },
       sv: {
         'greeting.headline': {
           sourceFile: '',
+          state: TranslateState.PUBLISHED,
           text: 'Hej',
         },
       },

webapp/src/store/ProjectStore.ts

@@ -3,6 +3,7 @@ import {
   ITranslationAdapter,
   MessageData,
   MessageMap,
+  TranslateState,
   TranslationMap,
 } from '@/utils/adapters';
 import { StoreData } from './types';
@@ -67,12 +68,20 @@ export class ProjectStore {
       this.data.languages[lang] = {};
     }
 
-    if (!this.data.languages[lang][id]) {
+    const existingTranslation = this.data.languages[lang][id];
+    if (!existingTranslation) {
       const sourceFile = this.generateSourceFile(lang, id);
-      this.data.languages[lang][id] = { sourceFile, text };
+      this.data.languages[lang][id] = {
+        sourceFile,
+        state: TranslateState.UPDATED,
+        text,
+        timestamp: Date.now(),
+      };
+    } else {
+      existingTranslation.text = text;
+      existingTranslation.state = TranslateState.UPDATED;
+      existingTranslation.timestamp = Date.now();
     }
-
-    this.data.languages[lang][id].text = text;
   }
 
   private async refresh() {