Multilingual/edit #142

lickem22 · 2024-03-31T18:45:29Z

Reviewer: @sidravi1

Estimate: 1h00

Ticket

Fixes: AAQ-428

Description, Motivation and Context

Goal

The goal of this PR is to add a feature to edit multilingual content.

Changes

What changed on the backend?

Added a route to edit content. The endpoint will edit an existing language version of a content and will also add a new language version to an existing text if the language version is not existing.
-What changed on the frontend:
Updated the edit page to add new language version to a content.
Added a Modal to edit a new language version or go to landing page after succesful edit

How has this been tested?

Endpoint has been tested on the backend. And frontend has been tested as well to make sure it is working as intended. Test cases will be added later. No need to add a language as english is added as a default language by default in the migrations.

How to test

To test, add a few contents using the API (preferably in different languages) login to the frontend app and try updating. Both using the ContentBox and the read content modal. What to test?

Test that each language version is updated as it should.
Test that you can add a new language version using edit page.
Test that you redirected to the language chosen when viewing.

Checklist

Fill with x for completed. Delete any lines that are not relevant

My code follows the style guidelines of this project
I have reviewed my own code to ensure good quality
I have tested the functionality of my code to ensure it works as intended
I have resolved merge conflicts
I have updated the automated tests (if applicable)
I have updated the requirements (if applicable)
I have updated the README file (if applicable)
I have updated affected documentation (if applicable)

* List content on frontend * Add frontend changes * Update retrieve language * Delete language * Fix conflicts * fix linting * format code and remove extra space above add button * Improve language filter aesthetics and resizing behaviour * Quick cleanup --------- Co-authored-by: amir_emami <[email protected]>

admin_app/src/app/content/edit/page.tsx

lickem22 · 2024-03-31T19:03:12Z

admin_app/src/app/content/edit/page.tsx

@@ -259,5 +320,62 @@ const Header = ({ content_id }: { content_id: number | null }) => {
    </Layout.FlexBox>
  );
 };
