From e84b2dff7f1c8a04ace93900c3b197875ab34c2c Mon Sep 17 00:00:00 2001
From: Alex Velez <alanvele@espol.edu.ec>
Date: Sun, 29 Jan 2023 05:02:09 -0500
Subject: [PATCH 1/7] Migrate KEmptyPlaceholder to use KOptionalText

---
 kolibri/core/assets/src/views/ElapsedTime.vue            | 7 +++----
 kolibri/core/assets/src/views/TimeDuration.vue           | 5 +++--
 kolibri/core/assets/src/views/UserTable/index.vue        | 7 +++----
 .../src/views/userAccounts/BirthYearDisplayText.vue      | 8 ++++----
 .../assets/src/views/userAccounts/GenderDisplayText.vue  | 8 ++++----
 .../coach/assets/src/views/common/LessonStatus.vue       | 9 +++++----
 .../epub_viewer/assets/src/views/SearchSideBar.vue       | 1 -
 .../facility/assets/src/views/ManageClassPage/index.vue  | 7 +++----
 8 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/kolibri/core/assets/src/views/ElapsedTime.vue b/kolibri/core/assets/src/views/ElapsedTime.vue
index 1809d81351f..2aa63446af8 100644
--- a/kolibri/core/assets/src/views/ElapsedTime.vue
+++ b/kolibri/core/assets/src/views/ElapsedTime.vue
@@ -1,9 +1,8 @@
 <template>
 
-  <span v-if="date">
-    {{ $formatRelative(ceilingDate, { now: now }) }}
-  </span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="date ? $formatRelative(ceilingDate, { now: now }) : ''"
+  />
 
 </template>
 
diff --git a/kolibri/core/assets/src/views/TimeDuration.vue b/kolibri/core/assets/src/views/TimeDuration.vue
index dd5e4249dc9..bf11b7fdf73 100644
--- a/kolibri/core/assets/src/views/TimeDuration.vue
+++ b/kolibri/core/assets/src/views/TimeDuration.vue
@@ -1,7 +1,8 @@
 <template>
 
-  <span v-if="seconds">{{ formattedTime }}</span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="seconds ? formattedTime : ''"
+  />
 
 </template>
 
diff --git a/kolibri/core/assets/src/views/UserTable/index.vue b/kolibri/core/assets/src/views/UserTable/index.vue
index 50946859021..e338517f406 100644
--- a/kolibri/core/assets/src/views/UserTable/index.vue
+++ b/kolibri/core/assets/src/views/UserTable/index.vue
@@ -165,10 +165,9 @@
             </td>
             <template v-if="showDemographicInfo">
               <td class="id-col">
-                <span v-if="user.id_number">
-                  {{ user.id_number }}
-                </span>
-                <KEmptyPlaceholder v-else />
+                <KOptionalText
+                  :text="user.id_number ? user.id_number : ''"
+                />
               </td>
               <td>
                 <GenderDisplayText :gender="user.gender" />
diff --git a/kolibri/core/assets/src/views/userAccounts/BirthYearDisplayText.vue b/kolibri/core/assets/src/views/userAccounts/BirthYearDisplayText.vue
index 90cadb016cc..f362f58d80a 100644
--- a/kolibri/core/assets/src/views/userAccounts/BirthYearDisplayText.vue
+++ b/kolibri/core/assets/src/views/userAccounts/BirthYearDisplayText.vue
@@ -1,9 +1,9 @@
 <template>
 
-  <span v-if="isSpecified && birthYear">
-    {{ $formatDate(birthYear, { year: 'numeric' }) }}
-  </span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="
+      (isSpecified && birthYear) ? $formatDate(birthYear, { year: 'numeric' }) : ''"
+  />
 
 </template>
 
diff --git a/kolibri/core/assets/src/views/userAccounts/GenderDisplayText.vue b/kolibri/core/assets/src/views/userAccounts/GenderDisplayText.vue
index 94089e83adf..3a6280f034b 100644
--- a/kolibri/core/assets/src/views/userAccounts/GenderDisplayText.vue
+++ b/kolibri/core/assets/src/views/userAccounts/GenderDisplayText.vue
@@ -1,9 +1,9 @@
 <template>
 
