✨ Add test AB renaming "Libraries" to "Add library"

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.config :as cf]
    [app.main.data.modal :as modal]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.assets :as dwa]
@@ -86,6 +87,10 @@
         section        (:section filters)
         ordering       (:ordering filters)
         reverse-sort?  (= :desc ordering)
+        num-libs       (count (mf/deref refs/workspace-libraries))
+
+        show-templates-02-test?
+        (and (cf/external-feature-flag "templates-02" "test") (zero? num-libs))
 
         toggle-ordering
         (mf/use-fn
@@ -155,38 +160,44 @@
     [:article  {:class (stl/css :assets-bar)}
      [:div {:class (stl/css :assets-header)}
       (when-not ^boolean read-only?
-        [:button {:class (stl/css :libraries-button)
+        (if show-templates-02-test?
-                  :on-click show-libraries-dialog
+          [:button {:class (stl/css :add-library-button)
-                  :data-testid "libraries"}
+                    :on-click show-libraries-dialog
-         [:span {:class (stl/css :libraries-icon)}
+                    :data-testid "libraries"}
-          i/library]
+           (tr "workspace.assets.add-library")]
-         (tr "workspace.assets.libraries")])
+          [:button {:class (stl/css :libraries-button)
+                    :on-click show-libraries-dialog
+                    :data-testid "libraries"}
+           [:span {:class (stl/css :libraries-icon)}
+            i/library]
+           (tr "workspace.assets.libraries")]))
 
-      [:div {:class (stl/css :search-wrapper)}
+      (when-not show-templates-02-test?
-       [:& search-bar {:on-change on-search-term-change
+        [:div {:class (stl/css :search-wrapper)}
-                       :value term
+         [:& search-bar {:on-change on-search-term-change
-                       :placeholder (tr "workspace.assets.search")}
+                         :value term
-        [:button
+                         :placeholder (tr "workspace.assets.search")}
-         {:on-click on-open-menu
+          [:button
-          :title (tr "workspace.assets.filter")
+           {:on-click on-open-menu
-          :class (stl/css-case :section-button true
+            :title (tr "workspace.assets.filter")
-                               :opened menu-open?)}
+            :class (stl/css-case :section-button true
-         i/filter-icon]]
+                                 :opened menu-open?)}
-       [:> context-menu*
+           i/filter-icon]]
-        {:on-close on-menu-close
+         [:> context-menu*
-         :selectable true
+          {:on-close on-menu-close
-         :selected section
+           :selectable true
-         :show menu-open?
+           :selected section
-         :fixed true
+           :show menu-open?
-         :min-width true
+           :fixed true
-         :width size
+           :min-width true
-         :top 158
+           :width size
-         :left 18
+           :top 158
-         :options options}]
+           :left 18
-       [:> icon-button* {:variant "ghost"
+           :options options}]
-                         :aria-label (tr "workspace.assets.sort")
+         [:> icon-button* {:variant "ghost"
-                         :on-click toggle-ordering
+                           :aria-label (tr "workspace.assets.sort")
-                         :icon (if reverse-sort? "asc-sort" "desc-sort")}]]]
+                           :on-click toggle-ordering
+                           :icon (if reverse-sort? "asc-sort" "desc-sort")}]])]
 
      [:& (mf/provider cmm/assets-filters) {:value filters}
       [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}

frontend/src/app/main/ui/workspace/sidebar/assets.scss

@@ -25,34 +25,50 @@
   width: 100%;
   margin-bottom: $s-4;
   border-radius: $s-8;
+
   .libraries-icon {
     @include flexCenter;
     width: $s-24;
     height: 100%;
+
     svg {
       @include flexCenter;
       @extend .button-icon;
       stroke: var(--icon-foreground);
     }
   }
+
   &:hover {
     background-color: var(--button-secondary-background-color-hover);
     color: var(--button-secondary-foreground-color-hover);
     border: $s-1 solid var(--button-secondary-border-color-hover);
+
     svg {
       stroke: var(--button-secondary-foreground-color-hover);
     }
   }
+
   &:focus {
     background-color: var(--button-secondary-background-color-focus);
     color: var(--button-secondary-foreground-color-focus);
     border: $s-1 solid var(--button-secondary-border-color-focus);
+
     svg {
       stroke: var(--button-secondary-foreground-color-focus);
     }
   }
 }
 
+.add-library-button {
+  @extend .button-primary;
+  text-transform: uppercase;
+  gap: $s-2;
+  height: $s-32;
+  width: 100%;
+  margin-bottom: $s-4;
+  border-radius: $s-8;
+}
+
 .section-button {
   @include flexCenter;
   @include buttonStyle;
@@ -62,32 +78,39 @@
   border: $s-1 solid var(--input-border-color-rest);
   border-radius: $br-8 $br-2 $br-2 $br-8;
   background-color: var(--input-background-color-rest);
+
   svg {
     height: $s-16;
     width: $s-16;
     stroke: var(--icon-foreground);
   }
+
   &:focus {
     border: $s-1 solid var(--input-border-color-focus);
     outline: 0;
     background-color: var(--input-background-color-focus);
     color: var(--input-foreground-color-focus);
+
     svg {
       background-color: var(--input-background-color-focus);
     }
   }
+
   &:hover {
     border: $s-1 solid var(--input-border-color-hover);
     background-color: var(--input-background-color-hover);
+
     svg {
       background-color: var(--input-background-color-hover);
       stroke: var(--button-foreground-hover);
     }
+
     &:focus {
       border: $s-1 solid var(--input-border-color-focus);
       outline: 0;
       background-color: var(--input-background-color-focus);
       color: var(--input-foreground-color-focus);
+
       svg {
         background-color: var(--input-background-color-focus);
       }

frontend/translations/en.po

@@ -4064,6 +4064,9 @@ msgstr "Group name"
 msgid "workspace.assets.libraries"
 msgstr "Libraries"
 
+msgid "workspace.assets.add-library"
+msgstr "Add library"
+
 #: src/app/main/ui/workspace/sidebar/assets/components.cljs:523
 msgid "workspace.assets.list-view"
 msgstr "List view"

frontend/translations/es.po

@@ -4064,6 +4064,9 @@ msgstr "Nombre del grupo"
 msgid "workspace.assets.libraries"
 msgstr "Bibliotecas"
 
+msgid "workspace.assets.add-library"
+msgstr "Añadir biblioteca"
+
 #: src/app/main/ui/workspace/sidebar/assets/components.cljs:523
 msgid "workspace.assets.list-view"
 msgstr "Ver como lista"