+const SavedContentDialog = ({


This is the modal to either redirect to the main page or to the edit page to add/edit another content

lickem22 · 2024-03-31T19:04:43Z

admin_app/src/app/content/page.tsx

-              : languageOptions.map((language) => (
-                <MenuItem key={language.language_id} value={language.language_name}>{language.language_name}</MenuItem>
+            {loadingLanguages ? (
+              <MenuItem value="">Loading...</MenuItem>


This menu item is to add a new language version to an existing content. Handles what happens when we click on the plus button on the LanguageBar

lickem22 · 2024-04-03T08:41:14Z

admin_app/package.json

@@ -10,6 +10,7 @@
  },
  "dependencies": {
    "@emotion/react": "^11.11.3",
+    "@emotion/server": "^11.11.0",


I had to add this package to fix the font bug.

So it does server side rendering / inlining of css? We should just remember that this is the first things we are doing server side. Everything else is client side!

lickem22 · 2024-04-03T08:43:51Z

admin_app/src/app/_document.tsx

@@ -0,0 +1,58 @@
+import Document, {


Adding this document is what fixed the font bug by making sure the Server Side Rendering is the same as the Client Side Rendering! It raised a warning in the console but I will fix it in next PR

Can you explain how this works?

I don't seem to need this and can't recreate the view font bug.

Also, I'm ok accepting the font bug for now and we can find a solution later. This seem like a large decision we are making to switch to server side rendering.

Alright. I will remove this fix and put the task in the backlog.

sidravi1

Thanks @lickem22! A few things to fix but ready for you to merge when done.

admin_app/src/app/content/edit/page.tsx

admin_app/src/app/content/page.tsx

sidravi1 · 2024-04-04T05:29:04Z

admin_app/package.json

@@ -10,6 +10,7 @@
  },
  "dependencies": {
    "@emotion/react": "^11.11.3",
+    "@emotion/server": "^11.11.0",


So it does server side rendering / inlining of css? We should just remember that this is the first things we are doing server side. Everything else is client side!

sidravi1 · 2024-04-04T05:33:29Z

admin_app/src/app/_document.tsx

@@ -0,0 +1,58 @@
+import Document, {


Can you explain how this works?

sidravi1 · 2024-04-04T05:46:42Z

admin_app/src/app/_document.tsx

@@ -0,0 +1,58 @@
+import Document, {


I don't seem to need this and can't recreate the view font bug.

Also, I'm ok accepting the font bug for now and we can find a solution later. This seem like a large decision we are making to switch to server side rendering.

admin_app/src/components/ContentModal.tsx

sidravi1 · 2024-04-04T07:07:11Z

admin_app/src/components/LanguageButtonBar.tsx

      </ToggleButtonGroup>
-      {expandable && LANGUAGE_OPTIONS.length > langList.length && (


Any reason you took this type of login out? I like the idea that you don't need this circle if there are no languages left to add.

I will add it back in next PR.

sidravi1 · 2024-04-04T07:08:15Z

admin_app/src/utils/index.ts

@@ -80,3 +77,7 @@ export const appStyles = {
    flexGrow: 1,
  },
 };
+
+export default function createEmotionCache() {


We can remove this if are not using emotion server?

sidravi1 · 2024-04-04T07:09:32Z

core_backend/app/contents/models.py

@@ -121,8 +122,8 @@ async def save_content_to_db(
        language=content_language,
        content=content_db,
        content_metadata=content.content_metadata,
-        created_datetime_utc=datetime.utcnow(),
-        updated_datetime_utc=datetime.utcnow(),
+        created_datetime_utc=datetime.now(tz.utc).replace(tzinfo=None),


At some stage we'll need to translate it to local time when showing it but save it as UTC

I am not sure I understand. Why not directly get the UTC?

core_backend/app/contents/models.py

lickem22 and others added 10 commits March 26, 2024 19:36

List content on frontend

b2e79dd

Add frontend changes

d4735c4

Update retrieve language

9fe5e66

Delete language

ddab299

Merge branch 'feature-multilingual' into multilingual/retrieve-content

3fc5bc4

Fix conflicts

728eb4e

fix linting

8a5cff7

edit contents

82b9858

Cleanup

d904a16

lickem22 requested review from suzinyou, sidravi1 and amiraliemami March 31, 2024 18:45

lickem22 commented Mar 31, 2024

View reviewed changes

admin_app/src/app/content/edit/page.tsx Show resolved Hide resolved

lickem22 commented Mar 31, 2024

View reviewed changes

lickem22 added 4 commits April 2, 2024 12:30

Frontend changes

7ef8aa5

Add default language

495568a

Remove deactivated language for edit

d1154d6

Fix font bug

2191140

lickem22 commented Apr 3, 2024

View reviewed changes

sidravi1 approved these changes Apr 4, 2024

View reviewed changes

lickem22 and others added 4 commits April 4, 2024 11:31

Remove emotion/server

0d60735

Fix typos

69964c9

Merge branch 'feature-multilingual' into multilingual/edit

db7e8c5

Remove package.json

97a0672

lickem22 merged commit 7fc968d into feature-multilingual Apr 4, 2024
1 check passed

amiraliemami deleted the multilingual/edit branch April 24, 2024 19:58

amiraliemami restored the multilingual/edit branch April 24, 2024 19:58

amiraliemami deleted the multilingual/edit branch April 27, 2024 08:15

amiraliemami restored the multilingual/edit branch April 27, 2024 08:16

amiraliemami deleted the multilingual/edit branch April 27, 2024 08:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multilingual/edit #142

Multilingual/edit #142

lickem22 commented Mar 31, 2024 •

edited

Loading

lickem22 Mar 31, 2024

lickem22 Mar 31, 2024

lickem22 Apr 3, 2024

sidravi1 Apr 4, 2024

lickem22 Apr 3, 2024

sidravi1 Apr 4, 2024

sidravi1 Apr 4, 2024

lickem22 Apr 4, 2024

sidravi1 left a comment

sidravi1 Apr 4, 2024

sidravi1 Apr 4, 2024

sidravi1 Apr 4, 2024

sidravi1 Apr 4, 2024

lickem22 Apr 4, 2024

sidravi1 Apr 4, 2024

sidravi1 Apr 4, 2024

lickem22 Apr 4, 2024

		</ToggleButtonGroup>
		{expandable && LANGUAGE_OPTIONS.length > langList.length && (

Multilingual/edit #142

Multilingual/edit #142

Conversation

lickem22 commented Mar 31, 2024 • edited Loading

Ticket

Description, Motivation and Context

Goal

Changes

How has this been tested?

How to test

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sidravi1 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lickem22 commented Mar 31, 2024 •

edited

Loading