-  <span v-if="isSpecified && displayText">
-    {{ displayText }}
-  </span>
-  <KEmptyPlaceholder v-else />
+  <KOptionalText
+    :text="
+      (isSpecified && displayText) ? displayText : ''"
+  />
 
 </template>
 
diff --git a/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue b/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue
index b9a1d08def1..cc46cbccc88 100644
--- a/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue
@@ -49,10 +49,11 @@
           {{ coachString('descriptionLabel') }}
         </KGridItem>
         <KGridItem :layout12="layout12Value">
-          <template v-if="lesson.description">
-            {{ lesson.description }}
-          </template>
-          <KEmptyPlaceholder v-else />
+          <KOptionalText>
+            <template v-if="lesson.description">
+              {{ lesson.description }}
+            </template>
+          </KOptionalText>
         </KGridItem>
       </div>
     </KGrid>
diff --git a/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue b/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue
index 53a1325d1fc..5cafccc8dd2 100644
--- a/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue
+++ b/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue
@@ -24,7 +24,6 @@
         />
       </div>
     </form>
-
     <transition mode="out-in">
       <p
         v-if="!searchHasBeenMade"
diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
index 8d727464c27..ab36140000e 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
@@ -62,10 +62,9 @@
               </td>
               <td>
                 <span :ref="`coachNames${classroom.id}`">
-                  <template v-if="coachNames(classroom).length">
-                    {{ formattedCoachNames(classroom) }}
-                  </template>
-                  <KEmptyPlaceholder v-else />
+                  <KOptionalText
+                    :text="coachNames(classroom).length ? formattedCoachNames(classroom) : ''"
+                  />
                 </span>
                 <KTooltip
                   v-if="formattedCoachNamesTooltip(classroom)"

From d6ab8faca2a61e6cc2633ace51e6322c75ce88bb Mon Sep 17 00:00:00 2001
From: Alex Velez <alanvele@espol.edu.ec>
Date: Sun, 5 Feb 2023 12:15:04 -0500
Subject: [PATCH 2/7] Update snapshot tests

---
 kolibri/core/package.json                     |  2 +-
 .../ReportsLearnersTable.spec.js.snap         | 16 +++++++++------
 ...LessonResourceLearnerListPage.spec.js.snap | 20 ++++++++++++++-----
 yarn.lock                                     | 15 ++++++++++++++
 4 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 2b3e15489fb..00821f96ebd 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -20,7 +20,7 @@
     "intl": "^1.2.4",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.1.42",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8",
