@featurevisor/site 0.56.0 → 0.57.1

package/lib/components/Tabs.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@featurevisor/site",
-  "version": "0.56.0",
+  "version": "0.57.1",
   "description": "Static site for Featurevisor",
   "main": "dist",
   "scripts": {
@@ -63,7 +63,7 @@
     "webpack-merge": "^5.10.0"
   },
   "dependencies": {
-    "@featurevisor/types": "^0.56.0"
+    "@featurevisor/types": "^0.57.0"
   },
-  "gitHead": "cf164942d23745dbf52e8b68abbe7b153891ba11"
+  "gitHead": "7cc477b7ab7eef3d6db88249d0806db56b16fd2f"
 }

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/ShowFeature.tsx

@@ -208,51 +208,62 @@ export function DisplayFeatureRulesTable() {
   }
 
   return (
-    <table className="mt-3 min-w-full divide-y divide-gray-300 border border-gray-200">
-      <thead className="bg-gray-50">
-        <tr>
-          <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">
-            Percentage
-          </th>
-          <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">Segments</th>
-          <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">
-            Variables
-          </th>
-        </tr>
-      </thead>
-
-      <tbody>
-        {feature.environments[environmentKey].rules.map((rule, index) => {
-          return (
-            <tr key={index} className={index % 2 === 0 ? undefined : "bg-gray-50"}>
-              <td className="py-4 pl-4 pr-3 text-sm text-gray-900">{rule.percentage}%</td>
-              <td className="py-4 pl-4 pr-3 text-sm text-gray-900">
-                <ExpandRuleSegments segments={rule.segments} />
-              </td>
-              <td className="py-4 pl-4 pr-3 text-sm text-gray-900">
-                {rule.variables && (
-                  <ul className="list-inside list-disc">
-                    {Object.keys(rule.variables).map((k) => {
-                      return (
-                        <li key={k}>
-                          <span className="font-semibold">{k}</span>:{" "}
-                          {typeof rule.variables[k] === "string" && rule.variables[k]}
-                          {typeof rule.variables[k] !== "string" && (
-                            <code className="rounded bg-gray-100 px-2 py-1 text-red-400">
-                              {rule.variables[k]}
-                            </code>
-                          )}
-                        </li>
-                      );
-                    })}
-                  </ul>
-                )}
-              </td>
-            </tr>
-          );
-        })}
-      </tbody>
-    </table>
+    <div>
+      {feature.environments[environmentKey].expose === false && (
+        <p className="mt-2 block rounded border-2 border-orange-300 bg-orange-200 p-3 text-sm text-gray-600">
+          Rules are not <a href="https://featurevisor.com/docs/features/#expose">exposed</a> in this
+          environment.
+        </p>
+      )}
+
+      <table className="mt-3 min-w-full divide-y divide-gray-300 border border-gray-200">
+        <thead className="bg-gray-50">
+          <tr>
+            <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">
+              Percentage
+            </th>
+            <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">
+              Segments
+            </th>
+            <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">
+              Variables
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {feature.environments[environmentKey].rules.map((rule, index) => {
+            return (
+              <tr key={index} className={index % 2 === 0 ? undefined : "bg-gray-50"}>
+                <td className="py-4 pl-4 pr-3 text-sm text-gray-900">{rule.percentage}%</td>
+                <td className="py-4 pl-4 pr-3 text-sm text-gray-900">
+                  <ExpandRuleSegments segments={rule.segments} />
+                </td>
+                <td className="py-4 pl-4 pr-3 text-sm text-gray-900">
+                  {rule.variables && (
+                    <ul className="list-inside list-disc">
+                      {Object.keys(rule.variables).map((k) => {
+                        return (
+                          <li key={k}>
+                            <span className="font-semibold">{k}</span>:{" "}
+                            {typeof rule.variables[k] === "string" && rule.variables[k]}
+                            {typeof rule.variables[k] !== "string" && (
+                              <code className="rounded bg-gray-100 px-2 py-1 text-red-400">
+                                {rule.variables[k]}
+                              </code>
+                            )}
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  )}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
   );
 }
 
@@ -439,6 +450,7 @@ export function ShowFeature() {
     {
       title: "Overview",
       to: `/features/${featureKey}`,
+      end: true,
     },
     {
       title: "Variations",

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/utils/index.ts

@@ -67,7 +67,7 @@ export function isEnabledInEnvironment(feature: any, environment: string) {
     return false;
   }
 
-  if (feature.environments[environment].exposed === false) {
+  if (feature.environments[environment].expose === false) {
     return false;
   }