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

@@ -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",

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",

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",

plugins/recruit-assets/lang/ru.json

@@ -12,6 +12,7 @@
     "CompanyCreateLabel": "Компания",
     "VacancyPlaceholder": "Разработчик",
     "CreateAnApplication": "Новый Кандидат",
+    "NoVacancies": "Нет вакансий",
     "NoApplicationsForTalent": "Нет кандидатов для данного таланта.",
     "NoApplicationsForVacancy": "Нет кандидатов для данной вакансии.",
     "CreateApplication": "Новый Кандидат",

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">
+      <SectionEmpty icon={FileDuo} label={recruit.string.NoApplicationsForTalent}>
-        <div class="caption-color">
-          <FileDuo size={'large'} />
-        </div>
-        <span class="content-dark-color">
-          <Label label={recruit.string.NoApplicationsForTalent} />
-        </span>
         <!-- 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>

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>

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">
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoApplicationsForVacancy}>
-      <div class="caption-color">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <FileDuo size={'large'} />
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      </div>
-      <span class="content-dark-color">
-        <Label label={recruit.string.NoApplicationsForVacancy} />
-      </span>
       <span class="over-underline content-color" on:click={createApp}>
         <Label label={recruit.string.CreateAnApplication} />
       </span>
-    </div>
+    </SectionEmpty>
   {/if}
 </div>

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">
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoVacancies}>
-      <div class="caption-color">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <FileDuo size={'large'} />
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      </div>
+      <span class="over-underline content-color" on:click={createApp}>
-      <span class="content-dark-color">
+        <Label label={recruit.string.CreateVacancy} />
-        <Label label={getEmbeddedLabel('No Vacancies')} />
       </span>
-      {#if !readonly}
+    </SectionEmpty>
-        <span class="over-underline content-color" on:click={createApp}>
-          <Label label={recruit.string.CreateVacancy} />
-        </span>
-      {/if}
-    </div>
   {/if}
 </div>

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">
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoReviewForCandidate}>
-      <div class="content-color">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <FileDuo size={'large'} />
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      </div>
-      <div class="text-sm content-dark-color mt-2">
-        <Label label={recruit.string.NoReviewForCandidate} />
-      </div>
       <span class="text-sm content-color over-underline" on:click={createApp}>
         <Label label={recruit.string.CreateAnReview} />
       </span>
-    </div>
+    </SectionEmpty>
   {/if}
 </div>

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">
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoReviewForCandidate}>
-      <div class="caption-color">
-        <FileDuo size={'large'} />
-      </div>
-      <span class="content-dark-color mt-2">
-        <Label label={recruit.string.NoReviewForCandidate} />
-      </span>
       {#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>

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,

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>