From b852dc86c0cddc439a870aff3b2805bf504e2f43 Mon Sep 17 00:00:00 2001
From: Pablo Alba <pablo.alba@kaleidos.net>
Date: Wed, 23 Oct 2024 17:47:47 +0200
Subject: [PATCH] :tada: Add A/B test to start directly at the workspace

---
 frontend/resources/images/icons/share.svg     |  1 +
 frontend/src/app/main/ui/dashboard/team.cljs  |  5 +++++
 frontend/src/app/main/ui/dashboard/team.scss  | 13 ++++++++++++
 frontend/src/app/main/ui/icons.cljs           |  1 +
 .../app/main/ui/workspace/right_header.cljs   | 20 +++++++++++++++++-
 .../app/main/ui/workspace/right_header.scss   | 21 +++++++++++++++++++
 frontend/translations/en.po                   |  7 +++++++
 frontend/translations/es.po                   |  7 +++++++
 8 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 frontend/resources/images/icons/share.svg

diff --git a/frontend/resources/images/icons/share.svg b/frontend/resources/images/icons/share.svg
new file mode 100644
index 000000000..2c0d41de6
--- /dev/null
+++ b/frontend/resources/images/icons/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" fill="none" viewBox="0 0 14 15"><path stroke="#8F9DA3" stroke-linejoin="round" d="m4.727 8.673 4.553 2.654m-.007-7.32L4.727 6.66M13 3a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM5 7.667a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm8 4.666a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs
index 5524253e4..f6fa8561b 100644
--- a/frontend/src/app/main/ui/dashboard/team.cljs
+++ b/frontend/src/app/main/ui/dashboard/team.cljs
@@ -199,11 +199,16 @@
 
 
     [:div {:class (stl/css-case :modal-team-container true
+                                :modal-team-container-workspace (= origin :workspace)
                                 :hero (= origin :hero))}
      [:& fm/form {:on-submit on-submit :form form}
       [:div {:class (stl/css :modal-title)}
        (tr "modals.invite-team-member.title")]
 
+      (when (= :workspace origin)
+        [:div {:class (stl/css :invite-team-member-text)}
+         (tr "modals.invite-team-member.text")])
+
       (when-not (= "" @error-text)
         [:& context-notification {:content  @error-text
                                   :level :error}])
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index f22e4e85f..977e97b92 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -446,12 +446,17 @@
   width: $s-400;
   padding: $s-32;
   background-color: var(--modal-background-color);
+
   &.hero {
     top: $s-216;
     right: $s-32;
   }
 }
 
+.modal-team-container-workspace {
+  top: $s-40;
+}
+
 .modal-title {
   @include headlineMediumTypography;
   height: $s-32;
@@ -469,6 +474,12 @@
   transform: rotate(90deg);
 }
 
+.invite-team-member-text {
+  @include bodyLargeTypography;
+  margin: 0 0 $s-16 0;
+  color: var(--modal-title-foreground-color);
+}
+
 .role-title {
   @include bodyLargeTypography;
   margin: 0;
@@ -538,9 +549,11 @@
 
 .action-buttons {
   @extend .modal-action-btns;
+
   button {
     @extend .modal-accept-btn;
   }
+
   .cancel-button {
     @extend .modal-cancel-btn;
   }
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index df8f1bf3a..ae0e8d250 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -203,6 +203,7 @@
 (def ^:icon row-reverse (icon-xref :row-reverse))
 (def ^:icon search (icon-xref :search))
 (def ^:icon separate-nodes (icon-xref :separate-nodes))
+(def ^:icon share (icon-xref :share))
 (def ^:icon shown (icon-xref :shown))
 (def ^:icon size-horizontal (icon-xref :size-horizontal))
 (def ^:icon size-vertical (icon-xref :size-vertical))
diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs
index c73a738a6..5c1cc9df0 100644
--- a/frontend/src/app/main/ui/workspace/right_header.cljs
+++ b/frontend/src/app/main/ui/workspace/right_header.cljs
@@ -7,7 +7,9 @@
 (ns app.main.ui.workspace.right-header
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.config :as cf]
    [app.main.data.events :as ev]
+   [app.main.data.modal :as modal]
    [app.main.data.shortcuts :as scd]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.drawing.common :as dwc]
@@ -158,6 +160,8 @@
 
         input-ref         (mf/use-ref nil)
 
+        team              (mf/deref refs/team)
+
         nav-to-viewer
         (mf/use-fn
          (mf/deps file-id page-id)
@@ -194,7 +198,15 @@
                        (dw/clear-edition-mode)))
 
            (st/emit! (-> (dw/toggle-layout-flag :document-history)
-                         (vary-meta assoc ::ev/origin "workspace-header")))))]
+                         (vary-meta assoc ::ev/origin "workspace-header")))))
+
+        open-share-dialog
+        (mf/use-fn
+         (mf/deps team)
+         (fn []
+           (st/emit! (modal/show {:type :invite-members
+                                  :team team
+                                  :origin :workspace}))))]
 
     (mf/with-effect [editing?]
       (when ^boolean editing?
@@ -238,6 +250,12 @@
           :on-click toggle-history}
          i/history]])
 
