From 3fcd9081be3588063bc8070cef32dfab7e7b1394 Mon Sep 17 00:00:00 2001
From: Vyacheslav Tumanov <me@slavatumanov.me>
Date: Wed, 19 Jul 2023 17:46:03 +0500
Subject: [PATCH] UBER-593: hyperlink editor (#3506)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>
---
 models/view/src/index.ts                      |   4 +-
 models/view/src/plugin.ts                     |   2 +
 plugins/contact-assets/lang/en.json           |   2 +-
 plugins/view-assets/lang/en.json              |   4 +-
 plugins/view-assets/lang/ru.json              |   4 +-
 .../src/components/HyperlinkEditor.svelte     |  62 ++++++++
 .../components/HyperlinkEditorPopup.svelte    | 143 ++++++++++++++++++
 plugins/view-resources/src/index.ts           |   4 +
 plugins/view/src/index.ts                     |   4 +-
 9 files changed, 223 insertions(+), 6 deletions(-)
 create mode 100644 plugins/view-resources/src/components/HyperlinkEditor.svelte
 create mode 100644 plugins/view-resources/src/components/HyperlinkEditorPopup.svelte

diff --git a/models/view/src/index.ts b/models/view/src/index.ts
index 216652a2ed..2c481e540d 100644
--- a/models/view/src/index.ts
+++ b/models/view/src/index.ts
@@ -452,8 +452,8 @@ export function createModel (builder: Builder): void {
     builder,
     core.class.TypeHyperlink,
     view.component.HyperlinkPresenter,
-    view.component.StringEditor,
-    view.component.StringEditorPopup
+    view.component.HyperlinkEditor,
+    view.component.HyperlinkEditorPopup
   )
   classPresenter(builder, core.class.TypeIntlString, view.component.IntlStringPresenter)
   classPresenter(builder, core.class.TypeNumber, view.component.NumberPresenter, view.component.NumberEditor)
diff --git a/models/view/src/plugin.ts b/models/view/src/plugin.ts
index 231aef750b..a2f75f732b 100644
--- a/models/view/src/plugin.ts
+++ b/models/view/src/plugin.ts
@@ -47,6 +47,8 @@ export default mergeIds(viewId, view, {
     StringEditorPopup: '' as AnyComponent,
     StringPresenter: '' as AnyComponent,
     HyperlinkPresenter: '' as AnyComponent,
+    HyperlinkEditor: '' as AnyComponent,
+    HyperlinkEditorPopup: '' as AnyComponent,
     IntlStringPresenter: '' as AnyComponent,
     NumberEditor: '' as AnyComponent,
     NumberPresenter: '' as AnyComponent,
diff --git a/plugins/contact-assets/lang/en.json b/plugins/contact-assets/lang/en.json
index c5f646de8a..8884091a20 100644
--- a/plugins/contact-assets/lang/en.json
+++ b/plugins/contact-assets/lang/en.json
@@ -42,7 +42,7 @@
     "Facebook": "Facebook",
     "HomepagePlaceholder": "https://jappleseed.com",
     "Homepage": "Home page",
-    "SocialLinks": "Socail links",
+    "SocialLinks": "Social links",
     "ViewActivity": "View activity",
     "PersonAlreadyExists": "Contact already exists...",
     "Status": "Status",
diff --git a/plugins/view-assets/lang/en.json b/plugins/view-assets/lang/en.json
index 99b4b1dd55..d178bf5ac5 100644
--- a/plugins/view-assets/lang/en.json
+++ b/plugins/view-assets/lang/en.json
@@ -103,6 +103,8 @@
     "Show": "Show",
     "FilterArrayAll": "includes all",
     "FilterArrayAny": "includes any",
-    "Or": "Or"
+    "Or": "Or",
+    "HyperlinkPlaceholder": "https://jappleseed.com",
+    "CopyToClipboard": "Copy to clipboard"
   }
 }
diff --git a/plugins/view-assets/lang/ru.json b/plugins/view-assets/lang/ru.json
index a1f75a4fcd..b2bac3ce36 100644
--- a/plugins/view-assets/lang/ru.json
+++ b/plugins/view-assets/lang/ru.json
@@ -99,6 +99,8 @@
     "Show": "Отображение",
     "FilterArrayAll": "содержит все",
     "FilterArrayAny": "содержит любое из",
-    "Or": "Или"
+    "Or": "Или",
+    "HyperlinkPlaceholder": "https://jappleseed.com",
+    "CopyToClipboard": "Скопировать в буфер обмена"
   }
 }
