Tca 299 UI for js course

client/src/components/formHelpers/block-save-button.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 function BlockSaveButton(props?: Record<string, unknown>): JSX.Element {
   const { t } = useTranslation();
   return (
-    <Button block={true} bsStyle='primary' {...props} type='submit'>
+    <Button bsStyle='primary' {...props} type='submit'>
       {props?.children || t('buttons.save')}
     </Button>
   );

client/src/components/formHelpers/form-fields.tsx

@@ -1,6 +1,5 @@
 import {
   Alert,
-  Col,
   ControlLabel,
   FormControl,
   FormGroup,
@@ -72,7 +71,7 @@ function FormFields(props: FormFieldsProps): JSX.Element {
     ) : null;
   };
   return (
-    <div>
+    <>
       {formFields
         .filter(formField => !ignored.includes(formField.name))
         .map(({ name, label }) => (
@@ -85,35 +84,33 @@ function FormFields(props: FormFieldsProps): JSX.Element {
                 name in placeholders ? placeholders[name] : '';
               const isURL = types[name] === 'url';
               return (
-                <Col key={key} xs={12}>
-                  <FormGroup>
-                    {type === 'hidden' ? null : (
-                      <ControlLabel htmlFor={key}>{label}</ControlLabel>
-                    )}
-                    <FormControl
-                      componentClass={type === 'textarea' ? type : 'input'}
-                      id={key}
-                      name={name}
-                      onChange={onChange}
-                      placeholder={placeholder}
-                      required={required.includes(name)}
-                      rows={4}
-                      type={type}
-                      value={value as string}
-                    />
-                    {nullOrWarning(
-                      value as string,
-                      !pristine && error,
-                      isURL,
-                      name
-                    )}
-                  </FormGroup>
-                </Col>
+                <FormGroup key={key} className='embedded'>
+                  {type === 'hidden' ? null : (
+                    <ControlLabel htmlFor={key}>{label}</ControlLabel>
+                  )}
+                  <FormControl
+                    componentClass={type === 'textarea' ? type : 'input'}
+                    id={key}
+                    name={name}
+                    onChange={onChange}
+                    placeholder={placeholder}
+                    required={required.includes(name)}
+                    rows={4}
+                    type={type}
+                    value={value as string}
+                  />
+                  {nullOrWarning(
+                    value as string,
+                    !pristine && error,
+                    isURL,
+                    name
+                  )}
+                </FormGroup>
               );
             }}
           </Field>
         ))}
-    </div>
+    </>
   );
 }
 

client/src/components/formHelpers/form.tsx

@@ -6,7 +6,6 @@ import {
   ValidatedValues,
   FormFields,
   BlockSaveButton,
-  BlockSaveWrapper,
   formatUrlValues
 } from '../formHelpers/index';
 
@@ -54,15 +53,13 @@ function DynamicForm({
           style={{ width: '100%' }}
         >
           <FormFields formFields={formFields} options={options} />
-          <BlockSaveWrapper>
-            {hideButton ? null : (
-              <BlockSaveButton
-                disabled={(pristine && !enableSubmit) || (error as boolean)}
-              >
-                {buttonText ? buttonText : null}
-              </BlockSaveButton>
-            )}
-          </BlockSaveWrapper>
+          {!hideButton && (
+            <BlockSaveButton
+              disabled={(pristine && !enableSubmit) || (error as boolean)}
+            >
+              {buttonText ? buttonText : null}
+            </BlockSaveButton>
+          )}
         </form>
       )}
     </Form>

client/src/components/layouts/global.css

@@ -491,13 +491,43 @@ fieldset[disabled] .btn-primary.focus {
   }
 }
 
