Add descriptions to poker games, retros and storyboards pages

Also add no entities found messaging when the list returns a count of 0

ui/src/i18n/de/index.ts

@@ -625,6 +625,15 @@ const de: Translation = {
   retroPhaseTimeLimitMinLabel: 'Brainstorm Phase time limit in minutes',
   phaseAutoAdvanceLabel: 'Automatically advance phases',
   removeOnlyFacilitatorError: "Can't remove the only facilitator",
+  noGamesFound: 'No games found, try creating one.',
+  noRetrosFound: 'No retros found, try creating one.',
+  noStoryboardsFound: 'No storyboards found, try creating one.',
+  retroDescription:
+    'A sprint retrospective is a review conducted after a sprint that plays a key role in the Agile methodology. A sprint retrospective aims to determine what went well and where you had problems and identify areas where you can improve.',
+  pokerDescription:
+    'Scrum poker, also known as “planning poker” and “pointing poker”, is a gamified technique that development teams use to guess the effort of project management tasks. These estimations are based on the entire group’s input and consensus, making them more engaging and accurate than other methods.',
+  storyboardDescription:
+    'User story mapping (storyboard) is a visualization of the journey a customer takes with a product, from beginning to end. It includes all the tasks they’d typically complete as part of that journey.',
 };
 
 export default de;

ui/src/i18n/en/index.ts

@@ -587,6 +587,15 @@ const en: BaseTranslation = {
   retroPhaseTimeLimitMinLabel: 'Brainstorm Phase time limit in minutes',
   phaseAutoAdvanceLabel: 'Automatically advance phases',
   removeOnlyFacilitatorError: "Can't remove the only facilitator",
+  noGamesFound: 'No games found, try creating one.',
+  noRetrosFound: 'No retros found, try creating one.',
+  noStoryboardsFound: 'No storyboards found, try creating one.',
+  retroDescription:
+    'A sprint retrospective is a review conducted after a sprint that plays a key role in the Agile methodology. A sprint retrospective aims to determine what went well and where you had problems and identify areas where you can improve.',
+  pokerDescription:
+    'Scrum poker, also known as “planning poker” and “pointing poker”, is a gamified technique that development teams use to guess the effort of project management tasks. These estimations are based on the entire group’s input and consensus, making them more engaging and accurate than other methods.',
+  storyboardDescription:
+    'User story mapping (storyboard) is a visualization of the journey a customer takes with a product, from beginning to end. It includes all the tasks they’d typically complete as part of that journey.',
 };
 
 export default en;

ui/src/i18n/es/index.ts

@@ -587,6 +587,15 @@ const es: Translation = {
   retroPhaseTimeLimitMinLabel: 'Brainstorm Phase time limit in minutes',
   phaseAutoAdvanceLabel: 'Automatically advance phases',
   removeOnlyFacilitatorError: "Can't remove the only facilitator",
+  noGamesFound: 'No games found, try creating one.',
+  noRetrosFound: 'No retros found, try creating one.',
+  noStoryboardsFound: 'No storyboards found, try creating one.',
+  retroDescription:
+    'A sprint retrospective is a review conducted after a sprint that plays a key role in the Agile methodology. A sprint retrospective aims to determine what went well and where you had problems and identify areas where you can improve.',
+  pokerDescription:
+    'Scrum poker, also known as “planning poker” and “pointing poker”, is a gamified technique that development teams use to guess the effort of project management tasks. These estimations are based on the entire group’s input and consensus, making them more engaging and accurate than other methods.',
+  storyboardDescription:
+    'User story mapping (storyboard) is a visualization of the journey a customer takes with a product, from beginning to end. It includes all the tasks they’d typically complete as part of that journey.',
 };
 
 export default es;

ui/src/i18n/fa/index.ts

