From 090348fc479ab42940a4486e438a44dbb7bcc250 Mon Sep 17 00:00:00 2001
From: Vyacheslav Tumanov <me@slavatumanov.me>
Date: Thu, 29 Jun 2023 19:30:15 +0500
Subject: [PATCH] UBER-473: show icon for department (#3472)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>
---
 .../src/components/SpaceSelect.svelte         |  8 +++----
 .../src/components/SpaceSelector.svelte       |  4 ++--
 ...WithEmojii.svelte => IconWithEmoji.svelte} | 24 +++++++++----------
 packages/ui/src/index.ts                      |  2 +-
 .../schedule/CreatePublicHoliday.svelte       |  6 +++--
 .../src/components/CreateIssue.svelte         |  2 +-
 .../components/components/NewComponent.svelte |  2 +-
 .../src/components/issues/Move.svelte         |  2 +-
 .../components/milestones/NewMilestone.svelte |  2 +-
 .../components/projects/CreateProject.svelte  |  6 ++---
 .../ProjectFilterValuePresenter.svelte        |  6 ++---
 .../projects/ProjectIconChooser.svelte        |  4 ++--
 .../projects/ProjectPresenter.svelte          |  8 +++----
 .../projects/ProjectSpacePresenter.svelte     |  6 ++---
 .../templates/CreateIssueTemplate.svelte      |  2 +-
 plugins/tracker-resources/src/plugin.ts       |  4 ++--
 16 files changed, 45 insertions(+), 43 deletions(-)
 rename packages/ui/src/components/{IconWithEmojii.svelte => IconWithEmoji.svelte} (84%)

diff --git a/packages/presentation/src/components/SpaceSelect.svelte b/packages/presentation/src/components/SpaceSelect.svelte
index 5f889c0c94..6907a0f5f8 100644
--- a/packages/presentation/src/components/SpaceSelect.svelte
+++ b/packages/presentation/src/components/SpaceSelect.svelte
@@ -16,7 +16,7 @@
   import { createEventDispatcher, ComponentType } from 'svelte'
 
   import { Asset, IntlString } from '@hcengineering/platform'
