Merge branch 'main' into feat/translations

LOCALIZATION_CONTRIBUTORS

@@ -34,6 +34,7 @@ German (DE)
 
 Thorsten Mühge | TMuehge
 Zina Efchary | zinaefchary
+Sasko Schirmer | c0nr3f
 
 Spanish (ES_UN)
 
@@ -80,6 +81,7 @@ Jaejun Ko | Rapo1756
 Eunmi Bae | likeyellow
 Chanyang Im | imchanyang
 Yuri Han | urihan
+Minje Kim | Quantum-Tiger-K
 
 Indonesian (ID)
 
@@ -113,3 +115,4 @@ Bin Liu | fjirsmliu
 Weixiao Sun | sunwx17
 Diksha Sharma | dikshasharma0795
 Samanvay Sharma | starktech23
+Saiprateek Dasgandhi | PSD-20

TRANSLATING.md

@@ -4,6 +4,10 @@ First of all, **thank you** for showing interest in translating (localizing) Qis
 
 **Please note that you must sign up separately if you want to join the localization project for [Qiskit Documentation](https://qiskit.org/documentation/). For signing up to join the Qiskit Documentation Localization project, please refer the steps outlined [here](https://github.com/qiskit-community/qiskit-translations/blob/master/README.md).**
 
+$$\color{#D22222}\textsf{\Large\⚠\kern{0.2cm}\Large No new joining requests will be accepted in GitLocalize.}$$
+
+$$\color{#D22222}\textsf{\qquad\kern{0.2cm}\Large This is due the upcoming changes on Qiskit Textbook.}$$
+
 If you are interested in contributing to translating the Qiskit Textbook, please follow the instructions below.</br>
 
 ## Steps to participate in Qiskit textbook translations:

converter/common.ts

@@ -3,6 +3,9 @@ import * as path from 'path'
 import * as fs from 'fs-extra'
 import { load as loadYAML } from 'js-yaml'
 
+// NOTE: if changing this also update the same variable in 'server/utilities.ts'
+const LATEST_TEXTBOOK_VERSION = 'v2'
+
 const CWD = process.cwd()
 
 // Get the languages to translate from the mathigon config file or throw an error
@@ -23,5 +26,6 @@ const workingTranslationsPath = path.join(CWD, 'working', 'translations')
 export {
   translationsLanguages,
   workingContentPath,
-  workingTranslationsPath
+  workingTranslationsPath,
+  LATEST_TEXTBOOK_VERSION
 }

converter/converter.ts

@@ -6,7 +6,8 @@ import * as fs from 'fs-extra'
 import {
   translationsLanguages,
   workingContentPath,
-  workingTranslationsPath
+  workingTranslationsPath,
+  LATEST_TEXTBOOK_VERSION
 } from './common'
 
 const CWD = process.cwd()
@@ -92,11 +93,17 @@ const prepare = function (language: string) {
   copyNotebookAssets(notebooks, working, (src: string, dest: string) => {
     return path.dirname(src).split(path.sep).indexOf(nbImagesDirName) > -1
   })
+  copyNotebookAssets(`${notebooks}${path.sep}${LATEST_TEXTBOOK_VERSION}`, working, (src: string, dest: string) => {
+    return path.dirname(src).split(path.sep).indexOf(nbImagesDirName) > -1
+  })
 
   // copy over notebook `resources/`
   copyNotebookAssets(notebooks, working, (src: string, dest: string) => {
     return path.dirname(src).split(path.sep).indexOf(nbResourcesDirName) > -1
   })
+  copyNotebookAssets(`${notebooks}${path.sep}${LATEST_TEXTBOOK_VERSION}`, working, (src: string, dest: string) => {
+    return path.dirname(src).split(path.sep).indexOf(nbResourcesDirName) > -1
+  })
 }
 
 const convert = function (language: string) {

converter/textbook-converter/requirements.txt

@@ -2,4 +2,4 @@ ipython>=6
 nbformat>=4
 nbconvert>=5
 requests
-pyyaml
+pyyaml==5.3.1

cypress/integration/sidebar.spec.js

@@ -7,19 +7,15 @@ describe('Sidebar', () => {
   it('can be toggled on a laptop', () => {
     cy.viewport('macbook-15')
     cy.visit('/course/ch-prerequisites')
-    cy.get(sidebarSelector).should('be.visible')
     cy.get(toggleSidebarSelector).click()
     cy.get(sidebarSelector).should('be.not.visible')
-    cy.get(toggleSidebarSelector).click()
-    cy.get(sidebarSelector).should('be.visible')
   })
 
   it('can be toggled on a tablet', () => {
     cy.viewport('ipad-2')
     cy.visit('/course/ch-prerequisites')
     cy.get(sidebarSelector).should('be.not.visible')
     cy.get(toggleSidebarSelector).click()
-    cy.get(sidebarSelector).should('be.visible')
     cy.get(toggleSidebarSelector).click()
     cy.get(sidebarSelector).should('be.not.visible')
   })

frontend/scss/components/textbook__page.scss

@@ -20,11 +20,14 @@ main.body {
 
 .c-textbook {
   display: flex;
-  max-height: 100%;
-  min-height: calc(100vh - $qiskit-navbar-height);
+  height: calc(100vh - $qiskit-navbar-height - $one-xp-banner-height-desktop);
   overflow: hidden;
   position: relative;
 
+  @include mq($until: large) {
+    height: calc(100vh - $qiskit-navbar-height - $one-xp-banner-height-mobile);
+  }
+
   @include mq($until: medium) {
     display: grid;
     grid-template-columns: 1fr 1fr;

frontend/scss/variables/settings.scss

@@ -7,6 +7,9 @@ $textbook-page-width: 100%;
 $qiskit-navbar-height: 3.5rem;
 $textbook-page-banner-height: 40px;
 
+$one-xp-banner-height-desktop: 3.25rem;
+$one-xp-banner-height-mobile: 5rem;
+
 $left-sidebar-width: 16rem;
 $left-sidebar-width-hidden: 3rem;
 $left-sidebar-width-sm: 3.5rem;
@@ -19,6 +22,6 @@ $spacing-unit-small: 12px;
 $spacing-unit: 24px;
 
 // Grid parameters.
-$column-size-large: 4rem;
+$column-size-large: 6rem;
 $column-size-medium: 5rem;
-$column-size-small: 5rem;
+$column-size-small: 4rem;

frontend/vue/components/CodeExercise/CodeExercise.vue

@@ -13,6 +13,7 @@
       <ExerciseActionsBar
         class="code-exercise__editor-block__actions-bar"
         :is-running="isKernelBusy"
+        :is-loading="isKernelLoading"
         :is-api-token-needed="isApiTokenNeeded"
         :run-enabled="isKernelReady"
         :grade-enabled="isKernelReady && isGradingExercise"
@@ -35,6 +36,7 @@
       @running="kernelRunning"
       @finished="kernelFinished"
       @kernelReady="kernelReady"
+      @kernelLoading="kernelLoading"
       @correctAnswer="gradeSuccess"
     />
     <div
@@ -111,6 +113,7 @@ export default defineComponent({
       initialCode: '',
       isKernelBusy: false,
       isKernelReady: false,
+      isKernelLoading: false,
       hideInitialOutput: false,
       isApiTokenNeeded: this.usesHardware,
       id: 0
@@ -183,12 +186,17 @@ export default defineComponent({
     kernelRunning () {
       this.isKernelBusy = true
       this.hideInitialOutput = true
+      this.isKernelLoading = false
     },
     kernelFinished () {
       this.isKernelBusy = false
     },
     kernelReady () {
       this.isKernelReady = true
+      this.isKernelLoading = false
+    },
+    kernelLoading () {
+      this.isKernelLoading = true
     }
   }
 })

frontend/vue/components/CodeExercise/CodeOutput.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="outputDiv" class="code-output">
     <div>
-      <div v-if="!kernel && !error" class="code-output__state-info">
+      <div v-if="kernelLoading && !error" class="code-output__state-info">
         <bx-loading class="code-output__state-info__icon" assistive-text="Connecting to the server" type="small" />
         {{ $translate('Connecting to the server') }}
       </div>
@@ -45,6 +45,7 @@ export default defineComponent({
   },
   data () {
     return {
+      kernelLoading: false,
       kernelPromise: undefined as Promise<IKernelConnection> | undefined,
       kernel: undefined as IKernelConnection | undefined,
       outputArea: undefined as OutputArea | undefined,
@@ -53,19 +54,6 @@ export default defineComponent({
     }
   },
   mounted () {
-    this.$emit('loadingKernel')
-    const outputDivRef = (this.$refs.outputDiv as HTMLDivElement)
-
-    this.kernelPromise = requestBinderKernel()
-
-    this.kernelPromise.then((kernel: IKernelConnection) => {
-      this.kernel = kernel
-      this.$emit('kernelReady')
-      this.outputArea = createOutputArea(outputDivRef)
-    }, (error: Error) => {
-      this.error = error.message
-    })
-
     this.apiTokenPromise = getQiskitUser().then(user => user?.apiToken)
   },
   methods: {
@@ -103,9 +91,9 @@ export default defineComponent({
     },
     _executeCode (code: string) {
       this.error = ''
-      this.outputArea!.setHidden(true)
-      this.kernelPromise!.then((kernel: IKernelConnection) => {
+      this._initKernel()!.then((kernel: IKernelConnection) => {
         this.$emit('running')
+        this.outputArea!.setHidden(true)
         try {
           const requestFuture = kernel.requestExecute({ code })
           this.setOutputFuture(requestFuture)
@@ -128,6 +116,26 @@ export default defineComponent({
         }
       })
     },
+    _initKernel (): Promise<IKernelConnection> {
+      if (this.kernelPromise) {
+        return this.kernelPromise
+      }
+
+      this.$emit('kernelLoading')
+      this.kernelLoading = true
+      const outputDivRef = (this.$refs.outputDiv as HTMLDivElement)
+
+      this.kernelPromise = requestBinderKernel()
+
+      return this.kernelPromise.then((kernel: IKernelConnection) => {
+        this.kernelLoading = false
+        this.$emit('kernelReady')
+        this.outputArea = createOutputArea(outputDivRef)
+        return kernel
+      }, (error: Error) => {
+        this.error = error.message
+      }) as Promise<IKernelConnection>
+    },
     setOutputFuture (future : IOutputShellFuture) {
       this.outputArea!.future = future
     },

frontend/vue/components/CodeExercise/ExerciseActionsBar.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="exercise-actions-bar">
+    <button
+      v-if="!runEnabled && !isRunning && !isApiTokenNeeded"
+      class="exercise-actions-bar__button exercise-actions-bar__button_kernel"
+      @click="run(isApiTokenNeeded)"
+      :class="{'exercise-actions-bar__button exercise-actions-bar__button_disabled': isLoading}"
+      :disabled="isLoading"
+    >
+      {{ $translate('Start kernel and run') }}
+    </button>
     <button
       v-if="runEnabled && !isRunning && !isApiTokenNeeded"
       class="exercise-actions-bar__button exercise-actions-bar__button_run"
@@ -32,6 +41,11 @@ import 'carbon-web-components/es/components/loading/loading'
 export default defineComponent({
   name: 'ExerciseActionsBar',
   props: {
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     isRunning: {
       type: Boolean,
       required: false,
@@ -91,7 +105,7 @@ export default defineComponent({
 
   &__button {
     padding: $spacing-03;
-    width: $column-size-large;
+    width: $column-size-small;
     max-width: 100%;
 
     background-size: 200% 100%;
@@ -113,9 +127,14 @@ export default defineComponent({
       cursor: not-allowed;
     }
 
-    &_run {
+    &_run,
+    &_kernel {
       @include bicolor-background($button-background-color-quaternary-dark, $button-background-color-quaternary);
     }
+
+    &_kernel {
+      width: 2 * $column-size-medium;
+    }
   }
 
   &__indicator {