@featurevisor/site 1.29.2 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@featurevisor/site",
-  "version": "1.29.2",
+  "version": "1.32.0",
   "description": "Static site for Featurevisor",
   "main": "dist",
   "scripts": {
@@ -59,7 +59,7 @@
     "webpack-merge": "^5.10.0"
   },
   "dependencies": {
-    "@featurevisor/types": "1.29.2"
+    "@featurevisor/types": "1.32.0"
   },
-  "gitHead": "2b62bb80bc2eaafd66934f5649da5286542e1af7"
+  "gitHead": "c360fac0c91b586847633c2d41cf5e4d6922a9b8"
 }

package/src/components/App.tsx

@@ -50,7 +50,7 @@ export function App() {
   }, []);
 
   const environmentKeys = fetchedSearchIndex
-    ? Object.keys((fetchedSearchIndex as SearchIndex).entities.features[0].environments).sort()
+    ? (fetchedSearchIndex as SearchIndex).projectConfig.environments
     : [];
 
   return (
@@ -72,11 +72,23 @@ export function App() {
                   <Route path="variables" element={<DisplayFeatureVariablesSchema />} />
                   <Route path="rules" element={<DisplayFeatureRules />}>
                     <Route path=":environmentKey" element={<DisplayFeatureRulesTable />} />
-                    <Route index element={<Navigate to={environmentKeys[0]} replace />} />
+                    <Route
+                      index
+                      element={
+                        Array.isArray(environmentKeys) &&
+                        environmentKeys.length > 0 && <Navigate to={environmentKeys[0]} replace />
+                      }
+                    />
                   </Route>
                   <Route path="force" element={<DisplayFeatureForce />}>
                     <Route path=":environmentKey" element={<DisplayFeatureForceTable />} />
-                    <Route index element={<Navigate to={environmentKeys[0]} replace />} />
+                    <Route
+                      index
+                      element={
+                        Array.isArray(environmentKeys) &&
+                        environmentKeys.length > 0 && <Navigate to={environmentKeys[0]} replace />
+                      }
+                    />
                   </Route>
                   <Route path="history" element={<DisplayFeatureHistory />} />
                 </Route>

package/src/components/ShowFeature.tsx

@@ -16,7 +16,7 @@ import { Markdown } from "./Markdown";
 export function DisplayFeatureOverview() {
   const { feature } = useOutletContext() as any;
 
-  const environmentKeys = Object.keys(feature.environments).sort();
+  const environmentKeys = feature.environments ? Object.keys(feature.environments).sort() : [];
 
   const renderBucketBy = (bucketBy) => {
     if (typeof bucketBy === "string") {
@@ -110,11 +110,10 @@ export function DisplayFeatureForceTable() {
   const { feature } = useOutletContext() as any;
   const { environmentKey } = useParams();
 
-  if (
-    !environmentKey ||
-    !feature.environments[environmentKey] ||
-    !feature.environments[environmentKey].force
-  ) {
+  const envKey = environmentKey as string;
+  const force = feature.environments ? feature.environments[envKey].force : feature.force;
+
+  if (!force || force.length === 0) {
     return <p>n/a</p>;
   }
 
@@ -135,7 +134,7 @@ export function DisplayFeatureForceTable() {
       </thead>
 
       <tbody>
-        {feature.environments[environmentKey].force.map((force, index) => {
+        {force.map((force, 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">
@@ -185,7 +184,7 @@ export function DisplayFeatureForceTable() {
 
 export function DisplayFeatureForce() {
   const { feature } = useOutletContext() as any;
-  const environmentKeys = Object.keys(feature.environments).sort();
+  const environmentKeys = feature.environments ? Object.keys(feature.environments).sort() : [];
 
   const environmentTabs = environmentKeys.map((environmentKey) => {
     return {
@@ -196,23 +195,29 @@ export function DisplayFeatureForce() {
 
   return (
     <>
-      <nav className="flex space-x-4" aria-label="Tabs">
-        {environmentTabs.map((tab) => (
-          <NavLink
-            key={tab.title}
-            to={tab.to}
-            className={({ isActive }) =>
-              [
-                isActive ? "bg-gray-200 text-gray-800" : "text-gray-600 hover:text-gray-800",
-                "rounded-md px-3 py-2 text-sm font-medium",
-              ].join(" ")
-            }
-          >
-            {tab.title}
-          </NavLink>
-        ))}
-      </nav>
+      {environmentKeys.length > 0 && (
+        <nav className="flex space-x-4" aria-label="Tabs">
+          {environmentTabs.map((tab) => (
+            <NavLink
+              key={tab.title}
+              to={tab.to}
+              className={({ isActive }) =>
+                [
+                  isActive ? "bg-gray-200 text-gray-800" : "text-gray-600 hover:text-gray-800",
+                  "rounded-md px-3 py-2 text-sm font-medium",
+                ].join(" ")
+              }
+            >
+              {tab.title}
+            </NavLink>
+          ))}
+        </nav>
+      )}
+
+      {/* no environments */}
+      {environmentKeys.length === 0 && <DisplayFeatureForceTable />}
 
+      {/* with environments */}
       <Outlet context={{ feature }} />
     </>
   );
@@ -222,23 +227,27 @@ export function DisplayFeatureRulesTable() {
   const { feature } = useOutletContext() as any;
   const { environmentKey } = useParams();
 
-  if (!environmentKey || !feature.environments[environmentKey]) {
+  const envKey = environmentKey as string;
+  const rules = feature.environments ? feature.environments[envKey].rules : feature.rules;
+  const expose = feature.environments ? feature.environments[envKey].expose : feature.expose;
+
+  if (!rules || rules.length === 0) {
     return <p>n/a</p>;
   }
 
   return (
     <div>
-      {feature.environments[environmentKey].expose === false && (
+      {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>
       )}
 
-      {Array.isArray(feature.environments[environmentKey].expose) && (
+      {Array.isArray(expose) && (
         <p className="mt-2 block rounded border-2 border-orange-300 bg-orange-200 p-3 text-sm text-gray-600">
           Rules are <a href="https://featurevisor.com/docs/features/#expose">exposed</a> for these
-          tags only: {feature.environments[environmentKey].expose.join(", ")}.
+          tags only: {expose.join(", ")}.
         </p>
       )}
 
@@ -258,7 +267,7 @@ export function DisplayFeatureRulesTable() {
         </thead>
 
         <tbody>
-          {feature.environments[environmentKey].rules.map((rule, index) => {
+          {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>
@@ -295,7 +304,7 @@ export function DisplayFeatureRulesTable() {
 
 export function DisplayFeatureRules() {
   const { feature } = useOutletContext() as any;
-  const environmentKeys = Object.keys(feature.environments).sort();
+  const environmentKeys = feature.environments ? Object.keys(feature.environments).sort() : [];
 
   const environmentTabs = environmentKeys.map((environmentKey) => {
     return {
@@ -306,23 +315,29 @@ export function DisplayFeatureRules() {
 
   return (
     <>
-      <nav className="flex space-x-4" aria-label="Tabs">
-        {environmentTabs.map((tab) => (
-          <NavLink
-            key={tab.title}
-            to={tab.to}
-            className={({ isActive }) =>
-              [
-                isActive ? "bg-gray-200 text-gray-800" : "text-gray-600 hover:text-gray-800",
-                "rounded-md px-3 py-2 text-sm font-medium",
-              ].join(" ")
-            }
-          >
-            {tab.title}
-          </NavLink>
-        ))}
-      </nav>
+      {environmentKeys.length > 0 && (
+        <nav className="flex space-x-4" aria-label="Tabs">
+          {environmentTabs.map((tab) => (
+            <NavLink
+              key={tab.title}
+              to={tab.to}
+              className={({ isActive }) =>
+                [
+                  isActive ? "bg-gray-200 text-gray-800" : "text-gray-600 hover:text-gray-800",
+                  "rounded-md px-3 py-2 text-sm font-medium",
+                ].join(" ")
+              }
+            >
+              {tab.title}
+            </NavLink>
+          ))}
+        </nav>
+      )}
+
+      {/* no environments */}
+      {environmentKeys.length === 0 && <DisplayFeatureRulesTable />}
 
+      {/* with environments */}
       <Outlet context={{ feature }} />
     </>
   );

package/src/utils/index.ts

@@ -95,22 +95,40 @@ export function isEnabledInEnvironment(feature: any, environment: string) {
     return false;
   }
 
-  if (!feature.environments[environment]) {
-    return false;
-  }
+  if (feature.environments) {
+    // with environments
+    if (!feature.environments[environment]) {
+      return false;
+    }
 
-  if (feature.environments[environment].expose === false) {
-    return false;
-  }
+    if (feature.environments[environment].expose === false) {
+      return false;
+    }
 
-  if (feature.environments[environment].rules.some((rule: any) => rule.percentage > 0)) {
-    return true;
+    if (feature.environments[environment].rules.some((rule: any) => rule.percentage > 0)) {
+      return true;
+    }
+  } else {
+    // no environments
+    if (feature.rules.some((rule: any) => rule.percentage > 0)) {
+      return true;
+    }
   }
 
   return false;
 }
 
 export function isEnabledInAnyEnvironment(feature: any) {
+  // no environments
+  if (feature.rules) {
+    if (feature.rules.some((rule: any) => rule.percentage > 0)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  // with environments
   const environments = Object.keys(feature.environments);
 
   for (const environment of environments) {