From a3a77eb6b10dd21e683e67d0efd86974d8371516 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pete=20An=C3=B8ther?= <develop.pit@gmail.com>
Date: Mon, 8 Apr 2024 02:54:04 -0300
Subject: [PATCH] TSK-1682: Introduced reusable `SectionEmpty` for numerous
 existing and upcoming cases (#5220)

Signed-off-by: Petr Vyazovetskiy <develop.pit@gmail.com>
---
 plugins/recruit-assets/lang/en.json           |  3 +-
 plugins/recruit-assets/lang/es.json           |  3 +-
 plugins/recruit-assets/lang/pt.json           |  3 +-
 plugins/recruit-assets/lang/ru.json           |  5 +--
 .../src/components/Applications.svelte        | 13 +++----
 .../src/components/SectionEmpty.svelte        | 36 +++++++++++++++++++
 .../src/components/VacancyApplications.svelte | 15 ++++----
 .../src/components/VacancyList.svelte         | 20 ++++-------
 .../src/components/review/Opinions.svelte     | 13 +++----
 .../src/components/review/Reviews.svelte      | 12 +++----
 plugins/recruit-resources/src/plugin.ts       |  1 +
 .../related/RelatedIssuesSection.svelte       |  2 +-
 12 files changed, 73 insertions(+), 53 deletions(-)
 create mode 100644 plugins/recruit-resources/src/components/SectionEmpty.svelte

diff --git a/plugins/recruit-assets/lang/en.json b/plugins/recruit-assets/lang/en.json
index d70b93f46f..1f20d7be46 100644
--- a/plugins/recruit-assets/lang/en.json
+++ b/plugins/recruit-assets/lang/en.json
@@ -12,6 +12,7 @@
     "CompanyCreateLabel": "Company",
     "VacancyPlaceholder": "Software Engineer",
     "CreateAnApplication": "New Application",
+    "NoVacancies": "No Vacancies",
     "NoApplicationsForTalent": "There are no applications for this talent.",
     "NoApplicationsForVacancy": "There are no applications for this vacancy.",
     "CreateApplication": "New Application",
@@ -128,4 +129,4 @@
     "TalentRequired": "Please select talent",
     "VacancyRequired": "Please select vacancy"
   }
-}
\ No newline at end of file
+}
diff --git a/plugins/recruit-assets/lang/es.json b/plugins/recruit-assets/lang/es.json
index 50c9f3079a..2e41c535d9 100644
--- a/plugins/recruit-assets/lang/es.json
+++ b/plugins/recruit-assets/lang/es.json
@@ -12,6 +12,7 @@
     "CompanyCreateLabel": "Empresa",
     "VacancyPlaceholder": "Ingeniero de software",
     "CreateAnApplication": "Nueva solicitud",
+    "NoVacancies": "No hay vacantes",
     "NoApplicationsForTalent": "No hay solicitudes para este talento.",
     "NoApplicationsForVacancy": "No hay solicitudes para esta vacante.",
     "CreateApplication": "Nueva solicitud",
@@ -125,4 +126,4 @@
     "TalentRequired": "Seleccione un talento",
     "VacancyRequired": "Seleccione una vacante"
   }
-}
\ No newline at end of file
+}
diff --git a/plugins/recruit-assets/lang/pt.json b/plugins/recruit-assets/lang/pt.json
index e03ebfb0d4..73155d5437 100644
--- a/plugins/recruit-assets/lang/pt.json
+++ b/plugins/recruit-assets/lang/pt.json
@@ -12,6 +12,7 @@
     "CompanyCreateLabel": "Empresa",
     "VacancyPlaceholder": "Engenheiro de software",
     "CreateAnApplication": "Nova candidatura",
+    "NoVacancies": "Não existem vagas",
     "NoApplicationsForTalent": "Não existem candidaturas para este talento.",
     "NoApplicationsForVacancy": "Não existem candidaturas para esta vaga.",
     "CreateApplication": "Nova candidatura",