@@ -587,6 +587,15 @@ const fa: Translation = {
   retroPhaseTimeLimitMinLabel: 'Brainstorm Phase time limit in minutes',
   phaseAutoAdvanceLabel: 'Automatically advance phases',
   removeOnlyFacilitatorError: "Can't remove the only facilitator",
+  noGamesFound: 'No games found, try creating one.',
+  noRetrosFound: 'No retros found, try creating one.',
+  noStoryboardsFound: 'No storyboards found, try creating one.',
+  retroDescription:
+    'A sprint retrospective is a review conducted after a sprint that plays a key role in the Agile methodology. A sprint retrospective aims to determine what went well and where you had problems and identify areas where you can improve.',
+  pokerDescription:
+    'Scrum poker, also known as “planning poker” and “pointing poker”, is a gamified technique that development teams use to guess the effort of project management tasks. These estimations are based on the entire group’s input and consensus, making them more engaging and accurate than other methods.',
+  storyboardDescription:
+    'User story mapping (storyboard) is a visualization of the journey a customer takes with a product, from beginning to end. It includes all the tasks they’d typically complete as part of that journey.',
 };
 
 export default fa;

ui/src/i18n/fr/index.ts

@@ -595,6 +595,15 @@ const fr: Translation = {
   retroPhaseTimeLimitMinLabel: 'Brainstorm Phase time limit in minutes',
   phaseAutoAdvanceLabel: 'Automatically advance phases',
   removeOnlyFacilitatorError: "Can't remove the only facilitator",
+  noGamesFound: 'No games found, try creating one.',
+  noRetrosFound: 'No retros found, try creating one.',
+  noStoryboardsFound: 'No storyboards found, try creating one.',
+  retroDescription:
+    'A sprint retrospective is a review conducted after a sprint that plays a key role in the Agile methodology. A sprint retrospective aims to determine what went well and where you had problems and identify areas where you can improve.',
+  pokerDescription:
+    'Scrum poker, also known as “planning poker” and “pointing poker”, is a gamified technique that development teams use to guess the effort of project management tasks. These estimations are based on the entire group’s input and consensus, making them more engaging and accurate than other methods.',
+  storyboardDescription:
+    'User story mapping (storyboard) is a visualization of the journey a customer takes with a product, from beginning to end. It includes all the tasks they’d typically complete as part of that journey.',
 };
 
 export default fr;

ui/src/i18n/it/index.ts

@@ -615,6 +615,15 @@ const it: Translation = {
   retroPhaseTimeLimitMinLabel: 'Brainstorm Phase time limit in minutes',
   phaseAutoAdvanceLabel: 'Automatically advance phases',
   removeOnlyFacilitatorError: "Can't remove the only facilitator",
+  noGamesFound: 'No games found, try creating one.',
+  noRetrosFound: 'No retros found, try creating one.',
+  noStoryboardsFound: 'No storyboards found, try creating one.',
+  retroDescription:
+    'A sprint retrospective is a review conducted after a sprint that plays a key role in the Agile methodology. A sprint retrospective aims to determine what went well and where you had problems and identify areas where you can improve.',
+  pokerDescription:
+    'Scrum poker, also known as “planning poker” and “pointing poker”, is a gamified technique that development teams use to guess the effort of project management tasks. These estimations are based on the entire group’s input and consensus, making them more engaging and accurate than other methods.',
+  storyboardDescription:
+    'User story mapping (storyboard) is a visualization of the journey a customer takes with a product, from beginning to end. It includes all the tasks they’d typically complete as part of that journey.',
 };
 
 export default it;

ui/src/i18n/pt/index.ts

@@ -603,6 +603,15 @@ const pt: Translation = {
   retroPhaseTimeLimitMinLabel: 'Brainstorm Phase time limit in minutes',
   phaseAutoAdvanceLabel: 'Automatically advance phases',
   removeOnlyFacilitatorError: "Can't remove the only facilitator",
+  noGamesFound: 'No games found, try creating one.',
+  noRetrosFound: 'No retros found, try creating one.',
+  noStoryboardsFound: 'No storyboards found, try creating one.',
+  retroDescription:
+    'A sprint retrospective is a review conducted after a sprint that plays a key role in the Agile methodology. A sprint retrospective aims to determine what went well and where you had problems and identify areas where you can improve.',
+  pokerDescription:
+    'Scrum poker, also known as “planning poker” and “pointing poker”, is a gamified technique that development teams use to guess the effort of project management tasks. These estimations are based on the entire group’s input and consensus, making them more engaging and accurate than other methods.',
+  storyboardDescription:
+    'User story mapping (storyboard) is a visualization of the journey a customer takes with a product, from beginning to end. It includes all the tasks they’d typically complete as part of that journey.',
 };
 
 export default pt;

