Improvements in Saved Search and Reset Password Modules (#3025)

frontend/app/components/ForgotPassword/ResetPasswordRequest.tsx

@@ -4,6 +4,7 @@ import ReCAPTCHA from 'react-google-recaptcha';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import { Form, Input, Button, Typography } from 'antd';
+import {SquareArrowOutUpRight} from 'lucide-react';
 
 function ResetPasswordRequest() {
   const { userStore } = useStore();
@@ -100,9 +101,9 @@ function ResetPasswordRequest() {
               <Icon name="envelope-x" size="30" color="red" />
             </div>
             {smtpError ? (
-              <Typography.Text>SMTP configuration is missing. Follow <a
-                href="https://docs.openreplay.com/en/configuration/configure-smtp/" className="link"
-                target="_blank">this</a> guide to enable password reset.</Typography.Text>
+              <Typography.Text>Email delivery failed due to invalid SMTP configuration. Please contact your admin. <a
+                href="https://docs.openreplay.com/en/configuration/configure-smtp/" className="!text-neutral-900 hover:!underline flex items-center justify-center gap-1 mt-2"
+                target="_blank">Learn More <SquareArrowOutUpRight size={12} strokeWidth={1.5} className='inline' /></a></Typography.Text>
             ) : <Typography.Text>{error}</Typography.Text>}
           </div>
         )}

frontend/app/components/shared/Filters/FilterList/FilterList.tsx

@@ -87,8 +87,8 @@ export const FilterList = observer((props: Props) => {
             key={`${filter.key}-${filterIndex}`}
             className={'hover:bg-active-blue px-5 '}
             style={{
-              marginLeft: '-1.25rem',
-              width: 'calc(100% + 2.5rem)'
+              marginLeft: '-1rem',
+              width: 'calc(100% + 2rem)'
             }}
           >
             <FilterItem

frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx

@@ -98,7 +98,7 @@ function SaveSearchModal({ show, closeHandler, rename = false }: Props) {
         <div className="mr-auto flex items-center">
           <Button variant="primary" onClick={onSave} loading={loading} disabled={!savedSearch.validate()}
                   className="mr-2">
-            {savedSearch.exists() ? 'Update' : 'Create'}
+            {savedSearch.exists() ? 'Update' : 'Save'}
           </Button>
           <Button onClick={closeHandler}>{'Cancel'}</Button>
         </div>

frontend/app/components/shared/SavedSearch/SavedSearch.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Button } from 'antd';
-import { MoreOutlined } from "@ant-design/icons";
+import { Button, Tooltip } from 'antd';
+import { MoreOutlined, SaveOutlined } from "@ant-design/icons";
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import SaveSearchModal from "../SaveSearchModal/SaveSearchModal";
@@ -18,19 +18,27 @@ function SavedSearch() {
     if (searchStore.instance.filters.length === 0) return;
     setShowModal(true);
   }
+  const isDisabled = searchStore.instance.filters.length === 0;
 
   const toggleList = () => {
     showListModal(<SavedSearchModal />, { right: true });
   }
+
   return (
     <>
-      <div style={{ display: 'inline-flex' }}>
-        <Button onClick={toggleModal} disabled={searchStore.instance.filters.length === 0} style={{ borderRadius: '0.5rem 0 0 0.5rem', borderRight: 0 }}>
-          {savedSearch.exists() ? 'Update' : 'Save'} Search
-        </Button>
-        <Button disabled={searchStore.list.length === 0} onClick={toggleList} style={{ borderRadius: '0 0.5rem 0.5rem 0' }}>
-          <MoreOutlined />
-        </Button>
+      <div className="flex gap-2">
+      <Tooltip title={searchStore.list.length === 0 ? "You have not saved any searches" : ""}>
+          <Button disabled={searchStore.list.length === 0} onClick={toggleList} className="px-2"  type="text">
+            Saved Searches
+          </Button>
+        </Tooltip>
+
+        <Tooltip title={isDisabled ? "Add an event or filter to save search" : "Save search filters"}>
+          <Button onClick={toggleModal} disabled={isDisabled} className="px-2" type="text">
+            {/* {savedSearch.exists() ? 'Update' : 'Save'} Search */}
+            <SaveOutlined />
+          </Button>
+        </Tooltip>
       </div>
       {showModal && (
         <SaveSearchModal

frontend/app/components/shared/SearchActions/SearchActions.tsx

@@ -3,7 +3,7 @@ import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import SavedSearch from '../SavedSearch/SavedSearch';
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import AiSessionSearchField from 'Shared/SessionFilters/AiSessionSearchField';
 
 function SearchActions() {
@@ -38,15 +38,17 @@ function SearchActions() {
         <h2 className="text-2xl capitalize mr-4">{title}</h2>
         {isSaas && showAiField ? <AiSessionSearchField /> : null}
         <div className={'ml-auto'} />
+        <SavedSearch />
+        <Tooltip title='Clear Search Filters'>
         <Button
-          type="link"
+          type="text"
           disabled={!hasSearch}
           onClick={() => searchStore.clearSearch()}
-          className="font-medium"
+          className="px-2"
         >
           Clear
         </Button>
-        <SavedSearch />
+        </Tooltip>
       </div>
       {showPanel ? (
         <>