feat(client): add multifile editor breadcrumbs (#42907)

* feat(client): add multifile editor breadcrumbs * adjust margin * update snapshot * re-remove duplicate css * adjust arrow colours * update that pesky snapshot * add title to editor jaw * remove bolding, and center * update snapshot
2021-07-28 15:29:11 +01:00
parent 5432354361
commit 47adbde90b
8 changed files with 39 additions and 23 deletions
--- a/client/src/templates/Challenges/classic/ActionRow.js
+++ b/client/src/templates/Challenges/classic/ActionRow.js
@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import EditorTabs from './EditorTabs';
+import BreadCrumb from '../components/bread-crumb';

 const propTypes = {
  block: PropTypes.string,
@ -11,17 +12,20 @@ const propTypes = {
  switchDisplayTab: PropTypes.func
 };

-const ActionRow = ({ switchDisplayTab, showPreview, showConsole }) => {
+const ActionRow = ({
+  switchDisplayTab,
+  showPreview,
+  showConsole,
+  superBlock,
+  block
+}) => {
  const restartStep = () => {
    console.log('restart');
  };
  return (
    <div className='action-row'>
-      <div>
-        <h5 className='breadcrumbs-demo'>
-          Responsive Web Design &gt; Basic HTML Cat Photo App &gt;{' '}
-          <span>Step 23 of 213</span>
-        </h5>
+      <div className='breadcrumbs-demo'>
+        <BreadCrumb block={block} superBlock={superBlock} />
      </div>
      <div className='tabs-row'>
        <EditorTabs />
--- a/client/src/templates/Challenges/classic/DesktopLayout.js
+++ b/client/src/templates/Challenges/classic/DesktopLayout.js
@ -13,6 +13,7 @@ const paneType = {
 };

 const propTypes = {
+  block: PropTypes.string,
  challengeFiles: PropTypes.object,
  editor: PropTypes.element,
  hasEditableBoundries: PropTypes.bool,
@ -30,6 +31,7 @@ const propTypes = {
    onStopResize: PropTypes.func,
    onResize: PropTypes.func
  }),
+  superBlock: PropTypes.string,
  testOutput: PropTypes.element
 };

@ -68,7 +70,9 @@ class DesktopLayout extends Component {
      hasPreview,
      layoutState,
      preview,
-      hasEditableBoundries
+      hasEditableBoundries,
+      superBlock,
+      block
    } = this.props;

    const { showPreview, showConsole } = this.state;
@ -85,7 +89,12 @@ class DesktopLayout extends Component {
    return (
      <ReflexContainer className='desktop-layout' orientation='horizontal'>
        {projectBasedChallenge && (
-          <ActionRow switchDisplayTab={this.switchDisplayTab} {...this.state} />
+          <ActionRow
+            block={block}
+            switchDisplayTab={this.switchDisplayTab}
+            {...this.state}
+            superBlock={superBlock}
+          />
        )}
        <ReflexElement flex={8} {...reflexProps} {...resizeProps}>
          <ReflexContainer orientation='vertical'>
--- a/client/src/templates/Challenges/classic/MultifileEditor.js
+++ b/client/src/templates/Challenges/classic/MultifileEditor.js
@ -43,6 +43,7 @@ const propTypes = {
  setAccessibilityMode: PropTypes.func.isRequired,
  setEditorFocusability: PropTypes.func,
  theme: PropTypes.string,
+  title: PropTypes.string,
  updateFile: PropTypes.func.isRequired,
  visibleEditors: PropTypes.shape({
    indexjs: PropTypes.bool,
@ -98,6 +99,7 @@ class MultifileEditor extends Component {
      editorRef,
      theme,
      resizeProps,
+      title,
      visibleEditors: { indexcss, indexhtml, indexjs, indexjsx }
    } = this.props;
    const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
@ -155,6 +157,7 @@ class MultifileEditor extends Component {
                  key='indexjsx'
                  resizeProps={resizeProps}
                  theme={editorTheme}
+                  title={title}
                />
              </ReflexElement>
            )}
@ -174,6 +177,7 @@ class MultifileEditor extends Component {
                  key='indexhtml'
                  resizeProps={resizeProps}
                  theme={editorTheme}
+                  title={title}
                />
              </ReflexElement>
            )}
@ -191,6 +195,7 @@ class MultifileEditor extends Component {
                  key='indexcss'
                  resizeProps={resizeProps}
                  theme={editorTheme}
+                  title={title}
                />
              </ReflexElement>
            )}
@ -209,6 +214,7 @@ class MultifileEditor extends Component {
                  key='indexjs'
                  resizeProps={resizeProps}
                  theme={editorTheme}
+                  title={title}
                />
              </ReflexElement>
            )}
--- a/client/src/templates/Challenges/classic/Show.tsx
+++ b/client/src/templates/Challenges/classic/Show.tsx
@ -303,7 +303,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {

  renderEditor() {
    const { files } = this.props;
-    const { description } = this.getChallenge();
+    const { description, title } = this.getChallenge();
    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
    return (
      files && (
@ -314,6 +314,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
          editorRef={this.editorRef}
          hasEditableBoundries={this.hasEditableBoundries()}
          resizeProps={this.resizeProps}
+          title={title}
        />
      )
    );
@ -395,6 +396,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
          </Media>
          <Media minWidth={MAX_MOBILE_WIDTH + 1}>
            <DesktopLayout
+              block={block}
              challengeFiles={files}
              editor={this.renderEditor()}
              hasEditableBoundries={this.hasEditableBoundries()}
@ -405,6 +407,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
              layoutState={this.state.layout}
              preview={this.renderPreview()}
              resizeProps={this.resizeProps}
+              superBlock={superBlock}
              testOutput={this.renderTestOutput()}
            />
          </Media>
--- a/client/src/templates/Challenges/classic/editor.css
+++ b/client/src/templates/Challenges/classic/editor.css
@ -16,10 +16,7 @@

 .breadcrumbs-demo {
  font-size: 16px;
-}
-
-.breadcrumbs-demo span {
-  font-weight: bold;
+  margin: 0 0 1.2rem;
 }

 .tabs-row {
--- a/client/src/templates/Challenges/classic/editor.tsx
+++ b/client/src/templates/Challenges/classic/editor.tsx
@ -67,6 +67,7 @@ interface EditorProps {
  submitChallenge: () => void;
  tests: TestType[];
  theme: string;
+  title: string;
  updateFile: (objest: {
    key: FileKeyTypes;
    editorValue: string;
@ -493,7 +494,9 @@ const Editor = (props: EditorProps): JSX.Element => {

  function createDescription(editor: editor.IStandaloneCodeEditor) {
    if (data.descriptionNode) return data.descriptionNode;
-    const { description } = props;
+    const { description, title } = props;
+    const jawHeading = document.createElement('h3');
+    jawHeading.innerText = title;
    // TODO: var was used here. Should it?
    const domNode = document.createElement('div');
    const desc = document.createElement('div');
@ -501,6 +504,7 @@ const Editor = (props: EditorProps): JSX.Element => {
    descContainer.classList.add('description-container');
    domNode.classList.add('editor-upper-jaw');
    domNode.appendChild(descContainer);
+    descContainer.appendChild(jawHeading);
    descContainer.appendChild(desc);
    desc.innerHTML = description;
    // desc.style.background = 'white';
@ -708,8 +712,7 @@ const Editor = (props: EditorProps): JSX.Element => {
    // TODO: handle the case that the editable region reaches the bottom of the
    // editor
    return (
-      data.model?.getDecorationRange(data.endEditDecId)
-        ?.startLineNumber ?? 1
+      data.model?.getDecorationRange(data.endEditDecId)?.startLineNumber ?? 1
    );
  }

--- a/client/src/templates/Challenges/components/bread-crumb.tsx
+++ b/client/src/templates/Challenges/components/bread-crumb.tsx
@ -12,8 +12,6 @@ interface BreadCrumbProps {
 function BreadCrumb({ block, superBlock }: BreadCrumbProps): JSX.Element {
  return (
    <div className='challenge-title-breadcrumbs'>
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/* @ts-ignore */}
      <Link
        className='breadcrumb-left'
        state={{ breadcrumbBlockClick: block }}
@ -24,8 +22,6 @@ function BreadCrumb({ block, superBlock }: BreadCrumbProps): JSX.Element {
        </span>
      </Link>
      <div className='breadcrumb-center' />
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/* @ts-ignore */}
      <Link
        className='breadcrumb-right'
        state={{ breadcrumbBlockClick: block }}
--- a/client/src/templates/Challenges/components/challenge-title.css
+++ b/client/src/templates/Challenges/components/challenge-title.css
@ -19,6 +19,7 @@
  font-size: 16px;
  border: 1px solid var(--quaternary-background);
  height: 25px;
+  text-align: center;
 }

 .breadcrumb-left {
@ -30,7 +31,6 @@
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 25px;
-  word-wrap: none;
  white-space: nowrap;
  flex-grow: 1;
  flex-shrink: 2;
@ -57,7 +57,6 @@
  min-width: 50px;
  flex-grow: 2;
  flex-shrink: 1;
-  word-wrap: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
@ -86,7 +85,6 @@
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: fit-content;
-  word-wrap: none;
  white-space: pre-line;
  flex-grow: 1;
  flex-shrink: 1;