diff --git a/plugins/view-resources/src/components/HyperlinkEditor.svelte b/plugins/view-resources/src/components/HyperlinkEditor.svelte
new file mode 100644
index 0000000000..a5a74ed418
--- /dev/null
+++ b/plugins/view-resources/src/components/HyperlinkEditor.svelte
@@ -0,0 +1,62 @@
+<!--
+// Copyright © 2023 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 type { ButtonSize, ButtonKind } from '@hcengineering/ui'
+  import { Label, showPopup, eventToHTMLElement, Button, parseURL } from '@hcengineering/ui'
+  import HyperlinkEditorPopup from './HyperlinkEditorPopup.svelte'
+
+  export let placeholder: IntlString
+  export let value: string
+  export let onChange: (value: string) => void = () => {}
+  export let kind: ButtonKind | undefined = undefined
+  export let readonly = false
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = 'fit-content'
+
+  let shown: boolean = false
+</script>
+
+<Button
+  {kind}
+  {size}
+  {justify}
+  {width}
+  on:click={(ev) => {
+    if (!shown) {
+      showPopup(HyperlinkEditorPopup, { value, editable: !readonly }, eventToHTMLElement(ev), (res) => {
+        if (res === 'open') {
+          const url = parseURL(value)
+          if (url.startsWith('http://') || url.startsWith('https://')) {
+            window.open(url)
+          }
+        } else if (res !== undefined) {
+          value = res
+          onChange(value)
+        }
+        shown = false
+      })
+    }
+  }}
+>
+  <svelte:fragment slot="content">
+    {#if value}
+      <span class="caption-color overflow-label pointer-events-none">{value}</span>
+    {:else}
+      <span class="content-dark-color pointer-events-none"><Label label={placeholder} /></span>
+    {/if}
+  </svelte:fragment>
+</Button>
diff --git a/plugins/view-resources/src/components/HyperlinkEditorPopup.svelte b/plugins/view-resources/src/components/HyperlinkEditorPopup.svelte
new file mode 100644
index 0000000000..126c3a45d5
--- /dev/null
+++ b/plugins/view-resources/src/components/HyperlinkEditorPopup.svelte
@@ -0,0 +1,143 @@
+<!--
+// Copyright © 2023 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 { translate } from '@hcengineering/platform'
+  import { themeStore, Label } from '@hcengineering/ui'
+  import { Button, IconArrowRight, IconBlueCheck, IconClose } from '@hcengineering/ui'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import view from '../plugin'
+
+  export let value: string = ''
+  export let editable: boolean | undefined = true
+
+  const placeholder: IntlString = view.string.HyperlinkPlaceholder
+  const dispatch = createEventDispatcher()
+  let input: HTMLInputElement
+  let phTranslate: string
+  $: translate(placeholder, {}, $themeStore.language).then((tr) => (phTranslate = tr))
+
+  onMount(() => {
+    if (input) input.focus()
+  })
+</script>
+
+<div class="editor-container buttons-group xsmall-gap">
+  <div class="cover-channel show">
+    {#if editable}
+      <input
+        bind:this={input}
+        class="search"
+        type="text"
+        bind:value
+        placeholder={phTranslate}
+        style="width: 100%;"
+        on:keypress={(ev) => {
+          if (ev.key === 'Enter') {
+            ev.preventDefault()
+            ev.stopPropagation()
+            dispatch('close', value)
+          }
+        }}
+        on:change
+      />
+    {:else if value}
+      <span class="overflow-label">{value}</span>
+    {:else}
+      <span class="content-dark-color"><Label label={placeholder} /></span>
+    {/if}
+  </div>
+  <Button
+    focusIndex={2}
+    kind={'ghost'}
+    size={'small'}
+    icon={IconClose}
+    disabled={value === ''}
+    on:click={() => {
+      if (input) {
+        value = ''
+        input.focus()
+      }
+    }}
+  />
+  {#if editable}
+    <Button
+      id="channel-ok"
+      focusIndex={3}
+      kind={'ghost'}
+      size={'small'}
+      icon={IconBlueCheck}
+      on:click={() => {
+        dispatch('close', value)
+      }}
+    />
+  {/if}
+  <Button
+    focusIndex={4}
+    kind={'ghost'}
+    size={'small'}
+    icon={IconArrowRight}
+    on:click={() => {
+      dispatch('update', value)
+      dispatch('close', 'open')
+    }}
+  />
+</div>
+
+<style lang="scss">
+  .cover-channel {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+
+    &.show::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 1px solid transparent;
+      border-radius: 0.25rem;
+      opacity: 0.95;
+    }
+    &.show.copied::before {
+      border-color: var(--theme-divider-color);
+    }
+    &.show::after {
+      content: attr(data-tooltip);
+      position: absolute;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      min-width: 0;
+      top: 50%;
+      left: 50%;
+      width: calc(100% - 0.5rem);
+      text-align: center;
+      font-size: 0.75rem;
+      color: var(--theme-content-color);
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .editor-container {
+    padding: 0.5rem;
+    background-color: var(--theme-popup-color);
+    border: 1px solid var(--theme-popup-divider);
+    border-radius: 0.75rem;
+    box-shadow: var(--theme-popup-shadow);
+  }
+</style>
diff --git a/plugins/view-resources/src/index.ts b/plugins/view-resources/src/index.ts
index 82b24c9727..4596be7796 100644
--- a/plugins/view-resources/src/index.ts
+++ b/plugins/view-resources/src/index.ts
@@ -44,6 +44,8 @@ import ValueFilter from './components/filter/ValueFilter.svelte'
 import HTMLEditor from './components/HTMLEditor.svelte'
 import HTMLPresenter from './components/HTMLPresenter.svelte'
 import HyperlinkPresenter from './components/HyperlinkPresenter.svelte'
+import HyperlinkEditor from './components/HyperlinkEditor.svelte'
+import HyperlinkEditorPopup from './components/HyperlinkEditorPopup.svelte'
 import IntlStringPresenter from './components/IntlStringPresenter.svelte'
 import GithubPresenter from './components/linkPresenters/GithubPresenter.svelte'
 import YoutubePresenter from './components/linkPresenters/YoutubePresenter.svelte'
@@ -202,6 +204,8 @@ export default async (): Promise<Resources> => ({
     StringEditor,
     StringPresenter,
     HyperlinkPresenter,
+    HyperlinkEditor,
+    HyperlinkEditorPopup,
     NumberEditor,
     NumberPresenter,
     BooleanPresenter,
diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts
index bed0f8ceb0..9d26b48c79 100644
--- a/plugins/view/src/index.ts
+++ b/plugins/view/src/index.ts
@@ -832,7 +832,9 @@ const view = plugin(viewId, {
     Delete: '' as IntlString,
     Then: '' as IntlString,
     Or: '' as IntlString,
-    Subscribed: '' as IntlString
+    Subscribed: '' as IntlString,
+    HyperlinkPlaceholder: '' as IntlString,
+    CopyToClipboard: '' as IntlString
   },
   icon: {
     Table: '' as Asset,