Merge pull request #472 from testsigmahq/dev

[Dev] >>> Added custom PDF document, Updated Copilot docs, Removed 404 links and Fixed the Typesense input cache validation

scripts/indexr.js

@@ -29,19 +29,24 @@ const pageQuery = `
           fields {
             slug
           }
-          excerpt(pruneLength: 6700)
+          excerpt(pruneLength: 100)
         }
       }
     }
   }
 `;
 
 function pageToTypesenseRecord({ node }) {
-  const { id, frontmatter, ...rest } = node;
-  console.log('node', node);
+  const { id, frontmatter, fields = {}, headings = [], ...rest } = node;
+
+  const formattedHeadings = headings.map(h => h.value || '').filter(Boolean);
   return {
     objectID: id,
-    ...frontmatter,
+    title: frontmatter.title || '',
+    search_keyword: String(frontmatter.search_keyword || ''),
+    slug: fields.slug || '',
+    excerpt: frontmatter.excerpt || '',
+    headings: formattedHeadings,
     ...rest,
   };
 }

src/components/SearchHits.jsx

@@ -23,10 +23,10 @@ export const CustomSearchBox = connectSearchBox(SearchBox);
 /* eslint-disable react/no-danger */
 const Hits = ({ hits }) => (
     <ul className="style">
-        {hits.length < 1 ? <li>No search results found</li> : ''}
+        {hits.length < 1 ? <li className='px-5 py-3 rounded-lg text-center'>No search results found</li> : ''}
         {hits.map((hit) => (
             <li key={hit.title} className="shadow sm:rounded-lg">
-                <Link to={hit.fields.slug}>
+                <Link to={hit?.slug}>
                     <span className="search-title" dangerouslySetInnerHTML={{ __html: hit._highlightResult.title.value }} />
                     <p dangerouslySetInnerHTML={{ __html: hit._snippetResult.excerpt.value }} />
                 </Link>

src/components/SearchHits.scss

@@ -19,7 +19,7 @@ ais-highlight-0000000000 {
 
 .style {
   list-style: none;
-  padding-top: 20px;
+  padding-top: 14px;
   li {
     margin-bottom: 6px;
     background-color: #fff;
@@ -35,15 +35,15 @@ ais-highlight-0000000000 {
   }
   p {
     margin: 6px 0;
-    font-size: 16px;
+    font-size: 14px;
     line-height: 20px;
     overflow-wrap: break-word;
   }
 }
 
 .search-title {
   font-weight: 700;
-  font-size: 14px;
+  font-size: 16px;
   overflow-wrap: break-word;
   color: #0E5AD9;
 }

src/components/SearchInputBox.jsx

@@ -13,16 +13,11 @@ import { SearchHits } from './SearchHits';
 
 import TypesenseInstantsearchAdapter from "typesense-instantsearch-adapter";
 
-// window.$ = $;
-
-/* Algolia Search Bar */
 const ClickOutHandler = require('react-onclickout');
-
 // Create the Typesense InstantSearch Adapter instance
-
 // @ts-ignore
-console.log(process.env.TYPESENSE_SEARCH_API_KEY);
-console.log(process.env.TYPESENSE_HOST);
+// console.log(process.env.TYPESENSE_SEARCH_API_KEY);
+// console.log(process.env.TYPESENSE_HOST);
 const typesenseInstantsearchAdapter = new TypesenseInstantsearchAdapter({
   server: {
     apiKey: process.env.TYPESENSE_SEARCH_API_KEY, // Use your Typesense search-only API key here
@@ -43,6 +38,16 @@ const typesenseInstantsearchAdapter = new TypesenseInstantsearchAdapter({
 
 export const searchClient = typesenseInstantsearchAdapter.searchClient;
 
+const debounce = (func, delay) => {
+    let timer;
+    return function (...args) {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func.apply(this, args);
+        }, delay);
+    };
+};
+
 class SearchInputBox extends React.Component {
     constructor(props) {
         super(props);
@@ -52,29 +57,46 @@ class SearchInputBox extends React.Component {
             cookie: '',
             hasInput: false,
             refresh: false,
+            searchQuery: ''
         };
+
+        this.debouncedSearch = debounce(this.handleSearch, 300);
     }
 
-    // Algolia - clicking out exits searchbox
     onClickOut = (event) => {
         const searchInput = document.getElementsByClassName(
             'ais-SearchBox-input',
         )[0].value;
         const domNode = ReactDOM.findDOMNode(this);
         if (searchInput === '' || !domNode || !domNode.contains(event.target))
             this.setState({ hasInput: false });
-    } // end onClickOut
+    }
 
+    handleKeyUp = (event) => {
+        const query = event.currentTarget.value;
+        this.setState({
+            hasInput: query.length > 2,
+        });
 
-    /* eslint-enabe class-methods-use-this */
+        this.setState({ searchQuery: '' }, () => {
+            this.debouncedSearch(query);
+        });
+    }
+
+    handleSearch = (query) => {
+        console.log('Searching for:', query);
+        this.setState({ 
+            refresh: !this.state.refresh,
+            searchQuery: query
+        });
+    }
 
     render() {
         const {
-            refresh, hasInput
+            refresh, hasInput, searchQuery
         } = this.state;
         return (
             <>
-
                 <div className={!hasInput ? 'form-inline flex w-1/5 items-center pl-4' : 'form-inline flex w-1/5 items-center pl-4 float-searchBox'}>
                     <label htmlFor="search-lc" />
 
@@ -84,9 +106,8 @@ class SearchInputBox extends React.Component {
                             indexName={process.env.TYPESENSE_COLLECTION}
                             refresh={refresh}
                         >
-                            <Configure hitsPerPage={5} />
+                            <Configure hitsPerPage={10} />
 
-                            {/* forcefeed className because component does not accept natively as prop */}
                             <div className="search-icon">
                                 <svg
                                     width="15"
@@ -97,7 +118,6 @@ class SearchInputBox extends React.Component {
                                 >
                                     <path d="M8 16C9.77498 15.9996 11.4988 15.4054 12.897 14.312L17.293 18.708L18.707 17.294L14.311 12.898C15.405 11.4997 15.9996 9.77544 16 8C16 3.589 12.411 0 8 0C3.589 0 0 3.589 0 8C0 12.411 3.589 16 8 16ZM8 2C11.309 2 14 4.691 14 8C14 11.309 11.309 14 8 14C4.691 14 2 11.309 2 8C2 4.691 4.691 2 8 2Z" fill="black"/>
                                 </svg>
-
                             </div>
                             <SearchBox
                                 className="w-full pl-2"
@@ -107,30 +127,25 @@ class SearchInputBox extends React.Component {
                                 translations={{
                                     placeholder: 'Search',
                                 }}
-                                onKeyUp={(event) => {
-                                    this.setState({
-                                        hasInput: event.currentTarget.value.length > 2,
-                                    });
-                                }}
+                                onKeyUp={this.handleKeyUp}
                             />
 
                             <div className={!hasInput ? 'input-empty' : 'absolute bg-white search_results border'}>
                                 <div className="container">
                                     <div className="row">
                                         <div className="col-12">
-                                            <SearchHits hitComponent={Hits} />
+                                            {searchQuery && <SearchHits hitComponent={Hits} />}
                                         </div>
                                     </div>
                                     <div className="row">
                                         <div className="col-12">
-                                            <Pagination />
+                                            {searchQuery && <Pagination />}
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </InstantSearch>
                     </ClickOutHandler>
-
                 </div>
             </>
         );

src/pages/docs/contributing/open-source-dev-environment-setup/macos-and-intellij-ce.md

@@ -259,5 +259,5 @@ ng --version
         127.0.0.1       devos.testsigma.com
         ```
 
-- **You can now access the server at http://devos.testsigma.com/ui/**
+- **You can now access the server at https://devos.testsigma.com/ui/**
 ![Access Server](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/testsigma.png)

src/pages/docs/contributing/open-source-dev-environment-setup/macos-and-intellij-ue.md

@@ -245,5 +245,5 @@ Once the above configuration is done, we need to add UI, Server, and Agent as a
     127.0.0.1       devos.testsigma.com
     ```
 
-- **You can now access the server at http://devos.testsigma.com/ui/**
+- **You can now access the server at https://devos.testsigma.com/ui/**
 ![Access Testsigma](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/testsigma.png)

src/pages/docs/contributing/open-source-dev-environment-setup/windows-and-intelliJ-ue.md

@@ -109,7 +109,7 @@ RewriteEngine On
 RewriteCond %{HTTP_HOST} "devos.testsigma.com"
 RewriteCond %{REQUEST_URI} "^/$"
 #RewriteRule .* http://localhost:4202%{REQUEST_URI} [P]
-RewriteRule .* http://devos.testsigma.com/ui/ [L,R=301]
+RewriteRule .* https://devos.testsigma.com/ui/ [L,R=301]
 RewriteCond %{HTTP_HOST} "devos.testsigma.com"
 RewriteCond %{REQUEST_URI} "^/ui/"
 RewriteRule .* http://localhost:4202%{REQUEST_URI} [P]

src/pages/docs/debugging/debugging-localdevices-web.md

@@ -49,7 +49,7 @@ Before you begin debugging in Testsigma, ensure the following:
 
 1. Navigate to the test case you want to debug.
 2. On the test case details page, click the **Launch Debugger** button in the top right corner of the screen.
-3. On the Run in Debug Overlay, ensure the **Test Lab** is set to **Local Device** and that the **Agent** is in **Active Status** for debugging.
+3. On the Run in Debug Overlay, default the **Test Lab** is set to **Local Device** and that the **Agent** is in **Active Status** for debugging.
 4. To execute the test steps until a failed step, enable the **Run till failed step toggle** and set a debug point by selecting the test step from the dropdown. If this toggle is disabled, the test case will execute from start to end.
 5. Click **Debug now** to execute the test case. ![click launch debugger in test case details page](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/launch_debugger_in_web_application.gif)
 

src/pages/docs/debugging/launch-the-debugger-in-the-same-window.md

@@ -1,6 +1,6 @@
 ---
 title: "Launch Debugger in the Same Window"
-order: 10.4
+order: 10.5
 page_id: "Launch debugger"
 metadesc: "This article discusses in detail step-by-step guide on how to run tests in debugger mode in the same window as well as new window in Testsigma application."
 search_keyword: ""