ui/src/i18n/ru/index.ts

@@ -586,6 +586,15 @@ const ru: Translation = {
   retroPhaseTimeLimitMinLabel: 'Brainstorm Phase time limit in minutes',
   phaseAutoAdvanceLabel: 'Automatically advance phases',
   removeOnlyFacilitatorError: "Can't remove the only facilitator",
+  noGamesFound: 'No games found, try creating one.',
+  noRetrosFound: 'No retros found, try creating one.',
+  noStoryboardsFound: 'No storyboards found, try creating one.',
+  retroDescription:
+    'A sprint retrospective is a review conducted after a sprint that plays a key role in the Agile methodology. A sprint retrospective aims to determine what went well and where you had problems and identify areas where you can improve.',
+  pokerDescription:
+    'Scrum poker, also known as “planning poker” and “pointing poker”, is a gamified technique that development teams use to guess the effort of project management tasks. These estimations are based on the entire group’s input and consensus, making them more engaging and accurate than other methods.',
+  storyboardDescription:
+    'User story mapping (storyboard) is a visualization of the journey a customer takes with a product, from beginning to end. It includes all the tasks they’d typically complete as part of that journey.',
 };
 
 export default ru;

ui/src/pages/poker/PokerGames.svelte

@@ -18,6 +18,7 @@
   let battleCount = 0;
   let battlesPage = 1;
   let battles = [];
