Create Author block (#1172)

* WIP * Add Author InnerBlock * Add Author InnerBlock * update AuthorBlock * + responsiveness to AUthorBlock * remove unused import * update AuthorEditor style * update AuthorEditor style * add page containing AuthorBlock to seed_courses.rs * + test for Author block * add test * add missing comma * update snapshot * update snapshot * WIP * WIP * Add broken example code * update author in seed_course * remove unused import * add assets * remove unused code * update seed_courses * Show block name in the default block * update seed_courses * update snapshots * run cargo-fmt * Close browser contexts * update snapshot * Misc fixes --------- Co-authored-by: Henrik Nygren <[email protected]>
rage · Aug 31, 2023 · 4ce6cce · 4ce6cce
1 parent e1f3b53
commit 4ce6cce
Show file tree

Hide file tree

Showing 31 changed files with 433 additions and 29 deletions.
diff --git a/services/cms/src/blocks/Author/AuthorEditor.tsx b/services/cms/src/blocks/Author/AuthorEditor.tsx
@@ -0,0 +1,50 @@
+import { css } from "@emotion/css"
+import { InnerBlocks } from "@wordpress/block-editor"
+import { BlockEditProps, Template } from "@wordpress/blocks"
+import React from "react"
+import { useTranslation } from "react-i18next"
+
+import { baseTheme, headingFont } from "../../shared-module/styles"
+import BlockWrapper from "../BlockWrapper"
+
+const ALLOWED_NESTED_BLOCKS = ["moocfi/author-inner-block"]
+const AUTHOR_BLOCK_TEMPLATE: Template[] = [["moocfi/author-inner-block"]]
+const AuthorEditor: React.FC<React.PropsWithChildren<BlockEditProps<Record<string, never>>>> = ({
+  clientId,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <BlockWrapper id={clientId}>
+      <div>
+        <div
+          className={css`
+            padding: 1rem;
+            background: ${baseTheme.colors.clear[100]};
+            text-align: center;
+            font-family: ${headingFont};
+          `}
+        >
+          <h4>{t("authors-block")}</h4>
+          <span
+            className={css`
+              color: ${baseTheme.colors.gray[600]};
+              text-align: center;
+              font-weight: 500;
+              display: inline-block;
+              margin-bottom: 1.4rem;
+              font-family: ${headingFont};
+            `}
+          >
+            {t("authors-block-description")}
+          </span>
+
+          <div>
+            <InnerBlocks allowedBlocks={ALLOWED_NESTED_BLOCKS} template={AUTHOR_BLOCK_TEMPLATE} />
+          </div>
+        </div>
+      </div>
+    </BlockWrapper>
+  )
+}
+
+export default AuthorEditor
diff --git a/services/cms/src/blocks/Author/AuthorSave.tsx b/services/cms/src/blocks/Author/AuthorSave.tsx
@@ -0,0 +1,11 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+
+const AuthorSave: React.FC<unknown> = () => {
+  return (
+    <div>
+      <InnerBlocks.Content />
+    </div>
+  )
+}
+
+export default AuthorSave
diff --git a/services/cms/src/blocks/Author/index.tsx b/services/cms/src/blocks/Author/index.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable i18next/no-literal-string */
+import { BlockConfiguration } from "@wordpress/blocks"
+
+import { MOOCFI_CATEGORY_SLUG } from "../../utils/Gutenberg/modifyGutenbergCategories"
+
+import AuthorEditor from "./AuthorEditor"
+import AuthorSave from "./AuthorSave"
+
+const AuthorConfiguration: BlockConfiguration = {
+  title: "Authors",
+  description: "Author Section",
+  category: MOOCFI_CATEGORY_SLUG,
+  attributes: {},
+  edit: AuthorEditor,
+  save: AuthorSave,
+}
+
+export default AuthorConfiguration
diff --git a/services/cms/src/blocks/AuthorInnerBlock/AuthorInnerBlockEditor.tsx b/services/cms/src/blocks/AuthorInnerBlock/AuthorInnerBlockEditor.tsx
@@ -0,0 +1,57 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+import { BlockEditProps, Template } from "@wordpress/blocks"
+import React from "react"
+
+import BlockWrapper from "../BlockWrapper"
+
+const ALLOWED_NESTED_BLOCKS = ["core/image", "core/paragraph"]
+const AUTHOR_BLOCK_TEMPLATE: Template[] = [
+  [
+    "core/columns",
+    { isStackedOnMobile: true },
+    [
+      [
+        "core/column",
+        {},
+        [
+          [
+            "core/image",
+            {
+              level: 2,
+              textAlign: "left",
+              anchor: "author-photo",
+            },
+          ],
+        ],
+      ],
+      [
+        "core/column",
+        {},
+        [
+          [
+            "core/paragraph",
+            {
+              content: "Insert author's bio text...",
+              placeholder: "Insert author's bio text...",
+              align: "left",
+            },
+          ],
+        ],
+      ],
+    ],
+  ],
+]
+
+const AuthorEditor: React.FC<React.PropsWithChildren<BlockEditProps<Record<string, never>>>> = ({
+  clientId,
+}) => {
+  return (
+    <BlockWrapper id={clientId}>
+      <div>
+        <InnerBlocks allowedBlocks={ALLOWED_NESTED_BLOCKS} template={AUTHOR_BLOCK_TEMPLATE} />
+      </div>
+    </BlockWrapper>
+  )
+}
+
+export default AuthorEditor
diff --git a/services/cms/src/blocks/AuthorInnerBlock/AuthorInnerBlockSave.tsx b/services/cms/src/blocks/AuthorInnerBlock/AuthorInnerBlockSave.tsx
@@ -0,0 +1,11 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+
+const AuthorInnerBlockSave: React.FC<unknown> = () => {
+  return (
+    <div>
+      <InnerBlocks.Content />
+    </div>
+  )
+}
+
+export default AuthorInnerBlockSave
diff --git a/services/cms/src/blocks/AuthorInnerBlock/index.tsx b/services/cms/src/blocks/AuthorInnerBlock/index.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable i18next/no-literal-string */
+import { BlockConfiguration } from "@wordpress/blocks"
+
+import { MOOCFI_CATEGORY_SLUG } from "../../utils/Gutenberg/modifyGutenbergCategories"
+
+import AuthorInnerBlockEditor from "./AuthorInnerBlockEditor"
+import AuthorInnerBlockSave from "./AuthorInnerBlockSave"
+
+const AuthorInnerBlockConfiguration: BlockConfiguration = {
+  title: "AuthorInnerBlock",
+  description: "Author InnerBlock",
+  category: MOOCFI_CATEGORY_SLUG,
+  attributes: {},
+  edit: AuthorInnerBlockEditor,
+  save: AuthorInnerBlockSave,
+}
+
+export default AuthorInnerBlockConfiguration
diff --git a/services/cms/src/blocks/index.tsx b/services/cms/src/blocks/index.tsx
@@ -2,6 +2,8 @@
 import { BlockConfiguration } from "@wordpress/blocks"
 
 import Aside from "./Aside"
+import Author from "./Author"
+import AuthorInnerBlock from "./AuthorInnerBlock"
 import ChapterProgress from "./ChapterProgress"
 import Congratulations from "./Congratulations"
 import CourseChapterGrid from "./CourseChapterGrid"
@@ -54,6 +56,8 @@ export const blockTypeMapForPages = [
   ["moocfi/tablebox", TableBox],
   ["moocfi/iframe", Iframe],
   ["moocfi/map", Map],
+  ["moocfi/author", Author],
+  ["moocfi/author-inner-block", AuthorInnerBlock],
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ] as Array<[string, BlockConfiguration<Record<string, any>>]>
 

diff --git a/services/course-material/src/components/ContentRenderer/DefaultBlock.tsx b/services/course-material/src/components/ContentRenderer/DefaultBlock.tsx
@@ -1,12 +1,25 @@
+import { css } from "@emotion/css"
+
 import { BlockAttributes } from "../../../types/GutenbergBlockAttributes"
+import { baseTheme } from "../../shared-module/styles"
 import withErrorBoundary from "../../shared-module/utils/withErrorBoundary"
 
 import { BlockRendererProps } from "."
 
 const DefaultBlock: React.FC<React.PropsWithChildren<BlockRendererProps<BlockAttributes>>> = ({
   data,
 }) => {
-  return <pre>{JSON.stringify(data, undefined, 2)}</pre>
+  return (
+    <div
+      className={css`
+        padding: 1rem;
+        border: 1px solid ${baseTheme.colors.gray[400]};
+      `}
+    >
+      <b>{data.name}</b>
+      <pre>{JSON.stringify(data, undefined, 2)}</pre>
+    </div>
+  )
 }
 
 export default withErrorBoundary(DefaultBlock)
diff --git a/services/course-material/src/components/ContentRenderer/index.tsx b/services/course-material/src/components/ContentRenderer/index.tsx
@@ -36,6 +36,8 @@ import SeparatorBlock from "./core/layout/Separator"
 import SpacerBlock from "./core/layout/SpacerBlock"
 import AsideBlock from "./moocfi/AsideBlock"
 import AudioPlayer from "./moocfi/AudioPlayer/index"
+import AuthorBlock from "./moocfi/AuthorBlock"
+import AuthorInnerBlock from "./moocfi/AuthorInnerBlock"
 import ChapterProgressBlock from "./moocfi/ChapterProgressBlock"
 import CongratulationsBlock from "./moocfi/CongratulationsBlock"
 import CourseChapterGridBlock from "./moocfi/CourseChapterGridBlock"
@@ -144,6 +146,8 @@ export const blockToRendererMap: { [blockName: string]: any } = {
   "moocfi/iframe": IframeBlock,
   "moocfi/audio-upload": AudioPlayer,
   "moocfi/map": Map,
+  "moocfi/author": AuthorBlock,
+  "moocfi/author-inner-block": AuthorInnerBlock,
   "moocfi/research-consent-checkbox": ResearchFormCheckBoxBlock,
 }
 

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/AuthorBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/AuthorBlock.tsx
@@ -0,0 +1,73 @@
+import styled from "@emotion/styled"
+import { t } from "i18next"
+import React from "react"
+
+import { BlockRendererProps } from ".."
+import { baseTheme } from "../../../shared-module/styles"
+import withErrorBoundary from "../../../shared-module/utils/withErrorBoundary"
+import InnerBlocks from "../util/InnerBlocks"
+
+interface InfoBoxBlockAttributes {
+  backgroundColor: string
+}
+
+const Wrapper = styled.div`
+  background: #f7f8f9;
+  padding: 2rem 2rem 1rem 2rem;
+  margin-bottom: 1rem;
+
+  h3 {
+    color: ${baseTheme.colors.gray[700]};
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid #edf0f2;
+    font-weight: 600;
+    font-size: 22px;
+    margin-bottom: 1.4rem;
+  }
+
+  /*Overwrite InnerBlock Component styles*/
+
+  figure {
+    margin: 0;
+    img {
+      margin: 0;
+      width: 250px;
+      height: 223px;
+      object-fit: cover;
+    }
+  }
+
+  div {
+    margin-left: 0;
+  }
+
+  div.course-material-block > div > div:nth-child(2) {
+    margin-bottom: 1.4rem !important;
+  }
+
+  div.course-material-block > div > div > div > div:nth-child(1) {
+    max-width: 250px !important;
+  }
+
+  p {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 400;
+    color: ${baseTheme.colors.gray[600]};
+  }
+`
+
+const AuthorBlock: React.FC<React.PropsWithChildren<BlockRendererProps<InfoBoxBlockAttributes>>> = (
+  props,
+) => {
+  return (
+    <Wrapper>
+      <h3>{t("author")}</h3>
+      <div>
+        <InnerBlocks parentBlockProps={props} />
+      </div>
+    </Wrapper>
+  )
+}
+
+export default withErrorBoundary(AuthorBlock)
diff --git a/services/course-material/src/components/ContentRenderer/moocfi/AuthorInnerBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/AuthorInnerBlock.tsx
@@ -0,0 +1,21 @@
+import React from "react"
+
+import { BlockRendererProps } from ".."
+import withErrorBoundary from "../../../shared-module/utils/withErrorBoundary"
+import InnerBlocks from "../util/InnerBlocks"
+
+interface InfoBoxBlockAttributes {
+  backgroundColor: string
+}
+
+const AuthorInnerBlock: React.FC<
+  React.PropsWithChildren<BlockRendererProps<InfoBoxBlockAttributes>>
+> = (props) => {
+  return (
+    <div>
+      <InnerBlocks parentBlockProps={props} />
+    </div>
+  )
+}
+
+export default withErrorBoundary(AuthorInnerBlock)
diff --git a/services/headless-lms/server/src/domain/langs/token.rs b/services/headless-lms/server/src/domain/langs/token.rs
@@ -51,32 +51,40 @@ impl FromRequest for AuthToken {
             .and_then(|h| h.strip_prefix("Bearer ").map(str::to_string));
         async move {
             let Some(token) = auth_header else {
-                return Err(ControllerError::new(ControllerErrorType::Unauthorized, "Missing bearer token".to_string(), None));
+                return Err(ControllerError::new(
+                    ControllerErrorType::Unauthorized,
+                    "Missing bearer token".to_string(),
+                    None,
+                ));
             };
             let mut conn = pool.acquire().await?;
 
-
-        let user = if app_conf.test_mode {
-            warn!("Using test credentials. Normal accounts won't work.");
-            authorization::authenticate_test_token(&mut conn, &token, &app_conf)
-                .await.map_err(|err|
-                    ControllerError::new(ControllerErrorType::Unauthorized, "Could not find user".to_string(), Some(err)))?
-        } else {
-            match load_user(&cache, &token).await {
-                Some(user) => user,
-                None => {
-                    let token = LoginToken::new(
-                        oauth2::AccessToken::new(token),
-                        oauth2::basic::BasicTokenType::Bearer,
-                        oauth2::EmptyExtraTokenFields {},
-                    );
-                    let user = authorization::get_user_from_moocfi(&token, &mut conn).await?;
-                    cache_user(&cache, &token, &user)
-                        .await;
-                    user
+            let user = if app_conf.test_mode {
+                warn!("Using test credentials. Normal accounts won't work.");
+                authorization::authenticate_test_token(&mut conn, &token, &app_conf)
+                    .await
+                    .map_err(|err| {
+                        ControllerError::new(
+                            ControllerErrorType::Unauthorized,
+                            "Could not find user".to_string(),
+                            Some(err),
+                        )
+                    })?
+            } else {
+                match load_user(&cache, &token).await {
+                    Some(user) => user,
+                    None => {
+                        let token = LoginToken::new(
+                            oauth2::AccessToken::new(token),
+                            oauth2::basic::BasicTokenType::Bearer,
+                            oauth2::EmptyExtraTokenFields {},
+                        );
+                        let user = authorization::get_user_from_moocfi(&token, &mut conn).await?;
+                        cache_user(&cache, &token, &user).await;
+                        user
+                    }
                 }
-            }
-        };
+            };
 
             Ok(Self(user))
         }

diff --git a/services/headless-lms/server/src/programs/seed/data/lilo-and-stitch.jpg b/services/headless-lms/server/src/programs/seed/data/lilo-and-stitch.jpg