-.button-group .btn:not(:last-child) {
+.button-group {
+  margin-bottom: -10px;
+}
+.button-group .btn {
   margin-bottom: 10px;
 }
 strong {
   color: var(--secondary-color);
 }
 
+.form-group.embedded {
+  border: 1px solid var(--tc-black-40);
+  padding: 8px 10px 2px;
+  border-radius: 4px;
+  position: relative;
+  max-width: 320px;
+}
+
+.form-group.embedded .control-label {
+  display: block;
+  font-size: 11px;
+  font-family: 'Roboto';
+  line-height: 10px;
+  color: var(--tc-turq-160);
+  margin-bottom: 4px;
+}
+
+.form-group.embedded .form-control {
+  border: 0 none;
+  padding: 0;
+  height: 22px;
+  font-size: 14px;
+  line-height: 22px;
+  font-family: 'Roboto';
+  color: var(--tc-black-100);
+}
+
 .form-control {
   color: var(--primary-color);
   outline: none;

client/src/components/layouts/learn.css

@@ -24,3 +24,7 @@
 #learn-app-wrapper .reflex-container.horizontal > .reflex-splitter {
   height: 5px;
 }
+
+#learn-app-wrapper .reflex-container > .reflex-element:first-child:last-child {
+  flex: 1 1 auto !important;
+}

client/src/components/layouts/prism.css

@@ -1,3 +1,9 @@
+pre[class*='language-'].line-numbers.line-numbers {
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 22px;
+}
+
 code .token.operator {
   background: none;
 }
@@ -7,6 +13,10 @@ pre[class*='language-'] {
   background: var(--primary-background);
 }
 
+.line-numbers > p {
+  color: var(--tc-black-100);
+}
+
 .default pre[class*='language-']::selection,
 .default pre[class*='language-'] ::selection,
 .default code[class*='language-']::selection,

client/src/components/layouts/variables.css

@@ -37,6 +37,8 @@
   --tc-link-blue-light: #5fb7ee;
   --tc-black: #000;
   --tc-black-100: #2a2a2a;
+  --tc-black-60: #7f7f7f;
+  --tc-black-40: #aaaaaa;
   --tc-black-20: #d4d4d4;
   --tc-black-10: #e9e9e9;
   --tc-black-5: #f4f4f4;

client/src/templates/Challenges/classic/action-row.tsx