+  let loading = true;
 
   function getBattles() {
     const battlesOffset = (battlesPage - 1) * battlesPageLimit;
@@ -29,8 +30,10 @@
       .then(function (result) {
         battles = result.data;
         battleCount = result.meta.count;
+        loading = false;
       })
       .catch(function () {
+        loading = false;
         notifications.danger($LL.myBattlesError());
         eventTag('fetch_battles', 'engagement', 'failure');
       });
@@ -63,18 +66,26 @@
 
   <div class="flex flex-wrap">
     <div class="mb-4 md:mb-6 w-full md:w-1/2 lg:w-3/5 md:pe-4">
-      <BoxList
-        items="{battles}"
-        itemType="battle"
-        pageRoute="{appRoutes.game}"
-        joinBtnText="{$LL.battleJoin()}"
-        showOwner="{false}"
-        showOwnerName="{true}"
-        ownerNameField="teamName"
-        showFacilitatorIcon="{true}"
-        facilitatorsKey="leaders"
-        showCompletedStories="{true}"
-      />
+      {#if battleCount > 0}
+        <BoxList
+          items="{battles}"
+          itemType="battle"
+          pageRoute="{appRoutes.game}"
+          joinBtnText="{$LL.battleJoin()}"
+          showOwner="{false}"
+          showOwnerName="{true}"
+          ownerNameField="teamName"
+          showFacilitatorIcon="{true}"
+          facilitatorsKey="leaders"
+          showCompletedStories="{true}"
+        />
+      {:else if loading === false}
+        <div
+          class="w-full my-10 text-lg md:text-xl dark:text-white text-center"
+        >
+          {$LL.noGamesFound()}
+        </div>
+      {/if}
       {#if battleCount > battlesPageLimit}
         <div class="mt-6 pt-1 flex justify-center">
           <Pagination
@@ -105,4 +116,8 @@
       </div>
     </div>
   </div>
+
+  <div class="w-full text-gray-600 dark:text-gray-300">
+    <p class="py-8 md:text-lg italic">{$LL.pokerDescription()}</p>
+  </div>
 </PageLayout>

ui/src/pages/retro/Retros.svelte

@@ -18,6 +18,7 @@
   const retrosPageLimit = 10;
   let retroCount = 0;
   let retrosPage = 1;
+  let loading = true;
 
   function getRetros() {
     const retrosOffset = (retrosPage - 1) * retrosPageLimit;
@@ -29,10 +30,12 @@
       .then(function (result) {
         retros = result.data;
         retroCount = result.meta.count;
+        loading = false;
       })
       .catch(function () {
         notifications.danger($LL.getRetrosErrorMessage());
         eventTag('fetch_retros', 'engagement', 'failure');
+        loading = false;
       });
   }
 
@@ -62,15 +65,23 @@
 
   <div class="flex flex-wrap">
     <div class="mb-4 md:mb-6 w-full md:w-1/2 lg:w-3/5 md:pe-4">
-      <BoxList
-        items="{retros}"
-        itemType="retro"
-        pageRoute="{appRoutes.retro}"
-        ownerField="ownerId"
-        showOwnerName="{true}"
-        ownerNameField="teamName"
-        joinBtnText="{$LL.joinRetro()}"
-      />
+      {#if retroCount > 0}
+        <BoxList
+          items="{retros}"
+          itemType="retro"
+          pageRoute="{appRoutes.retro}"
+          ownerField="ownerId"
+          showOwnerName="{true}"
+          ownerNameField="teamName"
+          joinBtnText="{$LL.joinRetro()}"
+        />
+      {:else if loading === false}
+        <div
+          class="w-full my-10 text-lg md:text-xl dark:text-white text-center"
+        >
+          {$LL.noRetrosFound()}
+        </div>
+      {/if}
       {#if retroCount > retrosPageLimit}
         <div class="mt-6 pt-1 flex justify-center">
           <Pagination
@@ -101,4 +112,8 @@
       </div>
     </div>
   </div>
+
+  <div class="w-full text-gray-600 dark:text-gray-300">
+    <p class="py-8 md:text-lg italic">{$LL.retroDescription()}</p>
+  </div>
 </PageLayout>

ui/src/pages/storyboard/Storyboards.svelte

@@ -18,6 +18,7 @@
   const storyboardsPageLimit = 10;
   let storyboardCount = 0;
   let storyboardsPage = 1;
+  let loading = true;
 
   function getStoryboards() {
     const retrosOffset = (storyboardsPage - 1) * storyboardsPageLimit;
@@ -29,10 +30,12 @@
       .then(function (result) {
         storyboards = result.data;
         storyboardCount = result.meta.count;
+        loading = false;
       })
       .catch(function (error) {
         notifications.danger($LL.getStoryboardsErrorMessage());
         eventTag('fetch_storyboards', 'engagement', 'failure');
+        loading = false;
       });
   }
 
@@ -62,14 +65,22 @@
 
   <div class="flex flex-wrap">
     <div class="mb-4 md:mb-6 w-full md:w-1/2 lg:w-3/5 md:pe-4">
-      <BoxList
-        items="{storyboards}"
-        itemType="storyboard"
-        showOwnerName="{true}"
-        ownerNameField="teamName"
-        pageRoute="{appRoutes.storyboard}"
-        joinBtnText="{$LL.joinStoryboard()}"
-      />
+      {#if storyboardCount > 0}
+        <BoxList
+          items="{storyboards}"
+          itemType="storyboard"
+          showOwnerName="{true}"
+          ownerNameField="teamName"
+          pageRoute="{appRoutes.storyboard}"
+          joinBtnText="{$LL.joinStoryboard()}"
+        />
+      {:else if loading === false}
+        <div
+          class="w-full my-10 text-lg md:text-xl dark:text-white text-center"
+        >
+          {$LL.noStoryboardsFound()}
+        </div>
+      {/if}
       {#if storyboardCount > storyboardsPageLimit}
         <div class="mt-6 pt-1 flex justify-center">
           <Pagination
@@ -100,4 +111,8 @@
       </div>
     </div>
   </div>
+
+  <div class="w-full text-gray-600 dark:text-gray-300">
+    <p class="py-8 md:text-lg italic">{$LL.storyboardDescription()}</p>
+  </div>
 </PageLayout>