[web] Tags/color picker tweaks (#12595)

* Change wording of tags header and hide uncategorized when tags list is empty

* Add a tooltip on the colour picker more button

* Fix linting

GitOrigin-RevId: 07e1c411c2c9f6f66e0a00c1610af662b829c4e4

services/web/frontend/extracted-translations.json

@@ -106,6 +106,7 @@
   "chat_error": "",
   "checking_dropbox_status": "",
   "checking_project_github_status": "",
+  "choose_a_custom_color": "",
   "clear_cached_files": "",
   "clear_search": "",
   "click_here_to_view_sl_in_lng": "",
@@ -562,6 +563,7 @@
   "open_project": "",
   "optional": "",
   "or": "",
+  "organize_projects": "",
   "other_logs_and_files": "",
   "other_output_files": "",
   "overall_theme": "",

services/web/frontend/js/features/project-list/components/color-picker/color-picker.tsx

@@ -2,6 +2,8 @@ import Icon from '../../../../shared/components/icon'
 import useSelectColor from '../../hooks/use-select-color'
 import { SketchPicker } from 'react-color'
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Tooltip from '../../../../shared/components/tooltip'
 
 const PRESET_COLORS: ReadonlyArray<string> = [
   '#A7B1C2',
@@ -39,6 +41,7 @@ function ColorPickerItem({ color }: ColorPickerItemProps) {
 }
 
 function MoreButton() {
+  const { t } = useTranslation()
   const {
     selectedColor,
     selectColor,
@@ -70,13 +73,19 @@ function MoreButton() {
             : 'white',
         }}
       >
-        {isCustomColorSelected ? (
-          <Icon type="check" className="color-picker-item-icon" />
-        ) : showCustomPicker ? (
-          <Icon type="chevron-down" className="color-picker-more-open" />
-        ) : (
-          <Icon type="plus" className="color-picker-more" />
-        )}
+        <Tooltip
+          id="tooltip-color-picker-plus"
+          description={t('choose_a_custom_color')}
+          overlayProps={{ delay: 0, placement: 'bottom' }}
+        >
+          {isCustomColorSelected ? (
+            <Icon type="check" className="color-picker-item-icon" />
+          ) : showCustomPicker ? (
+            <Icon type="chevron-down" className="color-picker-more-open" />
+          ) : (
+            <Icon type="plus" className="color-picker-more" />
+          )}
+        </Tooltip>
       </div>
       {showCustomPicker && (
         <>

services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx

@@ -32,7 +32,7 @@ export default function TagsList() {
   return (
     <>
       <li role="separator" className="separator">
-        <h2>{t('tags')}</h2>
+        <h2>{t('organize_projects')}</h2>
       </li>
       <li className="tag">
         <Button
@@ -103,20 +103,22 @@ export default function TagsList() {
           </li>
         )
       })}
-      <li
-        className={`tag untagged ${
-          selectedTagId === UNCATEGORIZED_KEY ? 'active' : ''
-        }`}
-      >
-        <Button
-          className="tag-name"
-          onClick={() => selectTag(UNCATEGORIZED_KEY)}
-          bsStyle={null}
+      {tags.length > 0 && (
+        <li
+          className={`tag untagged ${
+            selectedTagId === UNCATEGORIZED_KEY ? 'active' : ''
+          }`}
         >
-          <span className="name">{t('uncategorized')}</span>
-          <span className="subdued"> ({untaggedProjectsCount})</span>
-        </Button>
-      </li>
+          <Button
+            className="tag-name"
+            onClick={() => selectTag(UNCATEGORIZED_KEY)}
+            bsStyle={null}
+          >
+            <span className="name">{t('uncategorized')}</span>
+            <span className="subdued"> ({untaggedProjectsCount})</span>
+          </Button>
+        </li>
+      )}
       <CreateTagModal id="create-tag-modal" />
       <EditTagModal id="edit-tag-modal" />
       <DeleteTagModal id="delete-tag-modal" />

services/web/locales/en.json

@@ -209,6 +209,7 @@
   "checking": "Checking",
   "checking_dropbox_status": "Checking Dropbox status",
   "checking_project_github_status": "Checking project status in GitHub",
+  "choose_a_custom_color": "Choose a custom color",
   "choose_your_plan": "Choose your plan",
   "city": "City",
   "clear_cached_files": "Clear cached files",
@@ -1035,6 +1036,7 @@
   "or_create_project_left": "or create your first project on the left.",
   "organization": "Organization",
   "organization_type": "Organization Type",
+  "organize_projects": "Organize Projects",
   "other_actions": "Other Actions",
   "other_logs_and_files": "Other logs and files",
   "other_output_files": "Download other output files",

services/web/test/frontend/features/project-list/components/sidebar/tags-list.test.tsx

@@ -43,7 +43,7 @@ describe('<TagsList />', function () {
 
   it('displays the tags list', function () {
     screen.getByRole('heading', {
-      name: 'Tags',
+      name: 'Organize Projects',
     })
     screen.getByRole('button', {
       name: 'New Tag',