@featurevisor/site 0.55.1 → 0.57.0

package/lib/components/SearchInput.d.ts

@@ -1,7 +1,2 @@
-import * as React from "react";
-interface SearchInputProps {
-    value: string;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-export declare function SearchInput(props: SearchInputProps): JSX.Element;
-export {};
+/// <reference types="react" />
+export declare function SearchInput(): JSX.Element;

package/lib/components/Tabs.d.ts

@@ -2,6 +2,7 @@
 interface Tab {
     title: string;
     to: string;
+    end?: boolean;
 }
 interface TabsProps {
     tabs: Tab[];

package/lib/hooks/useSearch.d.ts

@@ -0,0 +1,16 @@
+export declare function useSearch(): {
+    readonly searchQuery: string;
+    readonly features: (import("@featurevisor/types").ParsedFeature & {
+        lastModified?: import("@featurevisor/types").LastModified;
+    })[];
+    readonly segments: (import("@featurevisor/types").Segment & {
+        lastModified?: import("@featurevisor/types").LastModified;
+        usedInFeatures: string[];
+    })[];
+    readonly attributes: (import("@featurevisor/types").Attribute & {
+        lastModified?: import("@featurevisor/types").LastModified;
+        usedInSegments: string[];
+        usedInFeatures: string[];
+    })[];
+    readonly setSearchQuery: (value: any) => void;
+};

package/lib/hooks/useSearchIndex.d.ts

@@ -0,0 +1,4 @@
+import { SearchIndex } from "@featurevisor/types";
+export declare function useSearchIndex(): {
+    data: SearchIndex;
+};

package/lib/utils/index.d.ts

@@ -6,7 +6,7 @@ export interface Query {
     archived?: boolean;
     capture?: boolean;
 }
-export declare function getQueryFromString(q: string): Query;
+export declare function parseSearchQuery(queryString: string): Query;
 export declare function isEnabledInEnvironment(feature: any, environment: string): boolean;
 export declare function isEnabledInAnyEnvironment(feature: any): boolean;
 export declare function getFeaturesByQuery(query: Query, data: SearchIndex): (import("@featurevisor/types").ParsedFeature & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@featurevisor/site",
-  "version": "0.55.1",
+  "version": "0.57.0",
   "description": "Static site for Featurevisor",
   "main": "dist",
   "scripts": {
@@ -63,7 +63,7 @@
     "webpack-merge": "^5.10.0"
   },
   "dependencies": {
-    "@featurevisor/types": "^0.55.0"
+    "@featurevisor/types": "^0.57.0"
   },
-  "gitHead": "8d1f0d66978e079b695537e5575a2f2773614d60"
+  "gitHead": "62bd5cfb1b6f2f40747ad3abb3aa2562b3ec8aa7"
 }

package/src/components/App.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { Routes, Route, redirect } from "react-router-dom";
+import { Routes, Route, Navigate } from "react-router-dom";
 
 import { Header } from "./Header";
 import { Footer } from "./Footer";
@@ -63,9 +63,6 @@ export function App() {
         {fetchedSearchIndex && (
           <SearchIndexContext.Provider value={{ isLoaded: true, data: fetchedSearchIndex }}>
             <Routes>
-              {/* @TODO: try redirecting to /features */}
-              <Route path="/" element={<ListFeatures />} />
-
               <Route path="features">
                 <Route index element={<ListFeatures />} />
 
@@ -75,23 +72,11 @@ export function App() {
                   <Route path="variables" element={<DisplayFeatureVariablesSchema />} />
                   <Route path="rules" element={<DisplayFeatureRules />}>
                     <Route path=":environmentKey" element={<DisplayFeatureRulesTable />} />
-                    <Route
-                      path="*"
-                      loader={({ params }) =>
-                        /* @TODO: fix redirection */
-                        redirect(`/features/${params.featureKey}/rules/${environmentKeys[0]}`)
-                      }
-                    />
+                    <Route index element={<Navigate to={environmentKeys[0]} replace />} />
                   </Route>
                   <Route path="force" element={<DisplayFeatureForce />}>
                     <Route path=":environmentKey" element={<DisplayFeatureForceTable />} />
-                    <Route
-                      path="*"
-                      loader={({ params }) =>
-                        /* @TODO: fix redirection */
-                        redirect(`/features/${params.featureKey}/force/${environmentKeys[0]}`)
-                      }
-                    />
+                    <Route index element={<Navigate to={environmentKeys[0]} replace />} />
                   </Route>
                   <Route path="history" element={<DisplayFeatureHistory />} />
                 </Route>
@@ -118,6 +103,7 @@ export function App() {
               </Route>
 
               <Route path="history" element={<ListHistory />} />
+              <Route index element={<Navigate to="features" replace />} />
             </Routes>
           </SearchIndexContext.Provider>
         )}

package/src/components/HistoryTimeline.tsx

@@ -4,7 +4,7 @@ import { UserCircleIcon } from "@heroicons/react/20/solid";
 
 import { Alert } from "./Alert";
 import { PrettyDate } from "./PrettyDate";
-import { useSearchIndex } from "../hooks/searchIndexHook";
+import { useSearchIndex } from "../hooks/useSearchIndex";
 
 const entriesPerPage = 50;
 const initialMaxEntitiesCount = 10;

package/src/components/ListAttributes.tsx

@@ -1,30 +1,22 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
 
-import { SearchIndex } from "@featurevisor/types";
-import { useSearchIndex } from "../hooks/searchIndexHook";
-import { getQueryFromString, getAttributesByQuery } from "../utils";
 import { Tag } from "./Tag";
 import { Alert } from "./Alert";
 import { SearchInput } from "./SearchInput";
 import { PageTitle } from "./PageTitle";
 import { PageContent } from "./PageContent";
 import { LastModified } from "./LastModified";
+import { useSearch } from "../hooks/useSearch";
 
 export function ListAttributes() {
-  const [q, setQ] = React.useState("");
-
-  const contextValue = useSearchIndex();
-  const data = contextValue.data as SearchIndex;
-
-  const query = getQueryFromString(q);
-  const attributes = getAttributesByQuery(query, data);
+  const { attributes } = useSearch();
 
   return (
     <PageContent>
       <PageTitle>Attributes</PageTitle>
 
-      <SearchInput value={q} onChange={(e: any) => setQ(e.target.value)} />
+      <SearchInput />
 
       {attributes.length === 0 && <Alert type="warning">No results found</Alert>}
 

package/src/components/ListFeatures.tsx

@@ -3,9 +3,6 @@ import { Link } from "react-router-dom";
 
 import { TagIcon } from "@heroicons/react/20/solid";
 
-import { SearchIndex } from "@featurevisor/types";
-import { useSearchIndex } from "../hooks/searchIndexHook";
-import { getQueryFromString, getFeaturesByQuery } from "../utils";
 import { EnvironmentDot } from "./EnvironmentDot";
 import { Tag } from "./Tag";
 import { Alert } from "./Alert";
@@ -13,21 +10,16 @@ import { SearchInput } from "./SearchInput";
 import { PageTitle } from "./PageTitle";
 import { PageContent } from "./PageContent";
 import { LastModified } from "./LastModified";
+import { useSearch } from "../hooks/useSearch";
 
 export function ListFeatures() {
-  const [q, setQ] = React.useState("");
-
-  const contextValue = useSearchIndex();
-  const data = contextValue.data as SearchIndex;
-
-  const query = getQueryFromString(q);
-  const features = getFeaturesByQuery(query, data);
+  const { features } = useSearch();
 
   return (
     <PageContent>
       <PageTitle>Features</PageTitle>
 
-      <SearchInput value={q} onChange={(e: any) => setQ(e.target.value)} />
+      <SearchInput />
 
       {features.length === 0 && <Alert type="warning">No results found</Alert>}
 

package/src/components/ListSegments.tsx

@@ -1,30 +1,22 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
 
-import { SearchIndex } from "@featurevisor/types";
-import { useSearchIndex } from "../hooks/searchIndexHook";
-import { getQueryFromString, getSegmentsByQuery } from "../utils";
 import { Tag } from "./Tag";
 import { Alert } from "./Alert";
 import { SearchInput } from "./SearchInput";
 import { PageTitle } from "./PageTitle";
 import { PageContent } from "./PageContent";
 import { LastModified } from "./LastModified";
+import { useSearch } from "../hooks/useSearch";
 
 export function ListSegments() {
-  const [q, setQ] = React.useState("");
-
-  const contextValue = useSearchIndex();
-  const data = contextValue.data as SearchIndex;
-
-  const query = getQueryFromString(q);
-  const segments = getSegmentsByQuery(query, data);
+  const { segments } = useSearch();
 
   return (
     <PageContent>
       <PageTitle>Segments</PageTitle>
 
-      <SearchInput value={q} onChange={(e: any) => setQ(e.target.value)} />
+      <SearchInput />
 
       {segments.length === 0 && <Alert type="warning">No results found</Alert>}
 

package/src/components/SearchInput.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
+import { useSearch } from "../hooks/useSearch";
 
-interface SearchInputProps {
-  value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
+export function SearchInput() {
+  const { searchQuery, setSearchQuery } = useSearch();
 
-export function SearchInput(props: SearchInputProps) {
   return (
     <div className="relative px-6 pt-3.5">
       <div className="pointer-events-none absolute">
@@ -23,8 +21,8 @@ export function SearchInput(props: SearchInputProps) {
       </div>
       <input
         type="text"
-        value={props.value}
-        onChange={(e) => props.onChange(e)}
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
         placeholder="Type to search..."
         autoComplete="off"
         className="mb-4 mt-2 p-2 w-full rounded-full border border-slate-300 indent-8 text-xl text-gray-700 placeholder:text-gray-400"

package/src/components/ShowAttribute.tsx

@@ -5,7 +5,7 @@ import { PageContent } from "./PageContent";
 import { PageTitle } from "./PageTitle";
 import { Tabs } from "./Tabs";
 import { EditLink } from "./EditLink";
-import { useSearchIndex } from "../hooks/searchIndexHook";
+import { useSearchIndex } from "../hooks/useSearchIndex";
 import { Markdown } from "./Markdown";
 import { HistoryTimeline } from "./HistoryTimeline";
 

package/src/components/ShowFeature.tsx

@@ -6,7 +6,7 @@ import { PageTitle } from "./PageTitle";
 import { Tabs } from "./Tabs";
 import { HistoryTimeline } from "./HistoryTimeline";
 import { Tag } from "./Tag";
-import { useSearchIndex } from "../hooks/searchIndexHook";
+import { useSearchIndex } from "../hooks/useSearchIndex";
 import { isEnabledInEnvironment } from "../utils";
 import { ExpandRuleSegments } from "./ExpandRuleSegments";
 import { ExpandConditions } from "./ExpandConditions";
@@ -439,6 +439,7 @@ export function ShowFeature() {
     {
       title: "Overview",
       to: `/features/${featureKey}`,
+      end: true,
     },
     {
       title: "Variations",

package/src/components/ShowSegment.tsx

@@ -7,7 +7,7 @@ import { Tabs } from "./Tabs";
 import { HistoryTimeline } from "./HistoryTimeline";
 import { ExpandConditions } from "./ExpandConditions";
 import { EditLink } from "./EditLink";
-import { useSearchIndex } from "../hooks/searchIndexHook";
+import { useSearchIndex } from "../hooks/useSearchIndex";
 import { Markdown } from "./Markdown";
 
 export function DisplaySegmentOverview() {

package/src/components/Tabs.tsx

@@ -4,6 +4,7 @@ import { NavLink } from "react-router-dom";
 interface Tab {
   title: string;
   to: string;
+  end?: boolean;
 }
 
 interface TabsProps {
@@ -20,7 +21,7 @@ export function Tabs(props: TabsProps) {
           <NavLink
             key={tab.title}
             to={tab.to}
-            end
+            end={Boolean(tab.end)}
             className={({ isActive }) =>
               [
                 "w-1/4",

package/src/hooks/useSearch.ts

@@ -0,0 +1,41 @@
+import { useCallback } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import { useSearchIndex } from "./useSearchIndex";
+import {
+  parseSearchQuery,
+  getFeaturesByQuery,
+  getAttributesByQuery,
+  getSegmentsByQuery,
+} from "../utils";
+
+const SEARCH_QUERY_KEY = "q";
+
+export function useSearch() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const searchQuery = String(searchParams.get(SEARCH_QUERY_KEY) || "");
+
+  const { data: searchData } = useSearchIndex();
+  const parsedQuery = parseSearchQuery(searchQuery);
+  const features = getFeaturesByQuery(parsedQuery, searchData);
+  const segments = getSegmentsByQuery(parsedQuery, searchData);
+  const attributes = getAttributesByQuery(parsedQuery, searchData);
+
+  const setSearchQuery = useCallback((value) => {
+    const newSearchParams = new URLSearchParams(searchParams.toString());
+    if (value) {
+      newSearchParams.set(SEARCH_QUERY_KEY, String(value));
+    } else {
+      newSearchParams.delete(SEARCH_QUERY_KEY);
+    }
+    setSearchParams(newSearchParams);
+  }, []);
+
+  return {
+    searchQuery,
+    features,
+    segments,
+    attributes,
+    setSearchQuery,
+  } as const;
+}

package/src/hooks/useSearchIndex.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { SearchIndex } from "@featurevisor/types";
+
+import { SearchIndexContext } from "../contexts/SearchIndexContext";
+
+export function useSearchIndex() {
+  const { data } = useContext(SearchIndexContext);
+
+  return {
+    data: data as SearchIndex,
+  };
+}

package/src/utils/index.ts

@@ -8,7 +8,7 @@ export interface Query {
   capture?: boolean;
 }
 
-export function getQueryFromString(q: string) {
+export function parseSearchQuery(queryString: string) {
   const query: Query = {
     keyword: "",
     tags: [],
@@ -17,7 +17,7 @@ export function getQueryFromString(q: string) {
     capture: undefined,
   };
 
-  const parts = q.split(" ");
+  const parts = queryString.split(" ");
 
   for (const part of parts) {
     if (part.startsWith("tag:")) {

package/lib/hooks/searchIndexHook.d.ts

@@ -1 +0,0 @@
-export declare function useSearchIndex(): import("../contexts/SearchIndexContext").SearchIndexProps;

package/src/hooks/searchIndexHook.ts

@@ -1,9 +0,0 @@
-import { useContext } from "react";
-
-import { SearchIndexContext } from "../contexts/SearchIndexContext";
-
-export function useSearchIndex() {
-  const value = useContext(SearchIndexContext);
-
-  return value;
-}