From 984558ecf42b5f202f507900f607f6f250d39f4b Mon Sep 17 00:00:00 2001 From: Shimul Chowdhury Date: Fri, 2 Apr 2021 00:07:11 +0600 Subject: [PATCH] [BB-3785] Add Course Outline Page Preview (#725) * Add Course Outline Page Preview Add course outline preview to new console Fix styling and add snapshot tests Show course outline page Add course header on navigation menu Add course outline page on ConsolePage Fix CourseOutlinePreview tests Remove footer margin Add new console home page Fix lint issue Simplify imports Remove unused import Fix integration tests Remove unnecessary mock * Trigger Build * Rename Logos to ConsoleHome --- e2e_tests/tests/test_login.py | 4 +- e2e_tests/tests/test_password_reset.py | 4 +- .../CourseOutlinePreview.spec.tsx | 20 + .../CourseOutlinePreview.tsx | 219 +++++ .../CourseOutlinePreview.spec.tsx.snap | 817 ++++++++++++++++++ .../components/CourseOutlinePreview/index.ts | 1 + .../CourseOutlinePreview/style.scss | 110 +++ .../CustomizableCourseTab.spec.tsx | 8 + .../CustomizableCourseTab.tsx | 37 + .../CustomizableCourseTab.spec.tsx.snap | 77 ++ .../components/CustomizableCourseTab/index.ts | 1 + .../CustomizableCourseTab/style.scss | 12 + .../CustomizableLink/CustomizableLink.tsx | 7 +- .../HomePagePreview/HomePagePreview.spec.tsx | 20 + .../HomePagePreview/HomePagePreview.tsx | 55 ++ .../HomePagePreview.spec.tsx.snap | 411 +++++++++ .../components/HomePagePreview/index.ts | 1 + .../NavigationMenu/NavigationMenu.tsx | 43 +- .../NavigationMenu.spec.tsx.snap | 14 +- .../components/NavigationMenu/styles.scss | 15 + .../PreviewComponent.spec.tsx | 4 +- .../PreviewComponent/PreviewComponent.tsx | 40 +- .../PreviewComponent.spec.tsx.snap | 14 +- .../components/PreviewComponent/styles.scss | 16 + .../ThemePreviewAndColors.spec.tsx.snap | 28 +- frontend/src/console/components/index.ts | 4 + .../ConsoleHome.spec.tsx} | 4 +- .../Logos.tsx => ConsoleHome/ConsoleHome.tsx} | 23 +- .../__snapshots__/ConsoleHome.spec.tsx.snap} | 0 .../components/ConsoleHome/index.ts | 1 + .../CourseOutlinePreview.tsx | 14 + .../components/CourseOutlinePreview/index.ts | 1 + .../components/PreviewBox/style.scss | 4 + frontend/src/newConsole/components/index.ts | 2 + .../components/newConsolePage/ConsolePage.tsx | 9 +- .../newConsole/components/newLogos/index.ts | 1 - frontend/src/routes/console.tsx | 18 +- 37 files changed, 1931 insertions(+), 128 deletions(-) create mode 100644 frontend/src/console/components/CourseOutlinePreview/CourseOutlinePreview.spec.tsx create mode 100644 frontend/src/console/components/CourseOutlinePreview/CourseOutlinePreview.tsx create mode 100644 frontend/src/console/components/CourseOutlinePreview/__snapshots__/CourseOutlinePreview.spec.tsx.snap create mode 100644 frontend/src/console/components/CourseOutlinePreview/index.ts create mode 100644 frontend/src/console/components/CourseOutlinePreview/style.scss create mode 100644 frontend/src/console/components/CustomizableCourseTab/CustomizableCourseTab.spec.tsx create mode 100644 frontend/src/console/components/CustomizableCourseTab/CustomizableCourseTab.tsx create mode 100644 frontend/src/console/components/CustomizableCourseTab/__snapshots__/CustomizableCourseTab.spec.tsx.snap create mode 100644 frontend/src/console/components/CustomizableCourseTab/index.ts create mode 100644 frontend/src/console/components/CustomizableCourseTab/style.scss create mode 100644 frontend/src/console/components/HomePagePreview/HomePagePreview.spec.tsx create mode 100644 frontend/src/console/components/HomePagePreview/HomePagePreview.tsx create mode 100644 frontend/src/console/components/HomePagePreview/__snapshots__/HomePagePreview.spec.tsx.snap create mode 100644 frontend/src/console/components/HomePagePreview/index.ts rename frontend/src/newConsole/components/{newLogos/Logos.spec.tsx => ConsoleHome/ConsoleHome.spec.tsx} (59%) rename frontend/src/newConsole/components/{newLogos/Logos.tsx => ConsoleHome/ConsoleHome.tsx} (57%) rename frontend/src/newConsole/components/{newLogos/__snapshots__/Logos.spec.tsx.snap => ConsoleHome/__snapshots__/ConsoleHome.spec.tsx.snap} (100%) create mode 100644 frontend/src/newConsole/components/ConsoleHome/index.ts create mode 100644 frontend/src/newConsole/components/CourseOutlinePreview/CourseOutlinePreview.tsx create mode 100644 frontend/src/newConsole/components/CourseOutlinePreview/index.ts diff --git a/e2e_tests/tests/test_login.py b/e2e_tests/tests/test_login.py index 4b6185095..a370f764e 100644 --- a/e2e_tests/tests/test_login.py +++ b/e2e_tests/tests/test_login.py @@ -82,8 +82,8 @@ def test_login_page_success(self): EC.url_changes("http://localhost:3000/login") ) - # Test we move to theming page - self.assertEqual(self.browser.current_url, "http://localhost:3000/console/theming/preview-and-colors") + # Test we move to console home page + self.assertEqual(self.browser.current_url, "http://localhost:3000/console") # Log out user self.browser.get('http://localhost:3000/logout') diff --git a/e2e_tests/tests/test_password_reset.py b/e2e_tests/tests/test_password_reset.py index 5127130fd..c7caa4c2f 100644 --- a/e2e_tests/tests/test_password_reset.py +++ b/e2e_tests/tests/test_password_reset.py @@ -203,7 +203,7 @@ def setUp(self): self.reset_password_token = ResetPasswordToken.objects.create(user=self.user_with_app) self.confirm_token_page_url = f"{settings.USER_CONSOLE_FRONTEND_URL}/password-reset/" + "{token}" self.login_page_url = f"{settings.USER_CONSOLE_FRONTEND_URL}/login" - self.theme_preview_url = f"{settings.USER_CONSOLE_FRONTEND_URL}/console/theming/preview-and-colors" + self.console_home_url = f"{settings.USER_CONSOLE_FRONTEND_URL}/console" self.strong_password = "Tom&Jerry2021" @property @@ -372,4 +372,4 @@ def test_password_changed_on_strong_password(self): EC.url_changes((By.CLASS_NAME, self.login_page_url)) ) - self.assertEqual(self.browser.current_url, self.theme_preview_url) + self.assertEqual(self.browser.current_url, self.console_home_url) diff --git a/frontend/src/console/components/CourseOutlinePreview/CourseOutlinePreview.spec.tsx b/frontend/src/console/components/CourseOutlinePreview/CourseOutlinePreview.spec.tsx new file mode 100644 index 000000000..172642e8c --- /dev/null +++ b/frontend/src/console/components/CourseOutlinePreview/CourseOutlinePreview.spec.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { setupComponentForTesting } from "utils/testing"; +import { CourseOutlinePreview } from './CourseOutlinePreview'; + +it('renders without crashing', () => { + const instanceData = { + id: 1, + instanceName: "test", + subdomain: "test", + publicContactEmail: "", + privacyPolicyUrl: "", + draftThemeConfig: {}, + draftStaticContentOverrides: { + homepageOverlayHtml: "", + }, + heroCoverImage: "test", + } + const tree = setupComponentForTesting().toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/frontend/src/console/components/CourseOutlinePreview/CourseOutlinePreview.tsx b/frontend/src/console/components/CourseOutlinePreview/CourseOutlinePreview.tsx new file mode 100644 index 000000000..96df052aa --- /dev/null +++ b/frontend/src/console/components/CourseOutlinePreview/CourseOutlinePreview.tsx @@ -0,0 +1,219 @@ +import React from 'react'; +import { + Accordion, + Button, + Col, + Container, + Form, + FormControl, + Navbar, + Row +} from 'react-bootstrap'; +import { NavigationMenu } from 'console/components/NavigationMenu'; +import { InstanceSettingsModel } from 'console/models'; +import { + FooterPreview, + CustomizableButton, + CustomizableLink, + CustomizableCourseTab +} from 'console/components'; + +import './style.scss'; + +interface CourseOutlineItemsProps { + instanceData: InstanceSettingsModel; +} + +interface SubSection { + title: string; + icon?: string; +} + +interface Section { + title: string; + items: Array; +} + +const COURSE_OUTLINE_ITEMS: Array
= [ + { + title: 'Introduction', + items: [{ title: 'Demo Course Overview' }] + }, + { + title: 'Example Week 1: Getting Started', + items: [ + { title: 'Lesson 1 - Getting Started' }, + { title: 'Homework - Question Styles (7 Questions)', icon: 'far fa-edit' } + ] + }, + { + title: 'Example Week 2: Get Interactive', + items: [ + { title: "Lesson 2 - Let's Get Interactive!" }, + { title: 'Homework - Lab and Demos (5 Questions)' }, + { title: 'Homework - Essays' } + ] + }, + { + title: 'Example Week 3: Be Social', + items: [ + { title: 'Lesson 3 - Be Social' }, + { title: 'Homework - Find Your Study Buddy' }, + { title: 'More Ways to Connect' } + ] + }, + { + title: 'About Exams and Certificates', + items: [{ title: 'edX Exams (6 Questions)' }] + } +]; + +const CourseOutlineItems: React.FC = ( + props: CourseOutlineItemsProps +) => { + const { instanceData } = props; + const themeData = instanceData.draftThemeConfig; + + const arrowStyle = { + color: themeData?.linkColor + }; + + return ( + + {/* eslint-disable react/no-array-index-key */} + {COURSE_OUTLINE_ITEMS.map((section, index) => ( +
+ + + {section.title} + + +
+ {section.items.map((subsection, idx) => ( + + {subsection.icon && } + {subsection.title} + + ))} +
+ +
+ ))} + + ); +}; + +interface CourseOutlinePreviewProps { + children?: React.ReactNode; + instanceData: InstanceSettingsModel; +} + +export const CourseOutlinePreview: React.FC = ( + props: CourseOutlinePreviewProps +) => { + const { instanceData } = props; + const themeData = instanceData.draftThemeConfig!; + return ( + <> + + + +
+ +
+ +

Demonstration Course

+
+ + + Search + + + + Start Course + +
+
+
+
+ + Expand All + +
+ + +
+
+
+

Course Tools

+
    +
  • + + + Bookmarks + +
    • +
+
+
+

Course Handouts

+
    +
  1. + + Example handout + +
    2. +
+
+
+
+
+
+ + + + + + + ); +}; diff --git a/frontend/src/console/components/CourseOutlinePreview/__snapshots__/CourseOutlinePreview.spec.tsx.snap b/frontend/src/console/components/CourseOutlinePreview/__snapshots__/CourseOutlinePreview.spec.tsx.snap new file mode 100644 index 000000000..75823bdea --- /dev/null +++ b/frontend/src/console/components/CourseOutlinePreview/__snapshots__/CourseOutlinePreview.spec.tsx.snap @@ -0,0 +1,817 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without crashing 1`] = ` +Array [ +
+
+
+
+
+ + edX: Demox + + + Demonstration Course + +
+ +
+
+
+
+ + Avatar + + +
+
+
+
+
, +
+ +
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ + +
+
+
+
+ +
+
+ + + +
+
+
+
+ +
+
+ + + +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+

+ Course Tools +

+
    +
  • + +
    • +
+
+
+

+ Course Handouts +

+
    +
  1. + +
    2. +
+
+
+
+
+
, +
+
+
+
+
+
+ + + + +
+
+
+
+ Open edX logo +
+
+
+
+
+
+
+ © test. + All rights reserved except where noted. edX, Open edX and their respective logos are registered trademarks of edX Inc. +
+
+
+ + + + +
+
+
+
, +] +`; diff --git a/frontend/src/console/components/CourseOutlinePreview/index.ts b/frontend/src/console/components/CourseOutlinePreview/index.ts new file mode 100644 index 000000000..04c235ce2 --- /dev/null +++ b/frontend/src/console/components/CourseOutlinePreview/index.ts @@ -0,0 +1 @@ +export * from './CourseOutlinePreview'; diff --git a/frontend/src/console/components/CourseOutlinePreview/style.scss b/frontend/src/console/components/CourseOutlinePreview/style.scss new file mode 100644 index 000000000..dfd826c52 --- /dev/null +++ b/frontend/src/console/components/CourseOutlinePreview/style.scss @@ -0,0 +1,110 @@ +.main-navigation-menu { + margin-bottom: 0; +} + +.theme-course-outline-view { + border: 1px solid #e7e7e7; + margin: 0px 15px 15px 15px; + + .customizable-button { + width: auto; + } + + .searchBox { + height: 30px; + } + + h2 { + color: #313131; + font-family: sans-serif; + font-size: 16px; + } + + .outline-body { + display: flex; + flex-direction: row; + padding-top: 15px; + padding-bottom: 15px; + } + + .outline-header { + border-bottom: 1px solid #e7e7e7; + } + + .outline-tree-action-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + + + .theme-course-outline-tree { + padding-left: 15px; + padding-right: 15px; + + .toggle-btn { + display: block; + width: 100%; + text-align: left; + padding: 10px 0 10px 2px; + text-transform: none; + .fa { + margin-right: 15px; + } + } + + .course-outline-section { + border-bottom: 1px solid #e7e7e7; + } + + .course-outline-subsection { + padding-left: 21px; + + .customizable-link { + display: block; + width: 100%; + text-align: left; + height: auto; + font-size: 10px; + border: none; + border-top: 1px solid #e7e7e7; + + &:hover { + text-decoration: underline; + } + } + } + } + + .outline-container { + flex-grow: 1; + } + + .course-outline-sidebar { + max-width: 250px; + margin-left: 40px; + margin-right: 15px; + .sidebar-section { + h3 { + font-weight: 400; + } + + .customizable-link { + height: auto; + border: none; + font-size: 10px; + padding: 0; + .fa { + margin-right: 10px; + } + &:hover { + text-decoration: underline; + + .fa::before { + text-decoration: none; + } + } + } + } + } +} diff --git a/frontend/src/console/components/CustomizableCourseTab/CustomizableCourseTab.spec.tsx b/frontend/src/console/components/CustomizableCourseTab/CustomizableCourseTab.spec.tsx new file mode 100644 index 000000000..3257bb33c --- /dev/null +++ b/frontend/src/console/components/CustomizableCourseTab/CustomizableCourseTab.spec.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { setupComponentForTesting } from "utils/testing"; +import { CustomizableCourseTab } from './CustomizableCourseTab'; + +it('renders without crashing', () => { + const tree = setupComponentForTesting().toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/frontend/src/console/components/CustomizableCourseTab/CustomizableCourseTab.tsx b/frontend/src/console/components/CustomizableCourseTab/CustomizableCourseTab.tsx new file mode 100644 index 000000000..d99a308b2 --- /dev/null +++ b/frontend/src/console/components/CustomizableCourseTab/CustomizableCourseTab.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Nav, Navbar } from 'react-bootstrap'; +import { CustomizableLink } from '../CustomizableLink'; +import './style.scss'; + +interface CustomizableCourseTabProps { + children?: React.ReactNode; + color?: string; +} + +export const CustomizableCourseTab: React.FC = ({ + color +}: CustomizableCourseTabProps) => { + return ( + + + + ); +}; diff --git a/frontend/src/console/components/CustomizableCourseTab/__snapshots__/CustomizableCourseTab.spec.tsx.snap b/frontend/src/console/components/CustomizableCourseTab/__snapshots__/CustomizableCourseTab.spec.tsx.snap new file mode 100644 index 000000000..ce73e80c8 --- /dev/null +++ b/frontend/src/console/components/CustomizableCourseTab/__snapshots__/CustomizableCourseTab.spec.tsx.snap @@ -0,0 +1,77 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without crashing 1`] = ` + +`; diff --git a/frontend/src/console/components/CustomizableCourseTab/index.ts b/frontend/src/console/components/CustomizableCourseTab/index.ts new file mode 100644 index 000000000..f3c3843aa --- /dev/null +++ b/frontend/src/console/components/CustomizableCourseTab/index.ts @@ -0,0 +1 @@ +export * from './CustomizableCourseTab'; diff --git a/frontend/src/console/components/CustomizableCourseTab/style.scss b/frontend/src/console/components/CustomizableCourseTab/style.scss new file mode 100644 index 000000000..07848ff65 --- /dev/null +++ b/frontend/src/console/components/CustomizableCourseTab/style.scss @@ -0,0 +1,12 @@ +.theme-course-tabs { + padding-bottom: 0; + + .customizable-link { + + font-size: 0.875rem; + + padding: 15px 15px 13px !important; + + } + +} diff --git a/frontend/src/console/components/CustomizableLink/CustomizableLink.tsx b/frontend/src/console/components/CustomizableLink/CustomizableLink.tsx index 24d333956..4a46045aa 100644 --- a/frontend/src/console/components/CustomizableLink/CustomizableLink.tsx +++ b/frontend/src/console/components/CustomizableLink/CustomizableLink.tsx @@ -5,6 +5,7 @@ import './styles.scss'; interface CustomizableLinkProps { children?: React.ReactNode; linkColor?: string; + linkHoverColor?: string; borderBottomColor?: string; borderBottomHoverColor?: string; active?: boolean; @@ -20,7 +21,7 @@ export const CustomizableLink: React.FC = ( borderBottomColor: props.active ? props.borderBottomColor : undefined }); const [hoverStyle, setHoverStyle] = React.useState({ - color: props.linkColor, + color: props.linkHoverColor ? props.linkHoverColor : props.linkColor, borderBottomColor: props.borderBottomHoverColor ? props.borderBottomHoverColor : undefined @@ -40,12 +41,12 @@ export const CustomizableLink: React.FC = ( }, [props.linkColor, props.borderBottomColor, props.active]); React.useEffect(() => { setHoverStyle({ - color: props.linkColor, + color: props.linkHoverColor ? props.linkHoverColor : props.linkColor, borderBottomColor: props.borderBottomHoverColor ? props.borderBottomHoverColor : undefined }); - }, [props.linkColor, props.borderBottomHoverColor]); + }, [props.linkColor, props.borderBottomHoverColor, props.linkHoverColor]); const className = `customizable-link` + diff --git a/frontend/src/console/components/HomePagePreview/HomePagePreview.spec.tsx b/frontend/src/console/components/HomePagePreview/HomePagePreview.spec.tsx new file mode 100644 index 000000000..9f657ff90 --- /dev/null +++ b/frontend/src/console/components/HomePagePreview/HomePagePreview.spec.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { setupComponentForTesting } from "utils/testing"; +import { HomePagePreview } from './HomePagePreview'; + +it('renders without crashing', () => { + const instanceData = { + id: 1, + instanceName: "test", + subdomain: "test", + publicContactEmail: "", + privacyPolicyUrl: "", + draftThemeConfig: {}, + draftStaticContentOverrides: { + homepageOverlayHtml: "", + }, + heroCoverImage: "test", + } + const tree = setupComponentForTesting().toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/frontend/src/console/components/HomePagePreview/HomePagePreview.tsx b/frontend/src/console/components/HomePagePreview/HomePagePreview.tsx new file mode 100644 index 000000000..c89dbc6b1 --- /dev/null +++ b/frontend/src/console/components/HomePagePreview/HomePagePreview.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { Col, Row } from 'react-bootstrap'; +import { + NavigationMenu, + FooterPreview, + CoursesListingItem +} from 'console/components'; +import { InstanceSettingsModel } from 'console/models'; +import { HeroPreview } from 'ui/components/HeroPreview'; + +interface HomePagePreviewProps { + children?: React.ReactNode; + instanceData: InstanceSettingsModel; +} + +export const HomePagePreview: React.FC = ( + props: HomePagePreviewProps +) => { + const { instanceData } = props; + const themeData = instanceData.draftThemeConfig!; + return ( + <> + + + + + +
+ + + + + + + + + + +
+ + + + + + + ); +}; diff --git a/frontend/src/console/components/HomePagePreview/__snapshots__/HomePagePreview.spec.tsx.snap b/frontend/src/console/components/HomePagePreview/__snapshots__/HomePagePreview.spec.tsx.snap new file mode 100644 index 000000000..223303e27 --- /dev/null +++ b/frontend/src/console/components/HomePagePreview/__snapshots__/HomePagePreview.spec.tsx.snap @@ -0,0 +1,411 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders without crashing 1`] = ` +Array [ +
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
, +
+
+
+
+
+
+
+

+ +

+

+ +

+
+
+
+
+
+
+
+
+
+
+ course +
+
+ edX +
+
+ DemoX +
+
+ +
+
+ Starts: + Feb 5, 2013 +
+
+
+
+
, +
+
+
+
+
+
+ + + + +
+
+
+
+ Open edX logo +
+
+
+
+
+
+
+ © test. + All rights reserved except where noted. edX, Open edX and their respective logos are registered trademarks of edX Inc. +
+
+
+ + + + +
+
+
+
, +] +`; diff --git a/frontend/src/console/components/HomePagePreview/index.ts b/frontend/src/console/components/HomePagePreview/index.ts new file mode 100644 index 000000000..da2360515 --- /dev/null +++ b/frontend/src/console/components/HomePagePreview/index.ts @@ -0,0 +1 @@ +export * from './HomePagePreview'; diff --git a/frontend/src/console/components/NavigationMenu/NavigationMenu.tsx b/frontend/src/console/components/NavigationMenu/NavigationMenu.tsx index 36582202a..51b71cddf 100644 --- a/frontend/src/console/components/NavigationMenu/NavigationMenu.tsx +++ b/frontend/src/console/components/NavigationMenu/NavigationMenu.tsx @@ -13,6 +13,9 @@ interface NavigationMenuProps { instanceData: InstanceSettingsModel | null; themeData: ThemeSchema; loggedIn?: boolean; + + // shows course header for pages like outline or unit pages. + coursePage?: boolean; } export const NavigationMenu: React.FC = ( @@ -110,27 +113,35 @@ export const NavigationMenu: React.FC = ( ); + const courseHeader = ( +
+ edX: Demox + Demonstration Course +
+ ); + return ( - +
{props.instanceData && props.instanceData.logo && ( Logo )} - - - - Courses - - - +
+
+ {props.coursePage && courseHeader} + {!props.coursePage && ( + + Courses + + )} = ( > Discover New - - {userMenu} +
+
{userMenu}
 ); }; diff --git a/frontend/src/console/components/NavigationMenu/__snapshots__/NavigationMenu.spec.tsx.snap b/frontend/src/console/components/NavigationMenu/__snapshots__/NavigationMenu.spec.tsx.snap index 90d39aa8d..3f1af0867 100644 --- a/frontend/src/console/components/NavigationMenu/__snapshots__/NavigationMenu.spec.tsx.snap +++ b/frontend/src/console/components/NavigationMenu/__snapshots__/NavigationMenu.spec.tsx.snap @@ -2,7 +2,7 @@ exports[`renders without crashing 1`] = `
-
-
-
+
diff --git a/frontend/src/console/components/NavigationMenu/styles.scss b/frontend/src/console/components/NavigationMenu/styles.scss index 18e498971..7bfbc1193 100644 --- a/frontend/src/console/components/NavigationMenu/styles.scss +++ b/frontend/src/console/components/NavigationMenu/styles.scss @@ -39,4 +39,19 @@ img { max-width: 100%; } + + .course-header { + display: inline-flex; + flex-direction: column; + text-align: left; + justify-content: center; + + .course-org { + font-size: 12px; + } + .course-name { + font-size: 14px; + font-weight: 600; + } + } } diff --git a/frontend/src/console/components/PreviewComponent/PreviewComponent.spec.tsx b/frontend/src/console/components/PreviewComponent/PreviewComponent.spec.tsx index 046d0b44b..9389b88f4 100644 --- a/frontend/src/console/components/PreviewComponent/PreviewComponent.spec.tsx +++ b/frontend/src/console/components/PreviewComponent/PreviewComponent.spec.tsx @@ -13,8 +13,8 @@ it('renders without crashing', () => { draftStaticContentOverrides: { homepageOverlayHtml: "", }, - heroCoverImage: "test" + heroCoverImage: "test", } - const tree = setupComponentForTesting().toJSON(); + const tree = setupComponentForTesting().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/frontend/src/console/components/PreviewComponent/PreviewComponent.tsx b/frontend/src/console/components/PreviewComponent/PreviewComponent.tsx index e59c8fec0..4b39c1478 100644 --- a/frontend/src/console/components/PreviewComponent/PreviewComponent.tsx +++ b/frontend/src/console/components/PreviewComponent/PreviewComponent.tsx @@ -1,11 +1,7 @@ import * as React from 'react'; -import './styles.scss'; -import { Col, Row } from 'react-bootstrap'; -import { NavigationMenu } from '../NavigationMenu'; +import { HomePagePreview } from '../HomePagePreview'; import { InstanceSettingsModel } from '../../models'; -import { HeroPreview } from '../../../ui/components/HeroPreview'; -import { FooterPreview } from '../FooterPreview'; -import { CoursesListingItem } from '../CoursesListingItem'; +import './styles.scss'; interface PreviewComponentProps { children?: React.ReactNode; @@ -16,40 +12,10 @@ export const PreviewComponent: React.FC = ( props: PreviewComponentProps ) => { const { instanceData } = props; - const themeData = instanceData.draftThemeConfig!; return (
- - - - - -
- - - - - - - - - - -
- - - - - +
); }; diff --git a/frontend/src/console/components/PreviewComponent/__snapshots__/PreviewComponent.spec.tsx.snap b/frontend/src/console/components/PreviewComponent/__snapshots__/PreviewComponent.spec.tsx.snap index 07b8eb3ab..2a82016f2 100644 --- a/frontend/src/console/components/PreviewComponent/__snapshots__/PreviewComponent.spec.tsx.snap +++ b/frontend/src/console/components/PreviewComponent/__snapshots__/PreviewComponent.spec.tsx.snap @@ -11,7 +11,7 @@ exports[`renders without crashing 1`] = ` className="theme-preview-navigation col" >
-
-
-
+
diff --git a/frontend/src/console/components/PreviewComponent/styles.scss b/frontend/src/console/components/PreviewComponent/styles.scss index 40d881a2e..19a7f72ce 100644 --- a/frontend/src/console/components/PreviewComponent/styles.scss +++ b/frontend/src/console/components/PreviewComponent/styles.scss @@ -25,6 +25,22 @@ } } + /** Scale course outline page to fit in the preview box **/ + .theme-outline { + .customizable-button { + width: auto; + height: 18px; + font-size: 9px; + } + h2 { + font-size: 12px !important; + } + .form-control { + font-size: 9px; + height: 18px; + } + } + .theme-home { .theme-hero-container { margin-top: 10px; diff --git a/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap b/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap index 87e07df50..0bb5ac7a6 100644 --- a/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap +++ b/frontend/src/console/components/ThemePreviewAndColors/__snapshots__/ThemePreviewAndColors.spec.tsx.snap @@ -666,7 +666,7 @@ exports[`Theme preview and colors page Render theme settings page with theme set className="theme-preview-navigation col" >
-
-
-
+
@@ -1472,7 +1466,7 @@ exports[`Theme preview and colors page Render theme settings page with theme set className="theme-preview-navigation col" >
-
-
-
+
diff --git a/frontend/src/console/components/index.ts b/frontend/src/console/components/index.ts index 0a420a178..331f2367a 100644 --- a/frontend/src/console/components/index.ts +++ b/frontend/src/console/components/index.ts @@ -41,3 +41,7 @@ export * from './CoursesManage'; export * from './ThemeColors'; export * from './ButtonStyles'; + +export * from './CourseOutlinePreview'; + +export * from './CustomizableCourseTab'; diff --git a/frontend/src/newConsole/components/newLogos/Logos.spec.tsx b/frontend/src/newConsole/components/ConsoleHome/ConsoleHome.spec.tsx similarity index 59% rename from frontend/src/newConsole/components/newLogos/Logos.spec.tsx rename to frontend/src/newConsole/components/ConsoleHome/ConsoleHome.spec.tsx index 52df1112c..bc8ff09f7 100644 --- a/frontend/src/newConsole/components/newLogos/Logos.spec.tsx +++ b/frontend/src/newConsole/components/ConsoleHome/ConsoleHome.spec.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { setupComponentForTesting } from "utils/testing"; -import { Logos } from './Logos'; +import { ConsoleHome } from './ConsoleHome'; it('renders without crashing', () => { - const tree = setupComponentForTesting().toJSON(); + const tree = setupComponentForTesting().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/frontend/src/newConsole/components/newLogos/Logos.tsx b/frontend/src/newConsole/components/ConsoleHome/ConsoleHome.tsx similarity index 57% rename from frontend/src/newConsole/components/newLogos/Logos.tsx rename to frontend/src/newConsole/components/ConsoleHome/ConsoleHome.tsx index 718013210..ba51f12b3 100644 --- a/frontend/src/newConsole/components/newLogos/Logos.tsx +++ b/frontend/src/newConsole/components/ConsoleHome/ConsoleHome.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; -import './styles.scss'; -import { ConsolePage, PreviewBox } from 'newConsole/components'; +import { + ConsolePage, + PreviewBox, + CourseOutlinePreview +} from 'newConsole/components'; import { InstancesModel } from 'console/models'; import { connect } from 'react-redux'; import { RootState } from 'global/state'; @@ -13,19 +16,25 @@ interface ActionProps { interface StateProps extends InstancesModel {} interface Props extends StateProps, ActionProps {} -export class LogosComponent extends React.PureComponent { +export class ConsoleHomeComponent extends React.PureComponent { public render() { return ( - + + + ); } } -export const Logos = connect( - (state: RootState) => state.console -)(LogosComponent); +export const ConsoleHome = connect< + StateProps, + ActionProps, + {}, + Props, + RootState +>((state: RootState) => state.console)(ConsoleHomeComponent); diff --git a/frontend/src/newConsole/components/newLogos/__snapshots__/Logos.spec.tsx.snap b/frontend/src/newConsole/components/ConsoleHome/__snapshots__/ConsoleHome.spec.tsx.snap similarity index 100% rename from frontend/src/newConsole/components/newLogos/__snapshots__/Logos.spec.tsx.snap rename to frontend/src/newConsole/components/ConsoleHome/__snapshots__/ConsoleHome.spec.tsx.snap diff --git a/frontend/src/newConsole/components/ConsoleHome/index.ts b/frontend/src/newConsole/components/ConsoleHome/index.ts new file mode 100644 index 000000000..5012d605b --- /dev/null +++ b/frontend/src/newConsole/components/ConsoleHome/index.ts @@ -0,0 +1 @@ +export * from './ConsoleHome'; diff --git a/frontend/src/newConsole/components/CourseOutlinePreview/CourseOutlinePreview.tsx b/frontend/src/newConsole/components/CourseOutlinePreview/CourseOutlinePreview.tsx new file mode 100644 index 000000000..8aab052f2 --- /dev/null +++ b/frontend/src/newConsole/components/CourseOutlinePreview/CourseOutlinePreview.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import { RootState } from 'global/state'; +import { CourseOutlinePreview as PreviewComponent } from 'console/components'; + +export const CourseOutlinePreview = () => { + const instanceData = useSelector( + (state: RootState) => state.console.activeInstance?.data + ); + if (instanceData) { + return ; + } + return null; +}; diff --git a/frontend/src/newConsole/components/CourseOutlinePreview/index.ts b/frontend/src/newConsole/components/CourseOutlinePreview/index.ts new file mode 100644 index 000000000..04c235ce2 --- /dev/null +++ b/frontend/src/newConsole/components/CourseOutlinePreview/index.ts @@ -0,0 +1 @@ +export * from './CourseOutlinePreview'; diff --git a/frontend/src/newConsole/components/PreviewBox/style.scss b/frontend/src/newConsole/components/PreviewBox/style.scss index db94da0ff..6eed471a9 100644 --- a/frontend/src/newConsole/components/PreviewBox/style.scss +++ b/frontend/src/newConsole/components/PreviewBox/style.scss @@ -2,4 +2,8 @@ height: 100%; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); width: 95%; + + .custom-footer { + margin-bottom: 0; + } } diff --git a/frontend/src/newConsole/components/index.ts b/frontend/src/newConsole/components/index.ts index 63b2d528a..3c381706a 100644 --- a/frontend/src/newConsole/components/index.ts +++ b/frontend/src/newConsole/components/index.ts @@ -2,3 +2,5 @@ export * from './newConsolePage'; export * from './newCustomizationSideMenu'; export * from './newLogos'; export * from './PreviewBox'; +export * from './CourseOutlinePreview'; +export * from './ConsoleHome'; diff --git a/frontend/src/newConsole/components/newConsolePage/ConsolePage.tsx b/frontend/src/newConsole/components/newConsolePage/ConsolePage.tsx index 665e9046a..e0d6d8b86 100644 --- a/frontend/src/newConsole/components/newConsolePage/ConsolePage.tsx +++ b/frontend/src/newConsole/components/newConsolePage/ConsolePage.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; import { RedeploymentToolbar } from 'console/components'; -import { CustomizationSideMenu } from 'newConsole/components'; +import { + CustomizationSideMenu, + CourseOutlinePreview +} from 'newConsole/components'; import { EmailActivationAlertMessage, ErrorPage } from 'ui/components'; import { OCIM_API_BASE } from 'global/constants'; import { Row, Col, Container, Button } from 'react-bootstrap'; @@ -134,7 +137,9 @@ export class ConsolePageComponent extends React.PureComponent { {/* This is where the preview page component will be redered */} - + + + ); diff --git a/frontend/src/newConsole/components/newLogos/index.ts b/frontend/src/newConsole/components/newLogos/index.ts index d27362cd3..cbb68b557 100644 --- a/frontend/src/newConsole/components/newLogos/index.ts +++ b/frontend/src/newConsole/components/newLogos/index.ts @@ -1,2 +1 @@ -export * from './Logos'; export * from './LogoSidebar'; diff --git a/frontend/src/routes/console.tsx b/frontend/src/routes/console.tsx index 5b77dbb40..25ee7d837 100644 --- a/frontend/src/routes/console.tsx +++ b/frontend/src/routes/console.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Switch, Route, Redirect } from 'react-router'; +import { Switch } from 'react-router'; import { Hero, InstanceSettings, @@ -13,19 +13,13 @@ import { CustomPages, CoursesManage } from 'console/components'; +import { ConsoleHome } from 'newConsole/components'; import { PrivateRoute } from 'auth/components'; import { ROUTES } from '../global/constants'; export const ConsoleRoutes = () => { return ( - // Redirect to main customization page - - - - - - { path={ROUTES.Console.CUSTOM_PAGES} component={CustomPages} /> - {/* Below routes are for dummy implementation for Logo update component and they will be removed after implementation */} - {/* + + {/*