+     (when (cf/external-feature-flag "share-01" "test")
+       [:a {:class (stl/css :viewer-btn)
+            :title (tr "workspace.header.share")
+            :on-click open-share-dialog}
+        i/share])
+
      [:a {:class (stl/css :viewer-btn)
           :title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
           :on-click nav-to-viewer}
diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss
index db97015a1..03054d364 100644
--- a/frontend/src/app/main/ui/workspace/right_header.scss
+++ b/frontend/src/app/main/ui/workspace/right_header.scss
@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @import "refactor/common-refactor.scss";
+
 .workspace-header-right {
   display: flex;
   justify-content: space-between;
@@ -35,6 +36,7 @@
   max-width: $s-48;
   width: $s-48;
   border-radius: $br-8;
+
   .label {
     @include bodySmallTypography;
     height: 100%;
@@ -47,6 +49,7 @@
       color: var(--button-tertiary-foreground-color-focus);
     }
   }
+
   &.selected {
     .label {
       color: var(--button-tertiary-foreground-color-focus);
@@ -87,16 +90,21 @@
   height: $s-28;
   border-radius: $br-8;
 }
+
 .zoom-option {
   @extend .menu-item-base;
+
   .shortcuts {
     @extend .shortcut-base;
+
     .shortcut-key {
       @extend .shortcut-key-base;
     }
   }
+
   &:hover {
     color: var(--menu-foreground-color-hover);
+
     .shortcuts {
       .shortcut-key {
         color: var(--menu-foreground-color-hover);
@@ -112,18 +120,22 @@
   height: $s-28;
   width: $s-28;
   border: none;
+
   svg {
     @extend .button-icon;
     stroke: var(--icon-foreground);
     height: $s-16;
     width: $s-16;
   }
+
   &:hover {
     background-color: transparent;
     border: none;
   }
+
   &.selected {
     background-color: var(--button-tertiary-background-color-selected);
+
     svg {
       stroke: var(--button-tertiary-foreground-color-active);
     }
@@ -137,18 +149,22 @@
   height: $s-28;
   width: $s-28;
   border: none;
+
   svg {
     @extend .button-icon;
     stroke: var(--icon-foreground);
     height: $s-16;
     width: $s-16;
   }
+
   &:hover {
     background-color: transparent;
     border: none;
   }
+
   &.selected {
     background-color: var(--button-tertiary-background-color-selected);
+
     svg {
       stroke: var(--button-tertiary-foreground-color-active);
     }
@@ -167,6 +183,7 @@
   height: $s-24;
   margin: 0;
   border-radius: $br-circle;
+
   svg {
     @extend .button-icon;
     stroke: var(--status-widget-icon-foreground-color);
@@ -179,6 +196,7 @@
 
 .saving-status {
   background-color: var(--status-widget-background-color-pending);
+
   svg {
     animation: spin-animation 1s infinite;
     animation-timing-function: linear;
@@ -193,6 +211,7 @@
   background-color: var(--status-widget-background-color-error);
 }
 
+.share-btn,
 .viewer-btn {
   @extend .button-tertiary;
   border-radius: $br-8;
@@ -200,12 +219,14 @@
   width: $s-28;
   height: $s-28;
   border: none;
+
   svg {
     @extend .button-icon;
     height: $s-16;
     width: $s-16;
     stroke: var(--icon-foreground);
   }
+
   &:hover {
     background-color: transparent;
     border: none;
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index d2ccf16eb..0e6e00b45 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -2482,6 +2482,9 @@ msgstr ""
 msgid "modals.invite-team-member.title"
 msgstr "Invite members to the team"
 
+msgid "modals.invite-team-member.text"
+msgstr "You can invite members to the team so they can access to this file and all of the team files."
+
 #: src/app/main/ui/dashboard/sidebar.cljs:423, src/app/main/ui/dashboard/team.cljs:412
 msgid "modals.leave-and-close-confirm.hint"
 msgstr ""
@@ -4376,6 +4379,10 @@ msgstr "Saving"
 msgid "workspace.header.unsaved"
 msgstr "Unsaved changes"
 
+#: src/app/main/ui/workspace/right_header.cljs:241
+msgid "workspace.header.share"
+msgstr "Share"
+
 #: src/app/main/ui/workspace/right_header.cljs:239
 msgid "workspace.header.viewer"
 msgstr "View mode (%s)"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index ee1217c3f..00b4de6af 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -2465,6 +2465,9 @@ msgstr ""
 msgid "modals.invite-team-member.title"
 msgstr "Invitar a miembros al equipo"
 
+msgid "modals.invite-team-member.text"
+msgstr "Puedes invitar miembros al equipo para que puedan acceder a este fichero y a todos los demás ficheros del equipo."
+
 #: src/app/main/ui/dashboard/sidebar.cljs:423, src/app/main/ui/dashboard/team.cljs:412
 msgid "modals.leave-and-close-confirm.hint"
 msgstr ""
@@ -4352,6 +4355,10 @@ msgstr "Guardando"
 msgid "workspace.header.unsaved"
 msgstr "Cambios sin guardar"
 
+#: src/app/main/ui/workspace/right_header.cljs:241
+msgid "workspace.header.share"
+msgstr "Compartir"
+
 #: src/app/main/ui/workspace/right_header.cljs:239
 msgid "workspace.header.viewer"
 msgstr "Modo de visualización (%s)"