@@ -125,4 +126,4 @@
     "TalentRequired": "Selecione um talento",
     "VacancyRequired": "Selecione uma vaga"
   }
-}
\ No newline at end of file
+}
diff --git a/plugins/recruit-assets/lang/ru.json b/plugins/recruit-assets/lang/ru.json
index a5fe0829ca..e78a8b1a3a 100644
--- a/plugins/recruit-assets/lang/ru.json
+++ b/plugins/recruit-assets/lang/ru.json
@@ -12,6 +12,7 @@
     "CompanyCreateLabel": "Компания",
     "VacancyPlaceholder": "Разработчик",
     "CreateAnApplication": "Новый Кандидат",
+    "NoVacancies": "Нет вакансий",
     "NoApplicationsForTalent": "Нет кандидатов для данного таланта.",
     "NoApplicationsForVacancy": "Нет кандидатов для данной вакансии.",
     "CreateApplication": "Новый Кандидат",
@@ -59,7 +60,7 @@
     "ManageVacancyStatuses": "Управление типами вакансии",
     "EditVacancy": "Редактировать",
     "FullDescription": "Детальное описание",
-    
+
     "CreateReview": "Запланировать Ревью",
     "CreateReviewParams": "Запланировать {label}",
     "Reviews": "Ревью",
@@ -128,4 +129,4 @@
     "TalentRequired": "Пожалуйста, выберите таланта",
     "VacancyRequired": "Пожалуйста, выберите вакансию"
   }
-}
\ No newline at end of file
+}
diff --git a/plugins/recruit-resources/src/components/Applications.svelte b/plugins/recruit-resources/src/components/Applications.svelte
index 490e05fd87..8dcd184ba2 100644
--- a/plugins/recruit-resources/src/components/Applications.svelte
+++ b/plugins/recruit-resources/src/components/Applications.svelte
@@ -21,6 +21,7 @@
   import CreateApplication from './CreateApplication.svelte'
   import IconApplication from './icons/Application.svelte'
   import FileDuo from './icons/FileDuo.svelte'
+  import SectionEmpty from './SectionEmpty.svelte'
 
   export let objectId: Ref<Doc>
 
@@ -50,7 +51,7 @@
   </svelte:fragment>
 
   <svelte:fragment slot="content">