@@ -8,6 +8,7 @@ import EditorTabs from './editor-tabs';
 interface ActionRowProps {
   block: string;
   hasNotes: boolean;
+  hasPreview: boolean;
   isMultifileCertProject: boolean;
   showInstructions: boolean;
   showConsole: boolean;
@@ -25,10 +26,10 @@ const mapDispatchToProps = {
 
 const ActionRow = ({
   hasNotes,
+  hasPreview,
   togglePane,
   showNotes,
   showPreview,
-  isMultifileCertProject,
   showInstructions,
   showConsole,
   superBlock,
@@ -44,17 +45,15 @@ const ActionRow = ({
         </div>
       )}
       <div className='tabs-row'>
-        {isMultifileCertProject && (
-          <button
-            aria-expanded={showInstructions ? 'true' : 'false'}
-            className={
-              showInstructions ? 'btn-tab-primary' : 'btn-tab-primary--outline'
-            }
-            onClick={() => togglePane('showInstructions')}
-          >
-            Instructions
-          </button>
-        )}
+        <button
+          aria-expanded={showInstructions ? 'true' : 'false'}
+          className={
+            showInstructions ? 'btn-tab-primary' : 'btn-tab-primary--outline'
+          }
+          onClick={() => togglePane('showInstructions')}
+        >
+          Instructions
+        </button>
         <EditorTabs />
         <button
           aria-expanded={showConsole ? 'true' : 'false'}
@@ -76,15 +75,17 @@ const ActionRow = ({
             {t('learn.editor-tabs.notes')}
           </button>
         )}
-        <button
-          aria-expanded={showPreview ? 'true' : 'false'}
-          className={
-            showPreview ? 'btn-tab-primary' : 'btn-tab-primary--outline'
-          }
-          onClick={() => togglePane('showPreview')}
-        >
-          {t('learn.editor-tabs.preview')}
-        </button>
+        {hasPreview && (
+          <button
+            aria-expanded={showPreview ? 'true' : 'false'}
+            className={
+              showPreview ? 'btn-tab-primary' : 'btn-tab-primary--outline'
+            }
+            onClick={() => togglePane('showPreview')}
+          >
+            {t('learn.editor-tabs.preview')}
+          </button>
+        )}
       </div>
     </div>
   );

client/src/templates/Challenges/classic/desktop-layout.tsx

@@ -34,6 +34,7 @@ interface DesktopLayoutProps {
   resizeProps: ResizeProps;
   superBlock: string;
   testOutput: ReactElement;
+  visibleEditors: { [key: string]: boolean };
 }
 
 const reflexProps = {
@@ -85,20 +86,20 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
     notes,
     preview,
     hasEditableBoundaries,
-    superBlock
+    superBlock,
+    visibleEditors
   } = props;
 
   const challengeFile = getChallengeFile();
   const projectBasedChallenge = hasEditableBoundaries;
   const isMultifileCertProject =
     challengeType === challengeTypes.multifileCertProject;
-  const displayPreview =
-    projectBasedChallenge || isMultifileCertProject
-      ? showPreview && hasPreview
-      : hasPreview;
+  const displayPreview = showPreview && hasPreview;
   const displayNotes = projectBasedChallenge ? showNotes && hasNotes : false;
-  const displayConsole =
-    projectBasedChallenge || isMultifileCertProject ? showConsole : true;
+  const displayConsole = showConsole;
+  const displayEditor = Object.entries(visibleEditors).some(
+    ([, visible]) => visible
+  );
   const {
     codePane,
     editorPane,
@@ -110,33 +111,32 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
 
   return (
     <div className='desktop-layout'>
-      {(projectBasedChallenge || isMultifileCertProject) && (
-        <ActionRow
-          block={block}
-          hasNotes={hasNotes}
-          isMultifileCertProject={isMultifileCertProject}
-          showConsole={showConsole}
-          showNotes={showNotes}
-          showInstructions={showInstructions}
-          showPreview={showPreview}
-          superBlock={superBlock}
-          showBreadcrumbs={false}
-          togglePane={togglePane}
-        />
-      )}
+      <ActionRow
+        block={block}
+        hasNotes={hasNotes}
+        isMultifileCertProject={isMultifileCertProject}
+        showConsole={showConsole}
+        showNotes={showNotes}
+        showInstructions={showInstructions}
+        hasPreview={hasPreview}
+        showPreview={showPreview}
+        superBlock={superBlock}
+        showBreadcrumbs={false}
+        togglePane={togglePane}
+      />
       <div className='editor-row'>
         <ReflexContainer orientation='vertical'>
           {!projectBasedChallenge && showInstructions && (
             <ReflexElement flex={instructionPane.flex} {...resizeProps}>
               {instructions}
             </ReflexElement>
           )}
-          {!projectBasedChallenge && (
+          {!projectBasedChallenge && displayEditor && (
             <ReflexSplitter propagate={true} {...resizeProps} />
           )}
 
-          <ReflexElement flex={editorPane.flex} {...resizeProps}>
-            {challengeFile && (
+          {challengeFile && displayEditor && (
+            <ReflexElement flex={editorPane.flex} {...resizeProps}>
               <ReflexContainer
                 key={challengeFile.fileKey}
                 orientation='horizontal'
@@ -157,8 +157,8 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
                   </ReflexElement>
                 )}
               </ReflexContainer>
-            )}
-          </ReflexElement>
+            </ReflexElement>
+          )}
 
           {(displayPreview || displayConsole) && (
             <ReflexSplitter propagate={true} {...resizeProps} />

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

@@ -573,7 +573,9 @@ const Editor = (props: EditorProps): JSX.Element => {
     attemptRef.current.attempts++;
   }
 
-  const tryToSubmitChallenge = debounce(props.submitChallenge, 2000);
+  const tryToSubmitChallenge = debounce(props.submitChallenge, 2000, {
+    leading: true
+  });
 
   function createLowerJaw(outputNode: HTMLElement, callback?: () => void) {
     const { output } = props;