fix: remove divider for tree view actions + add tooltip for shared item (#545)

Author: PolinaGurinovich97

src/components/FileManager/FileManager.tsx

@@ -878,18 +878,22 @@ export const DialFileManagerView: FC = () => {
           });
         }
       }
+      if (!items.length) {
+        return elements;
+      }
 
-      if (elements.length > 0) {
-        return [
-          ...items,
-          {
-            key: 'divider',
-            type: DropdownItemType.Divider,
-          },
-          ...elements,
-        ];
+      if (!elements.length) {
+        return items;
       }
-      return items;
+
+      return [
+        ...items,
+        {
+          key: 'divider',
+          type: DropdownItemType.Divider,
+        },
+        ...elements,
+      ];
     },
     [
       treeOptions?.actionLabels,

src/components/FileManager/components/FileManagerItemIcon/FileManagerItemIcon.tsx

@@ -17,6 +17,7 @@ export interface DialFileManagerItemIconProps
   shared?: boolean;
   loading?: boolean;
   sharedIndicatorClassName?: string;
+  sharedIndicatorTooltip?: ReactNode;
 }
 
 /**
@@ -55,21 +56,26 @@ export interface DialFileManagerItemIconProps
  * @param {string} [props.label] - Accessible label for screen readers.
  * @param {ReactNode} [props.indicator] - Optional indicator to display over the icon.
  * @param {string} [props.sharedIndicatorClassName] - Optional CSS class for the shared indicator.
+ * @param  [sharedIndicatorTooltip] - Custom tooltip content for the shared indicator; defaults to "Shared"
  */
 export const DialFileManagerItemIcon: FC<DialFileManagerItemIconProps> = ({
   name,
   type,
   shared = false,
   loading = false,
   sharedIndicatorClassName,
+  sharedIndicatorTooltip,
   ...restProps
 }) => {
   const wrapIcon = (icon: ReactNode) => (
     <span className="inline-flex relative text-secondary" role="img">
       {icon}
       {shared && (
         <span className="absolute -bottom-0.5 -left-0.5">
-          <DialSharedEntityIndicator className={sharedIndicatorClassName} />
+          <DialSharedEntityIndicator
+            className={sharedIndicatorClassName}
+            sharedIndicatorTooltip={sharedIndicatorTooltip}
+          />
         </span>
       )}
     </span>
@@ -89,7 +95,10 @@ export const DialFileManagerItemIcon: FC<DialFileManagerItemIconProps> = ({
         className="text-secondary"
         indicator={
           shared ? (
-            <DialSharedEntityIndicator className={sharedIndicatorClassName} />
+            <DialSharedEntityIndicator
+              className={sharedIndicatorClassName}
+              sharedIndicatorTooltip={sharedIndicatorTooltip}
+            />
           ) : null
         }
         label="File type icon"

src/components/FileManager/components/FileManagerItemName/FileManagerItemName.tsx

@@ -18,6 +18,7 @@ export interface DialFileManagerItemNameProps
   loading?: boolean;
   shared?: boolean;
   details?: ReactNode;
+  sharedIndicatorTooltip?: ReactNode;
   validate?: (value: string) => string | null;
   onSave?: (value: string) => void;
   onCancel?: () => void;
@@ -69,6 +70,7 @@ export const DialFileManagerItemName: FC<DialFileManagerItemNameProps> = ({
   onCancel,
   inputContainerClassName,
   sharedIndicatorClassName,
+  sharedIndicatorTooltip,
   ...restProps
 }) => {
   const { value, invalid, invalidMessage, onChange, inputRef } =
@@ -116,6 +118,7 @@ export const DialFileManagerItemName: FC<DialFileManagerItemNameProps> = ({
       onChange={onChange}
       iconSize={iconSize}
       inputContainerClassName={inputContainerClassName}
+      sharedIndicatorTooltip={sharedIndicatorTooltip}
       sharedIndicatorClassName={sharedIndicatorClassName}
     />
   );

src/components/FileManager/components/FileManagerItemNameInput/FileManagerItemNameInput.tsx

@@ -25,6 +25,7 @@ export interface DialFileManagerItemNameInputProps {
   inputRef?: Ref<HTMLInputElement>;
   onChange?: (value?: string) => void;
   sharedIndicatorClassName?: string;
+  sharedIndicatorTooltip?: ReactNode;
 }
 
 /**
@@ -94,6 +95,7 @@ export const DialFileManagerItemNameInput: FC<
   inputRef,
   onChange,
   sharedIndicatorClassName,
+  sharedIndicatorTooltip,
 }) => {
   const getInputIconAfter = () => {
     if (!inputInvalid) return null;
@@ -124,6 +126,7 @@ export const DialFileManagerItemNameInput: FC<
         loading={loading}
         shared={shared}
         sharedIndicatorClassName={sharedIndicatorClassName}
+        sharedIndicatorTooltip={sharedIndicatorTooltip}
       />
       <DialInput
         containerClassName={mergeClasses(

src/components/FileName/FileName.tsx

@@ -13,6 +13,7 @@ export interface DialFileNameProps {
   iconSize?: number;
   details?: ReactNode;
   sharedIndicatorClassName?: string;
+  sharedIndicatorTooltip?: ReactNode;
 }
 
 /**
@@ -40,6 +41,7 @@ export interface DialFileNameProps {
  * @param iconSize - Icon size in px. Default: BASE_ICON_SIZE.
  * @param details - Optional metadata block displayed under the file name (e.g., size, modified date).
  * @param sharedIndicatorClassName - Additional CSS classes for the shared indicator.
+ * @param sharedIndicatorTooltip - Custom tooltip content for the shared indicator; defaults to "Shared"
  */
 export const DialFileName: FC<DialFileNameProps> = ({
   name,
@@ -48,6 +50,7 @@ export const DialFileName: FC<DialFileNameProps> = ({
   iconSize = BASE_ICON_SIZE,
   details,
   sharedIndicatorClassName,
+  sharedIndicatorTooltip,
 }) => {
   const extension = name.includes('.') ? name.split('.').pop() : undefined;
 
@@ -59,7 +62,10 @@ export const DialFileName: FC<DialFileNameProps> = ({
         className="text-secondary"
         indicator={
           shared ? (
-            <DialSharedEntityIndicator className={sharedIndicatorClassName} />
+            <DialSharedEntityIndicator
+              className={sharedIndicatorClassName}
+              sharedIndicatorTooltip={sharedIndicatorTooltip}
+            />
           ) : null
         }
         label="File type icon"

src/components/FolderName/FolderName.tsx

@@ -1,5 +1,5 @@
 import { mergeClasses } from '@/utils/merge-classes';
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { DialSharedEntityIndicator } from '@/components/SharedEntityIndicator/SharedEntityIndicator';
 import { DialEllipsisTooltip } from '@/components/EllipsisTooltip/EllipsisTooltip';
 import { DialIcon } from '@/components/Icon/Icon';
@@ -14,6 +14,7 @@ export interface DialFolderNameProps {
   iconSize?: number;
   className?: string;
   sharedIndicatorClassName?: string;
+  sharedIndicatorTooltip?: ReactNode;
 }
 
 /**
@@ -31,6 +32,7 @@ export interface DialFolderNameProps {
  * @param loading - If true, shows loading state. Default: false.
  * @param iconSize - Icon size in px. Default: BASE_ICON_SIZE.
  * @param sharedIndicatorClassName - Additional CSS classes for the shared indicator
+ * @param sharedIndicatorTooltip - Custom tooltip content for the shared indicator; defaults to "Shared"
  */
 export const DialFolderName: FC<DialFolderNameProps> = ({
   name,
@@ -39,6 +41,7 @@ export const DialFolderName: FC<DialFolderNameProps> = ({
   loading = false,
   iconSize = BASE_ICON_SIZE,
   sharedIndicatorClassName,
+  sharedIndicatorTooltip,
 }) => {
   const getIcon = () => {
     if (loading) {
@@ -58,7 +61,10 @@ export const DialFolderName: FC<DialFolderNameProps> = ({
         {getIcon()}
         {shared && (
           <span className="absolute z-50 -bottom-0.5 -left-0.5">
-            <DialSharedEntityIndicator className={sharedIndicatorClassName} />
+            <DialSharedEntityIndicator
+              className={sharedIndicatorClassName}
+              sharedIndicatorTooltip={sharedIndicatorTooltip}
+            />
           </span>
         )}
       </span>

src/components/SharedEntityIndicator/SharedEntityIndicator.tsx

@@ -4,13 +4,15 @@ import { DialIcon } from '@/components/Icon/Icon';
 
 import { mergeClasses } from '@/utils/merge-classes';
 import { IconArrowUpRight } from '@tabler/icons-react';
+import { DialTooltip } from '../Tooltip/Tooltip';
 
 export interface DialSharedEntityIndicatorProps {
   label?: ReactNode;
   size?: number;
   stroke?: number;
   className?: string;
   containerClassName?: string;
+  sharedIndicatorTooltip?: ReactNode;
 }
 
 /**
@@ -29,6 +31,7 @@ export interface DialSharedEntityIndicatorProps {
  * @param [className] - Additional Tailwind classes applied to the icon
  * @param [containerClassName] - Additional Tailwind classes appended to the container
  * @param [stroke=1.5] - Stroke width for the icon
+ * @param [sharedIndicatorTooltip] - Custom tooltip content, defaults to "Shared"
  *
  */
 export const DialSharedEntityIndicator: FC<DialSharedEntityIndicatorProps> = ({
@@ -37,22 +40,25 @@ export const DialSharedEntityIndicator: FC<DialSharedEntityIndicatorProps> = ({
   className,
   containerClassName,
   stroke = 1.5,
+  sharedIndicatorTooltip,
 }) => {
   return (
-    <DialIcon
-      className={mergeClasses(
-        'text-accent-primary flex bg-layer-3',
-        containerClassName,
-      )}
-      icon={
-        <IconArrowUpRight
-          size={size}
-          stroke={stroke}
-          aria-label={typeof label === 'string' ? label : undefined}
-          className={className}
-          role="img"
-        />
-      }
-    />
+    <DialTooltip tooltip={sharedIndicatorTooltip || 'Shared'}>
+      <DialIcon
+        className={mergeClasses(
+          'text-accent-primary flex bg-layer-3',
+          containerClassName,
+        )}
+        icon={
+          <IconArrowUpRight
+            size={size}
+            stroke={stroke}
+            aria-label={typeof label === 'string' ? label : undefined}
+            className={className}
+            role="img"
+          />
+        }
+      />
+    </DialTooltip>
   );
 };