🎉 Add A/B test to start directly at the workspace

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>

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}])

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;
   }

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))

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}

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;

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

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