-    {#if applications > 0 && viewlet && !loading}
+    {#if applications > 0 && viewlet !== undefined && !loading}
       <Scroller horizontal>
         <Table
           _class={recruit.class.Applicant}
@@ -60,19 +61,13 @@
         />
       </Scroller>
     {:else}
-      <div class="antiSection-empty solid flex-col-center mt-3">
-        <div class="caption-color">
-          <FileDuo size={'large'} />
-        </div>
-        <span class="content-dark-color">
-          <Label label={recruit.string.NoApplicationsForTalent} />
-        </span>
+      <SectionEmpty icon={FileDuo} label={recruit.string.NoApplicationsForTalent}>
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <span class="over-underline content-color" on:click={createApp}>
           <Label label={recruit.string.CreateAnApplication} />
         </span>
-      </div>
+      </SectionEmpty>
     {/if}
   </svelte:fragment>
 </Section>
diff --git a/plugins/recruit-resources/src/components/SectionEmpty.svelte b/plugins/recruit-resources/src/components/SectionEmpty.svelte
new file mode 100644
index 0000000000..170ab68219
--- /dev/null
+++ b/plugins/recruit-resources/src/components/SectionEmpty.svelte
@@ -0,0 +1,36 @@
+<!--
+//
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+-->
+
+<script lang="ts">
+  import type { IntlString } from '@hcengineering/platform'
+  import { Icon, Label } from '@hcengineering/ui'
+  import type { ComponentProps } from 'svelte'
+
+  export let icon: ComponentProps<Icon>['icon']
+  export let label: IntlString
+  export let labelParams: Record<string, any> = {}
+</script>
+
+<div class="antiSection-empty solid flex-col-center mt-3">
+  <div class="flex-center caption-color">
+    <Icon {icon} size="large" />
+  </div>
+  <span class="text-sm content-dark-color mt-2">
+    <Label {label} params={labelParams} />
+  </span>
+  <slot />
+</div>
diff --git a/plugins/recruit-resources/src/components/VacancyApplications.svelte b/plugins/recruit-resources/src/components/VacancyApplications.svelte
index 0e3b5ee136..7a3476a29d 100644
--- a/plugins/recruit-resources/src/components/VacancyApplications.svelte
+++ b/plugins/recruit-resources/src/components/VacancyApplications.svelte
@@ -23,6 +23,7 @@
   import CreateApplication from './CreateApplication.svelte'
   import IconApplication from './icons/Application.svelte'
   import FileDuo from './icons/FileDuo.svelte'
+  import SectionEmpty from './SectionEmpty.svelte'
 
   export let objectId: Ref<Vacancy>
   let applications: number
@@ -63,7 +64,7 @@
     </div>
   </div>
   {#if applications > 0}
-    {#if viewlet && !loading}
+    {#if viewlet !== undefined && !loading}
       <Scroller horizontal>
         <Table
           _class={recruit.class.Applicant}
@@ -76,16 +77,12 @@
       <Loading />
     {/if}
   {:else}
-    <div class="antiSection-empty solid flex-col-center mt-3">
-      <div class="caption-color">
-        <FileDuo size={'large'} />
-      </div>
-      <span class="content-dark-color">
-        <Label label={recruit.string.NoApplicationsForVacancy} />
-      </span>
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoApplicationsForVacancy}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <span class="over-underline content-color" on:click={createApp}>
         <Label label={recruit.string.CreateAnApplication} />
       </span>
-    </div>
+    </SectionEmpty>
   {/if}
 </div>
diff --git a/plugins/recruit-resources/src/components/VacancyList.svelte b/plugins/recruit-resources/src/components/VacancyList.svelte
index 40643fe1e9..9435189794 100644
--- a/plugins/recruit-resources/src/components/VacancyList.svelte
+++ b/plugins/recruit-resources/src/components/VacancyList.svelte
@@ -14,7 +14,6 @@
 -->
 <script lang="ts">
   import { Doc, Ref } from '@hcengineering/core'
-  import { getEmbeddedLabel } from '@hcengineering/platform'
   import presentation from '@hcengineering/presentation'
   import { Button, Icon, IconAdd, Label, showPopup, Scroller } from '@hcengineering/ui'
   import view, { BuildModelKey } from '@hcengineering/view'
@@ -22,6 +21,7 @@
   import recruit from '../plugin'
   import CreateVacancy from './CreateVacancy.svelte'
   import FileDuo from './icons/FileDuo.svelte'
+  import SectionEmpty from './SectionEmpty.svelte'
 
   export let objectId: Ref<Doc>
   export let vacancies: number | undefined
@@ -71,18 +71,12 @@
       />
     </Scroller>
   {:else}
-    <div class="antiSection-empty solid flex-col-center mt-3">
-      <div class="caption-color">
-        <FileDuo size={'large'} />
-      </div>
-      <span class="content-dark-color">
-        <Label label={getEmbeddedLabel('No Vacancies')} />
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoVacancies}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <span class="over-underline content-color" on:click={createApp}>
+        <Label label={recruit.string.CreateVacancy} />
       </span>
-      {#if !readonly}
-        <span class="over-underline content-color" on:click={createApp}>
-          <Label label={recruit.string.CreateVacancy} />
-        </span>
-      {/if}
-    </div>
+    </SectionEmpty>
   {/if}
 </div>
diff --git a/plugins/recruit-resources/src/components/review/Opinions.svelte b/plugins/recruit-resources/src/components/review/Opinions.svelte
index f1acb7642c..5d6b074c89 100644
--- a/plugins/recruit-resources/src/components/review/Opinions.svelte
+++ b/plugins/recruit-resources/src/components/review/Opinions.svelte
@@ -18,6 +18,7 @@
   import { Table } from '@hcengineering/view-resources'
   import recruit from '../../plugin'
   import FileDuo from '../icons/FileDuo.svelte'
+  import SectionEmpty from '../SectionEmpty.svelte'
   import CreateOpinion from './CreateOpinion.svelte'
 
   export let objectId: Ref<Doc>
@@ -44,16 +45,12 @@
       loadingProps={{ length: opinions }}
     />
   {:else}
-    <div class="antiSection-empty solid flex-col-center mt-3">
-      <div class="content-color">
-        <FileDuo size={'large'} />
-      </div>
-      <div class="text-sm content-dark-color mt-2">
-        <Label label={recruit.string.NoReviewForCandidate} />
-      </div>
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoReviewForCandidate}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <span class="text-sm content-color over-underline" on:click={createApp}>
         <Label label={recruit.string.CreateAnReview} />
       </span>
-    </div>
+    </SectionEmpty>
   {/if}
 </div>
diff --git a/plugins/recruit-resources/src/components/review/Reviews.svelte b/plugins/recruit-resources/src/components/review/Reviews.svelte
index 3feb57b397..9e8b424fc3 100644
--- a/plugins/recruit-resources/src/components/review/Reviews.svelte
+++ b/plugins/recruit-resources/src/components/review/Reviews.svelte
@@ -22,6 +22,7 @@
   import { Table } from '@hcengineering/view-resources'
   import recruit from '../../plugin'
   import FileDuo from '../icons/FileDuo.svelte'
+  import SectionEmpty from '../SectionEmpty.svelte'
   import CreateReview from './CreateReview.svelte'
 
   export let objectId: Ref<Doc>
@@ -93,19 +94,14 @@
       />
     </Scroller>
   {:else}
-    <div class="antiSection-empty solid flex-col-center mt-3">
-      <div class="caption-color">
-        <FileDuo size={'large'} />
-      </div>
-      <span class="content-dark-color mt-2">
-        <Label label={recruit.string.NoReviewForCandidate} />
-      </span>
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoReviewForCandidate}>
       {#if !readonly}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <span class="over-underline content-color" on:click={createApp}>
           <Label label={recruit.string.CreateAnReview} />
         </span>
       {/if}
-    </div>
+    </SectionEmpty>
   {/if}
 </div>
diff --git a/plugins/recruit-resources/src/plugin.ts b/plugins/recruit-resources/src/plugin.ts
index 2a6f47c9ea..f7edf84c73 100644
--- a/plugins/recruit-resources/src/plugin.ts
+++ b/plugins/recruit-resources/src/plugin.ts
@@ -39,6 +39,7 @@ export default mergeIds(recruitId, recruit, {
     VacancyDescription: '' as IntlString,
     CandidatesDescription: '' as IntlString,
     CreateAnApplication: '' as IntlString,
+    NoVacancies: '' as IntlString,
     NoApplicationsForTalent: '' as IntlString,
     NoApplicationsForVacancy: '' as IntlString,
     FirstName: '' as IntlString,
diff --git a/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte b/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
index 18576c688e..5c6b47c302 100644
--- a/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
+++ b/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
@@ -16,7 +16,7 @@
 {#if $configurationStore.has(trackerId)}
   <QueryIssuesList {object} {query} createParams={{ relatedTo: object }} hasSubIssues>
     <svelte:fragment slot="header">
-      <div class="flex-row-center mb-3">
+      <div class="flex-row-center">
         <div class="antiSection-header__icon">
           <Icon icon={tracker.icon.Issue} size={'small'} />
         </div>