Web: Files: Fixed lifetime tooltip for FilesSelector

packages/client/src/components/FilesSelector/index.tsx

@@ -498,6 +498,8 @@ const FilesSelector = ({
     isRestore
   );
 
+  const titleIconTooltip = t("Files:RoomFilesLifetime", { days: 12 }); // TODO: days
+
   const SelectorBody = (
     <Selector
       withHeader={withHeader}
@@ -563,6 +565,7 @@ const FilesSelector = ({
       cancelButtonId={
         isMove || isCopy || isRestore ? "select-file-modal-cancel" : ""
       }
+      titleIconTooltip={titleIconTooltip}
     />
   );
 

packages/components/selector/Selector.types.ts

@@ -80,4 +80,5 @@ export type SelectorProps = {
   acceptButtonId?: string;
   cancelButtonId?: string;
   isChecked?: boolean;
+  titleIconTooltip?: string;
 };

packages/components/selector/index.tsx

@@ -84,6 +84,7 @@ const Selector = ({
   acceptButtonId,
   cancelButtonId,
   isChecked,
+  titleIconTooltip,
 }: SelectorProps) => {
   const [footerVisible, setFooterVisible] = React.useState<boolean>(false);
   const [isSearch, setIsSearch] = React.useState<boolean>(false);
@@ -350,6 +351,7 @@ const Selector = ({
         withFooterInput={withFooterInput}
         withFooterCheckbox={withFooterCheckbox}
         descriptionText={descriptionText}
+        titleIconTooltip={titleIconTooltip}
       />
 
       {(footerVisible || alwaysShowFooter) && (

packages/components/selector/sub-components/Body/Body.types.ts

@@ -43,4 +43,5 @@ export type BodyProps = {
   withFooterCheckbox?: boolean;
 
   descriptionText?: string;
+  titleIconTooltip?: string;
 };

packages/components/selector/sub-components/Body/index.tsx

@@ -66,6 +66,7 @@ const Body = ({
   withFooterCheckbox,
   descriptionText,
   withHeader,
+  titleIconTooltip,
 }: BodyProps) => {
   const [bodyHeight, setBodyHeight] = React.useState(0);
 
@@ -224,6 +225,7 @@ const Body = ({
                     isMultiSelect,
                     rowLoader,
                     isItemLoaded,
+                    titleIconTooltip,
                   }}
                   itemSize={48}
                   onItemsRendered={onItemsRendered}

packages/components/selector/sub-components/Item/Item.types.ts

@@ -18,6 +18,7 @@ export type Data = {
   isMultiSelect: boolean;
   isItemLoaded: (index: number) => boolean;
   rowLoader: any;
+  titleIconTooltip?: string;
 };
 
 export type ItemProps = {

packages/components/selector/sub-components/Item/index.tsx

@@ -31,8 +31,14 @@ const compareFunction = (prevProps: ItemProps, nextProps: ItemProps) => {
 };
 
 const Item = React.memo(({ index, style, data }: ItemProps) => {
-  const { items, onSelect, isMultiSelect, isItemLoaded, rowLoader }: Data =
-    data;
+  const {
+    items,
+    onSelect,
+    isMultiSelect,
+    isItemLoaded,
+    rowLoader,
+    titleIconTooltip,
+  }: Data = data;
 
   const isLoaded = isItemLoaded(index);
 
@@ -96,7 +102,7 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
             {label}
           </Text>
 
-          {true && (
+          {titleIconTooltip && (
             <>
               <ReactSVG
                 data-tooltip-id="iconTooltip"
@@ -108,7 +114,7 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
                 place="bottom"
                 getContent={() => (
                   <Text fontSize="12px" fontWeight={400} noSelect>
-                    aaaaaaaaaa
+                    {titleIconTooltip}
                   </Text>
                 )}
                 maxWidth="300px"