+    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system#d0ec826d6dfee3be9805fd48ecb2d707df7999cf",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
diff --git a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLearnersTable.spec.js.snap b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLearnersTable.spec.js.snap
index 30cefaa0896..8d5642c84ff 100644
--- a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLearnersTable.spec.js.snap
+++ b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLearnersTable.spec.js.snap
@@ -31,11 +31,13 @@ exports[`ReportsLearnersTable doesn't render groups information when show groups
         </td>
         <!---->
         <!---->
-        <td><span>92 seconds</span></td>
+        <td><span>
+    92 seconds
+  </span></td>
         <!---->
         <td><span>
-  yesterday
-</span></td>
+    yesterday
+  </span></td>
       </tr>
       <tr>
         <td><span class="labeled-icon-wrapper"><span class="icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="" style="fill: #212121; top: 2px;"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg></span> <span class="label" style="margin-left: 1.975em; max-width: calc(100% - 1.975em);"><span dir="auto" class="debug-warning"><a dir="auto" class="KRouterLink-noKey-0_1jjc9c8 link"><!----> <span class="link-text">learner2</span>
@@ -49,11 +51,13 @@ exports[`ReportsLearnersTable doesn't render groups information when show groups
         </td>
         <!---->
         <!---->
-        <td><span>17 seconds</span></td>
+        <td><span>
+    17 seconds
+  </span></td>
         <!---->
         <td><span>
-  3 hours ago
-</span></td>
+    3 hours ago
+  </span></td>
       </tr>
     </transition-group-stub>
   </table>
diff --git a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap
index 367195861cd..e1bb74c170a 100644
--- a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap
+++ b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap
@@ -18,7 +18,9 @@ exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some gr
     <th>
       Average time spent
     </th>
-    <td><span>2 minutes</span></td>
+    <td><span>
+    2 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -62,7 +64,9 @@ exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some gr
     <th>
       Average time spent
     </th>
-    <td><span>2 minutes</span></td>
+    <td><span>
+    2 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -92,7 +96,9 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di
     <th>
       Average time spent
     </th>
-    <td><span>3 minutes</span></td>
+    <td><span>
+    3 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -157,7 +163,9 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di
     <th>
       Average time spent
     </th>
-    <td><span>3 minutes</span></td>
+    <td><span>
+    3 minutes
+  </span></td>
   </tr>
 </table>
 `;
@@ -170,7 +178,9 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di
     <th>
       Average time spent
     </th>
-    <td><span>2 minutes</span></td>
+    <td><span>
+    2 minutes
+  </span></td>
   </tr>
 </table>
 `;
diff --git a/yarn.lock b/yarn.lock
index 794fb492c5a..c7f199aff52 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7390,6 +7390,21 @@ kolibri-constants@0.1.42:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.1.42.tgz#2f62a8d8b8894e5cfbd47ee6564b31018818c93f"
   integrity sha512-2hUxYnzUEfhLFJO9egVSwYW8/PKob9wLeDYfB74mtIzgQ4zy6huRj3574WetK9gREi+W1Jcm7HGPsfZIFzFvrA==
 
+"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system#d0ec826d6dfee3be9805fd48ecb2d707df7999cf":
+  version "1.3.0"
+  resolved "https://github.com/AlexVelezLl/kolibri-design-system#d0ec826d6dfee3be9805fd48ecb2d707df7999cf"
+  dependencies:
+    aphrodite "https://github.com/learningequality/aphrodite/"
+    autosize "^3.0.21"
+    css-element-queries "^1.2.0"
+    frame-throttle "^3.0.0"
+    fuzzysearch "^1.0.3"
+    keen-ui "^1.3.0"
+    lodash "^4.17.15"
+    popper.js "^1.14.6"
+    purecss "^0.6.2"
+    tippy.js "^4.2.1"
+
 "kolibri-design-system@https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8":
   version "1.3.0"
   resolved "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8"

From 81851692d9b773f03ebb29d1d62773fc3f07a7d5 Mon Sep 17 00:00:00 2001
From: Alex Velez <alanvele@espol.edu.ec>
Date: Sun, 5 Feb 2023 13:17:06 -0500
Subject: [PATCH 3/7] Pointing to add-koptionaltext KDS branch

---
 kolibri/core/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 00821f96ebd..d1218628b99 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -20,7 +20,7 @@
     "intl": "^1.2.4",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.1.42",
-    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system#d0ec826d6dfee3be9805fd48ecb2d707df7999cf",
+    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system#add-koptionaltext",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",

From fc47f47c524237b4c9b8685414b52448d6f4f858 Mon Sep 17 00:00:00 2001
From: Alex Velez <alanvele@espol.edu.ec>
Date: Tue, 14 Feb 2023 23:36:38 -0500
Subject: [PATCH 4/7] Reset KDS reference

---
 kolibri/core/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index d1218628b99..4e9be1b55db 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -20,7 +20,7 @@
     "intl": "^1.2.4",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.1.42",
-    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system#add-koptionaltext",
+    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",

From a2355b65376ddf26f980f8a4afc35c1a13e58e5c Mon Sep 17 00:00:00 2001
From: Alex Velez <alanvele@espol.edu.ec>
Date: Mon, 27 Feb 2023 08:20:35 -0500
Subject: [PATCH 5/7] Updating KDS reference

---
 kolibri/core/package.json | 2 +-
 yarn.lock                 | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 4e9be1b55db..e5158e47dd2 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -20,7 +20,7 @@
     "intl": "^1.2.4",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.1.42",
-    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system",
+    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
diff --git a/yarn.lock b/yarn.lock
index c7f199aff52..6a9b2237bd5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7390,9 +7390,9 @@ kolibri-constants@0.1.42:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.1.42.tgz#2f62a8d8b8894e5cfbd47ee6564b31018818c93f"
   integrity sha512-2hUxYnzUEfhLFJO9egVSwYW8/PKob9wLeDYfB74mtIzgQ4zy6huRj3574WetK9gREi+W1Jcm7HGPsfZIFzFvrA==
 
-"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system#d0ec826d6dfee3be9805fd48ecb2d707df7999cf":
+"kolibri-design-system@https://github.com/learningequality/kolibri-design-system":
   version "1.3.0"
-  resolved "https://github.com/AlexVelezLl/kolibri-design-system#d0ec826d6dfee3be9805fd48ecb2d707df7999cf"
+  resolved "https://github.com/learningequality/kolibri-design-system#6bae8277e0dd61d88122a1a85b63bc79a65be22e"
   dependencies:
     aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "^3.0.21"

From e2096a9d15a4400cb52812b8478d64a9f413a3e5 Mon Sep 17 00:00:00 2001
From: Alex Velez <alanvele@espol.edu.ec>
Date: Mon, 27 Feb 2023 08:26:15 -0500
Subject: [PATCH 6/7] Update KDS commit reference

---
 kolibri/core/package.json | 2 +-
 yarn.lock                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index e5158e47dd2..353d5a59966 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -20,7 +20,7 @@
     "intl": "^1.2.4",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.1.42",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system",
+    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#6bae8277e0dd61d88122a1a85b63bc79a65be22e",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
diff --git a/yarn.lock b/yarn.lock
index 6a9b2237bd5..047e988f924 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7390,7 +7390,7 @@ kolibri-constants@0.1.42:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.1.42.tgz#2f62a8d8b8894e5cfbd47ee6564b31018818c93f"
   integrity sha512-2hUxYnzUEfhLFJO9egVSwYW8/PKob9wLeDYfB74mtIzgQ4zy6huRj3574WetK9gREi+W1Jcm7HGPsfZIFzFvrA==
 
-"kolibri-design-system@https://github.com/learningequality/kolibri-design-system":
+"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#6bae8277e0dd61d88122a1a85b63bc79a65be22e":
   version "1.3.0"
   resolved "https://github.com/learningequality/kolibri-design-system#6bae8277e0dd61d88122a1a85b63bc79a65be22e"
   dependencies:

From 15a103f8b80b3dc4a563bf4f774d8a646b24efff Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Mon, 27 Feb 2023 16:07:37 -0800
Subject: [PATCH 7/7] Propagate KDS update to all packages.

---
 packages/kolibri-core-for-export/package.json |  2 +-
 yarn.lock                                     | 15 ---------------
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index 95673921c52..d7acf693c3d 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -23,7 +23,7 @@
     "intl": "^1.2.4",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.1.42",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8",
+    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#6bae8277e0dd61d88122a1a85b63bc79a65be22e",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
diff --git a/yarn.lock b/yarn.lock
index 047e988f924..ecdd72b0836 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7405,21 +7405,6 @@ kolibri-constants@0.1.42:
     purecss "^0.6.2"
     tippy.js "^4.2.1"
 
-"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8":
-  version "1.3.0"
-  resolved "https://github.com/learningequality/kolibri-design-system#e203de2141dd9c8e807a1285a9d695a083576fc8"
-  dependencies:
-    aphrodite "https://github.com/learningequality/aphrodite/"
-    autosize "^3.0.21"
-    css-element-queries "^1.2.0"
-    frame-throttle "^3.0.0"
-    fuzzysearch "^1.0.3"
-    keen-ui "^1.3.0"
-    lodash "^4.17.15"
-    popper.js "^1.14.6"
-    purecss "^0.6.2"
-    tippy.js "^4.2.1"
-
 launch-editor-middleware@^2.5.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/launch-editor-middleware/-/launch-editor-middleware-2.6.0.tgz#2ba4fe4b695d7fe3d44dee86b6d46d57b8332dfd"