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

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>
+      <div className='breadcrumbs-demo'>
-        <h5 className='breadcrumbs-demo'>
+        <BreadCrumb block={block} superBlock={superBlock} />
-          Responsive Web Design &gt; Basic HTML Cat Photo App &gt;{' '}
-          <span>Step 23 of 213</span>
-        </h5>
       </div>
       <div className='tabs-row'>
         <EditorTabs />

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'>

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>
             )}

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>

client/src/templates/Challenges/classic/editor.css

@@ -16,10 +16,7 @@
 
 .breadcrumbs-demo {
   font-size: 16px;
-}
+  margin: 0 0 1.2rem;
-
-.breadcrumbs-demo span {
-  font-weight: bold;
 }
 
 .tabs-row {

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)
+      data.model?.getDecorationRange(data.endEditDecId)?.startLineNumber ?? 1
-        ?.startLineNumber ?? 1
     );
   }
 

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 }}

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;