Merge pull request Expensify#88768 from aswin-s/feat/add-share-option-to-saved-searches

Add share option to saved searches overflow menu

Author: aldo-expensify

src/components/ThreeDotsMenu/index.tsx

@@ -65,7 +65,7 @@ function ThreeDotsMenu({
     };
 
     const hidePopoverMenu = useCallback((selectedItem?: PopoverMenuItem) => {
-        if (selectedItem?.shouldKeepModalOpen) {
+        if (selectedItem?.shouldKeepModalOpen || selectedItem?.shouldCloseModalOnSelect === false) {
             return;
         }
         setPopupMenuVisible(false);

src/hooks/useShareSavedSearch.ts

@@ -0,0 +1,41 @@
+import {useEffect, useRef, useState} from 'react';
+import Clipboard from '@libs/Clipboard';
+import ROUTES from '@src/ROUTES';
+import useEnvironment from './useEnvironment';
+
+// Matches the success state duration in useThrottledButtonState used by ContextMenuItem
+const SHARE_FEEDBACK_DURATION_MS = 1800;
+
+// Matches the shouldDelay close timing in hideContextMenu (ReportActionContextMenu.ts)
+const MENU_CLOSE_DELAY_MS = 800;
+
+function useShareSavedSearch() {
+    const {environmentURL} = useEnvironment();
+    const [copiedHash, setCopiedHash] = useState<number | null>(null);
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(() => {
+        return () => {
+            clearTimeout(timeoutRef.current ?? undefined);
+        };
+    }, []);
+
+    const handleShare = (itemHash: number, itemQuery: string) => {
+        const url = `${environmentURL}/${ROUTES.SEARCH_ROOT.getRoute({query: itemQuery})}`;
+        Clipboard.setString(url);
+        setCopiedHash(itemHash);
+
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            setCopiedHash((prev) => (prev === itemHash ? null : prev));
+            timeoutRef.current = null;
+        }, SHARE_FEEDBACK_DURATION_MS);
+    };
+
+    return {copiedHash, handleShare};
+}
+
+export {MENU_CLOSE_DELAY_MS};
+export default useShareSavedSearch;

src/languages/de.ts

@@ -7732,6 +7732,7 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
         deleteSavedSearchConfirm: 'Möchtest du diese Suche wirklich löschen?',
         searchName: 'Namen suchen',
         savedSearchesMenuItemTitle: 'Gespeichert',
+        urlCopied: 'URL kopiert',
         groupedExpenses: 'gruppierte Ausgaben',
         bulkActions: {
             editMultiple: 'Mehrere bearbeiten',

src/languages/en.ts

@@ -7753,6 +7753,7 @@ const translations = {
         deleteSavedSearchConfirm: 'Are you sure you want to delete this search?',
         searchName: 'Search name',
         savedSearchesMenuItemTitle: 'Saved',
+        urlCopied: 'URL copied',
         spendOverTime: 'Spend over time',
         groupedExpenses: 'grouped expenses',
         bulkActions: {

src/languages/es.ts

@@ -7574,6 +7574,7 @@ ${amount} para ${merchant} - ${date}`,
         view: {label: 'Ver', table: 'Tabla', bar: 'Barra', line: 'Línea', pie: 'Circular'},
         saveSearch: 'Guardar búsqueda',
         savedSearchesMenuItemTitle: 'Guardadas',
+        urlCopied: 'URL copiada',
         spendOverTime: 'Evolución de gastos',
         searchName: 'Nombre de la búsqueda',
         deleteSavedSearch: 'Eliminar búsqueda guardada',

src/languages/fr.ts

@@ -7754,6 +7754,7 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
         deleteSavedSearchConfirm: 'Voulez-vous vraiment supprimer cette recherche ?',
         searchName: 'Rechercher un nom',
         savedSearchesMenuItemTitle: 'Enregistré',
+        urlCopied: 'URL copiée',
         groupedExpenses: 'dépenses groupées',
         bulkActions: {
             editMultiple: 'Modifier plusieurs',

src/languages/it.ts

@@ -7723,6 +7723,7 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
         deleteSavedSearchConfirm: 'Sei sicuro di voler eliminare questa ricerca?',
         searchName: 'Cerca nome',
         savedSearchesMenuItemTitle: 'Salvato',
+        urlCopied: 'URL copiato',
         groupedExpenses: 'spese raggruppate',
         bulkActions: {
             editMultiple: 'Modifica multipli',

src/languages/ja.ts

@@ -7629,6 +7629,7 @@ ${reportName}
         deleteSavedSearchConfirm: 'この検索を削除してもよろしいですか？',
         searchName: '名前を検索',
         savedSearchesMenuItemTitle: '保存済み',
+        urlCopied: 'URLをコピーしました',
         groupedExpenses: 'グループ化された経費',
         bulkActions: {
             editMultiple: '複数を編集',

src/languages/nl.ts

@@ -7694,6 +7694,7 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`,
         deleteSavedSearchConfirm: 'Weet je zeker dat je deze zoekopdracht wilt verwijderen?',
         searchName: 'Zoeknaam',
         savedSearchesMenuItemTitle: 'Opgeslagen',
+        urlCopied: 'URL gekopieerd',
         groupedExpenses: 'gegroepeerde uitgaven',
         bulkActions: {
             editMultiple: 'Meerdere bewerken',

src/languages/pl.ts

@@ -7686,6 +7686,7 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`,
         deleteSavedSearchConfirm: 'Na pewno chcesz usunąć to wyszukiwanie?',
         searchName: 'Wyszukaj nazwę',
         savedSearchesMenuItemTitle: 'Zapisano',
+        urlCopied: 'URL skopiowany',
         groupedExpenses: 'zgrupowane wydatki',
         bulkActions: {
             editMultiple: 'Edytuj wiele',