-  import { getPlatformColorDef, getPlatformColorForTextDef, IconWithEmojii, themeStore } from '@hcengineering/ui'
+  import { getPlatformColorDef, getPlatformColorForTextDef, IconWithEmoji, themeStore } from '@hcengineering/ui'
   import {
     AnySvelteComponent,
     Button,
@@ -56,7 +56,7 @@
   export let componentProps: any | undefined = undefined
   export let autoSelect = true
   export let readonly = false
-  export let iconWithEmojii: AnySvelteComponent | Asset | ComponentType | undefined = undefined
+  export let iconWithEmoji: AnySvelteComponent | Asset | ComponentType | undefined = undefined
   export let defaultIcon: AnySvelteComponent | Asset | ComponentType = IconFolder
 
   let selected: (Space & IconProps) | undefined
@@ -121,8 +121,8 @@
     {focus}
     disabled={readonly}
     {focusIndex}
-    icon={selected?.icon === iconWithEmojii ? IconWithEmojii : selected?.icon ?? defaultIcon}
-    iconProps={selected?.icon === iconWithEmojii
+    icon={selected?.icon === iconWithEmoji && iconWithEmoji ? IconWithEmoji : selected?.icon ?? defaultIcon}
+    iconProps={selected?.icon === iconWithEmoji && iconWithEmoji
       ? { icon: selected?.color }
       : {
           fill:
diff --git a/packages/presentation/src/components/SpaceSelector.svelte b/packages/presentation/src/components/SpaceSelector.svelte
index 912d3afcb3..5b24fe6174 100644
--- a/packages/presentation/src/components/SpaceSelector.svelte
+++ b/packages/presentation/src/components/SpaceSelector.svelte
@@ -35,7 +35,7 @@
   export let component: AnySvelteComponent | undefined = undefined
   export let componentProps: any | undefined = undefined
   export let autoSelect = true
-  export let iconWithEmojii: AnySvelteComponent | Asset | ComponentType | undefined = undefined
+  export let iconWithEmoji: AnySvelteComponent | Asset | ComponentType | undefined = undefined
   export let defaultIcon: AnySvelteComponent | Asset | ComponentType | undefined = undefined
 
   const dispatch = createEventDispatcher()
@@ -59,7 +59,7 @@
   {component}
   {componentProps}
   {autoSelect}
-  {iconWithEmojii}
+  {iconWithEmoji}
   {defaultIcon}
   bind:value={space}
   on:change={(evt) => {
diff --git a/packages/ui/src/components/IconWithEmojii.svelte b/packages/ui/src/components/IconWithEmoji.svelte
similarity index 84%
rename from packages/ui/src/components/IconWithEmojii.svelte
rename to packages/ui/src/components/IconWithEmoji.svelte
index 7e7aa044e7..1881ad9771 100644
--- a/packages/ui/src/components/IconWithEmojii.svelte
+++ b/packages/ui/src/components/IconWithEmoji.svelte
@@ -24,50 +24,50 @@
   } catch (err) {}
 </script>
 
-<div class="emojii-{size} flex-row-center emojii">
+<div class="emoji-{size} flex-row-center emoji">
   {value}
 </div>
 
 <style lang="scss">
-  .emojii {
+  .emoji {
     display: flex;
     align-items: center;
     justify-content: center;
     color: black;
   }
-  .emojii-inline {
+  .emoji-inline {
     width: 1em;
     height: 1em;
     font-size: 1rem;
   }
-  .emojii-x-small {
+  .emoji-x-small {
     width: 0.75rem;
     height: 0.75rem;
     font-size: 0.75rem;
   }
-  .emojii-small {
+  .emoji-small {
     width: 1rem;
     height: 1rem;
     font-size: 1rem;
   }
-  .emojii-medium {
+  .emoji-medium {
     width: 1.25rem;
     height: 1.25rem;
     font-size: 1.25rem;
   }
-  .emojii-large {
+  .emoji-large {
     width: 1.5rem;
     height: 1.5rem;
     font-size: 1.5rem;
   }
-  .semojiivg-full {
+  .semojivg-full {
     width: inherit;
     height: inherit;
   }
-  .emojii-x-small,
-  .emojii-small,
-  .emojii-medium,
-  .emojii-large {
+  .emoji-x-small,
+  .emoji-small,
+  .emoji-medium,
+  .emoji-large {
     flex-shrink: 0;
   }
 </style>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 00b18b5ec7..a475034560 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -184,7 +184,7 @@ export { Notification } from './components/notifications/Notification'
 export { default as Wizard } from './components/wizard/Wizard.svelte'
 export { default as StepsDialog } from './components/StepsDialog.svelte'
 export { default as EmojiPopup } from './components/EmojiPopup.svelte'
-export { default as IconWithEmojii } from './components/IconWithEmojii.svelte'
+export { default as IconWithEmoji } from './components/IconWithEmoji.svelte'
 export { default as ModeSelector } from './components/ModeSelector.svelte'
 
 export * from './types'
diff --git a/plugins/hr-resources/src/components/schedule/CreatePublicHoliday.svelte b/plugins/hr-resources/src/components/schedule/CreatePublicHoliday.svelte
index 11d1de92bf..5db4f1fc4b 100644
--- a/plugins/hr-resources/src/components/schedule/CreatePublicHoliday.svelte
+++ b/plugins/hr-resources/src/components/schedule/CreatePublicHoliday.svelte
@@ -79,8 +79,10 @@
     <DateRangePresenter bind:value={date} />
   </div>
   <svelte:fragment slot="pool">
-    <Label label={hr.string.Department} />
-    <SpaceSelector _class={hr.class.Department} label={hr.string.ParentDepartmentLabel} bind:space={department} />
+    <div class="flex-row-center flex-grow flex-gap-3">
+      <Label label={hr.string.Department} />
+      <SpaceSelector _class={hr.class.Department} label={hr.string.ParentDepartmentLabel} bind:space={department} />
+    </div>
   </svelte:fragment>
   <svelte:fragment slot="buttons">
     {#if existingHoliday}
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index f1ba2c71c5..635e813c53 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -552,7 +552,7 @@
       kind={'secondary'}
       size={'small'}
       component={ProjectPresenter}
-      iconWithEmojii={tracker.component.IconWithEmojii}
+      iconWithEmoji={tracker.component.IconWithEmoji}
       defaultIcon={tracker.icon.Home}
     />
     <ObjectBox
diff --git a/plugins/tracker-resources/src/components/components/NewComponent.svelte b/plugins/tracker-resources/src/components/components/NewComponent.svelte
index 5d4b30582a..bd5f3c0662 100644
--- a/plugins/tracker-resources/src/components/components/NewComponent.svelte
+++ b/plugins/tracker-resources/src/components/components/NewComponent.svelte
@@ -58,7 +58,7 @@
       kind={'secondary'}
       size={'large'}
       component={ProjectPresenter}
-      iconWithEmojii={tracker.component.IconWithEmojii}
+      iconWithEmoji={tracker.component.IconWithEmoji}
       defaultIcon={tracker.icon.Home}
     />
   </svelte:fragment>
diff --git a/plugins/tracker-resources/src/components/issues/Move.svelte b/plugins/tracker-resources/src/components/issues/Move.svelte
index b227b024d4..eb2c32af7b 100644
--- a/plugins/tracker-resources/src/components/issues/Move.svelte
+++ b/plugins/tracker-resources/src/components/issues/Move.svelte
@@ -269,7 +269,7 @@
           kind={'secondary'}
           size={'small'}
           component={ProjectPresenter}
-          iconWithEmojii={tracker.component.IconWithEmojii}
+          iconWithEmoji={tracker.component.IconWithEmoji}
           defaultIcon={tracker.icon.Home}
         />
         <!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/plugins/tracker-resources/src/components/milestones/NewMilestone.svelte b/plugins/tracker-resources/src/components/milestones/NewMilestone.svelte
index 56cc0f4998..85ce9b8b3b 100644
--- a/plugins/tracker-resources/src/components/milestones/NewMilestone.svelte
+++ b/plugins/tracker-resources/src/components/milestones/NewMilestone.svelte
@@ -62,7 +62,7 @@
       size={'large'}
       bind:space
       component={ProjectPresenter}
-      iconWithEmojii={tracker.component.IconWithEmojii}
+      iconWithEmoji={tracker.component.IconWithEmoji}
       defaultIcon={tracker.icon.Home}
     />
   </svelte:fragment>
diff --git a/plugins/tracker-resources/src/components/projects/CreateProject.svelte b/plugins/tracker-resources/src/components/projects/CreateProject.svelte
index 943483bf57..f210a17244 100644
--- a/plugins/tracker-resources/src/components/projects/CreateProject.svelte
+++ b/plugins/tracker-resources/src/components/projects/CreateProject.svelte
@@ -24,7 +24,7 @@
     Button,
     EditBox,
     IconEdit,
-    IconWithEmojii,
+    IconWithEmoji,
     Label,
     Toggle,
     eventToHTMLElement,
@@ -270,8 +270,8 @@
         <Label label={tracker.string.ChooseIcon} />
       </div>
       <Button
-        icon={icon === tracker.component.IconWithEmojii ? IconWithEmojii : icon ?? tracker.icon.Home}
-        iconProps={icon === tracker.component.IconWithEmojii
+        icon={icon === tracker.component.IconWithEmoji ? IconWithEmoji : icon ?? tracker.icon.Home}
+        iconProps={icon === tracker.component.IconWithEmoji
           ? { icon: color }
           : {
               fill:
diff --git a/plugins/tracker-resources/src/components/projects/ProjectFilterValuePresenter.svelte b/plugins/tracker-resources/src/components/projects/ProjectFilterValuePresenter.svelte
index 3d6b08f93a..fae085a7cb 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectFilterValuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectFilterValuePresenter.svelte
@@ -16,7 +16,7 @@
   import { Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { Project } from '@hcengineering/tracker'
-  import { Icon, IconWithEmojii, getPlatformColorDef, getPlatformColorForTextDef, themeStore } from '@hcengineering/ui'
+  import { Icon, IconWithEmoji, getPlatformColorDef, getPlatformColorForTextDef, themeStore } from '@hcengineering/ui'
   import tracker from '../../plugin'
 
   export let value: [Ref<Project>, Ref<Project>[]][]
@@ -37,9 +37,9 @@
   {#each projects as project, i}
     {#if value && i < MAX_VISIBLE_PROJECTS}
       {@const icon =
-        project.icon === tracker.component.IconWithEmojii ? IconWithEmojii : project.icon ?? tracker.icon.Home}
+        project.icon === tracker.component.IconWithEmoji ? IconWithEmoji : project.icon ?? tracker.icon.Home}
       {@const iconProps =
-        project.icon === tracker.component.IconWithEmojii
+        project.icon === tracker.component.IconWithEmoji
           ? { icon: project.color }
           : {
               fill:
diff --git a/plugins/tracker-resources/src/components/projects/ProjectIconChooser.svelte b/plugins/tracker-resources/src/components/projects/ProjectIconChooser.svelte
index d7d2605a43..c7e8b275ab 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectIconChooser.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectIconChooser.svelte
@@ -55,7 +55,7 @@
   <div class="float-left-box">
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <TabsControl
-      model={[{ label: tracker.string.ProjectIconCategory }, { label: tracker.string.ProjectEmojiiCategory }]}
+      model={[{ label: tracker.string.ProjectIconCategory }, { label: tracker.string.ProjectEmojiCategory }]}
     >
       <svelte:fragment slot="content" let:selected>
         {#if selected === 0}
@@ -82,7 +82,7 @@
           <EmojiPopup
             embedded
             on:close={(evt) => {
-              dispatch('close', { icon: tracker.component.IconWithEmojii, color: evt.detail.codePointAt(0) })
+              dispatch('close', { icon: tracker.component.IconWithEmoji, color: evt.detail.codePointAt(0) })
             }}
           />
         {/if}
diff --git a/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte b/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
index 7c47b22d96..6dbe8d5fbb 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Project } from '@hcengineering/tracker'
-  import { Icon, IconWithEmojii, getPlatformColorDef, getPlatformColorForTextDef, themeStore } from '@hcengineering/ui'
+  import { Icon, IconWithEmoji, getPlatformColorDef, getPlatformColorForTextDef, themeStore } from '@hcengineering/ui'
   import tracker from '../../plugin'
 
   export let value: Project | undefined
@@ -24,10 +24,10 @@
 
 {#if value}
   <div class="flex-presenter cursor-default" class:inline-presenter={inline}>
-    <div class="icon" class:emoji={value.icon === tracker.component.IconWithEmojii}>
+    <div class="icon" class:emoji={value.icon === tracker.component.IconWithEmoji}>
       <Icon
-        icon={value.icon === tracker.component.IconWithEmojii ? IconWithEmojii : value.icon ?? tracker.icon.Home}
-        iconProps={value.icon === tracker.component.IconWithEmojii
+        icon={value.icon === tracker.component.IconWithEmoji ? IconWithEmoji : value.icon ?? tracker.icon.Home}
+        iconProps={value.icon === tracker.component.IconWithEmoji
           ? { icon: value.color }
           : {
               fill:
diff --git a/plugins/tracker-resources/src/components/projects/ProjectSpacePresenter.svelte b/plugins/tracker-resources/src/components/projects/ProjectSpacePresenter.svelte
index e612952e22..6bc8c290e5 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectSpacePresenter.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectSpacePresenter.svelte
@@ -16,7 +16,7 @@
   import { Ref, Space } from '@hcengineering/core'
   import { Project } from '@hcengineering/tracker'
   import {
-    IconWithEmojii,
+    IconWithEmoji,
     getCurrentLocation,
     getPlatformColorDef,
     getPlatformColorForTextDef,
@@ -43,8 +43,8 @@
 {#if model.specials}
   <TreeNode
     {collapsed}
-    icon={space?.icon === tracker.component.IconWithEmojii ? IconWithEmojii : space?.icon ?? model.icon}
-    iconProps={space?.icon === tracker.component.IconWithEmojii
+    icon={space?.icon === tracker.component.IconWithEmoji ? IconWithEmoji : space?.icon ?? model.icon}
+    iconProps={space?.icon === tracker.component.IconWithEmoji
       ? { icon: space.color }
       : {
           fill:
diff --git a/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte b/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
index 0af4d5e8e2..7cae58e9da 100644
--- a/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
+++ b/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
@@ -140,7 +140,7 @@
       kind={'secondary'}
       size={'large'}
       component={ProjectPresenter}
-      iconWithEmojii={tracker.component.IconWithEmojii}
+      iconWithEmoji={tracker.component.IconWithEmoji}
       defaultIcon={tracker.icon.Home}
     />
   </svelte:fragment>
diff --git a/plugins/tracker-resources/src/plugin.ts b/plugins/tracker-resources/src/plugin.ts
index 1b10c74e59..055b71f35e 100644
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/plugins/tracker-resources/src/plugin.ts
@@ -297,7 +297,7 @@ export default mergeIds(trackerId, tracker, {
     ProjectColor: '' as IntlString,
 
     ProjectIconCategory: '' as IntlString,
-    ProjectEmojiiCategory: '' as IntlString,
+    ProjectEmojiCategory: '' as IntlString,
 
     NoStatusFound: '' as IntlString,
     CreateMissingStatus: '' as IntlString,
@@ -364,7 +364,7 @@ export default mergeIds(trackerId, tracker, {
     IssueTemplates: '' as AnyComponent,
     IssueTemplatePresenter: '' as AnyComponent,
     SubIssuesSelector: '' as AnyComponent,
-    IconWithEmojii: '' as Asset
+    IconWithEmoji: '' as Asset
   },
   metadata: {
     CreateIssueDraft: '' as Metadata<IssueDraft>