@featurevisor/site 1.35.3 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@featurevisor/site",
-  "version": "1.35.3",
+  "version": "2.0.0",
   "description": "Static site for Featurevisor",
   "main": "dist",
   "scripts": {
@@ -59,7 +59,7 @@
     "webpack-merge": "^5.10.0"
   },
   "dependencies": {
-    "@featurevisor/types": "1.35.3"
+    "@featurevisor/types": "2.0.0"
   },
-  "gitHead": "253ff5dade7c9ee953f6a57cda097a6c9ed93aa2"
+  "gitHead": "9817e05a07735294c750ee921991509b67015afd"
 }

package/src/components/App.tsx

@@ -36,7 +36,7 @@ import {
 } from "./ShowFeature";
 
 import { SearchIndexContext } from "../contexts/SearchIndexContext";
-import { SearchIndex } from "@featurevisor/types";
+import type { SearchIndex } from "@featurevisor/types";
 
 export function App() {
   const [fetchedSearchIndex, setSearchIndex] = React.useState(undefined);

package/src/components/ListAttributes.tsx

@@ -33,11 +33,6 @@ export function ListAttributes() {
                     <div className="flex items-center justify-between">
                       <p className="text-md relative font-bold text-slate-600">
                         {attribute.key}{" "}
-                        {attribute.capture && (
-                          <span className="ml-1 rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800">
-                            capture
-                          </span>
-                        )}
                         {attribute.archived && (
                           <span className="ml-1 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-800">
                             archived

package/src/components/ShowAttribute.tsx

@@ -29,12 +29,6 @@ export function DisplayAttributeOverview() {
           <dt className="text-sm font-medium text-gray-500">Type</dt>
           <dd className="mt-1 text-sm text-gray-900">{attribute.type}</dd>
         </div>
-        <div>
-          <dt className="text-sm font-medium text-gray-500">Capture</dt>
-          <dd className="mt-1 text-sm text-gray-900">
-            {attribute.capture === true ? <span>Yes</span> : <span>No</span>}
-          </dd>
-        </div>
         <div className="col-span-2">
           <dt className="text-sm font-medium text-gray-500">Description</dt>
           <dd className="mt-1 text-sm text-gray-900">

package/src/components/ShowFeature.tsx

@@ -111,7 +111,9 @@ export function DisplayFeatureForceTable() {
   const { environmentKey } = useParams();
 
   const envKey = environmentKey as string;
-  const force = feature.environments ? feature.environments[envKey].force : feature.force;
+
+  const force =
+    feature.force && !Array.isArray(feature.rules) ? feature.force[envKey] : feature.force;
 
   if (!force || force.length === 0) {
     return <p>n/a</p>;
@@ -184,7 +186,8 @@ export function DisplayFeatureForceTable() {
 
 export function DisplayFeatureForce() {
   const { feature } = useOutletContext() as any;
-  const environmentKeys = feature.environments ? Object.keys(feature.environments).sort() : [];
+  const environmentKeys =
+    feature.force && !Array.isArray(feature.force) ? Object.keys(feature.force).sort() : [];
 
   const environmentTabs = environmentKeys.map((environmentKey) => {
     return {
@@ -228,8 +231,11 @@ export function DisplayFeatureRulesTable() {
   const { environmentKey } = useParams();
 
   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;
+  const rules = !Array.isArray(feature.rules) ? feature.rules[envKey] : feature.rules;
+  const expose =
+    typeof feature.expose !== "undefined" && !Array.isArray(feature.rules)
+      ? feature.expose[envKey]
+      : feature.expose;
 
   if (!rules || rules.length === 0) {
     return <p>n/a</p>;
@@ -304,7 +310,7 @@ export function DisplayFeatureRulesTable() {
 
 export function DisplayFeatureRules() {
   const { feature } = useOutletContext() as any;
-  const environmentKeys = feature.environments ? Object.keys(feature.environments).sort() : [];
+  const environmentKeys = feature.rules ? Object.keys(feature.rules).sort() : [];
 
   const environmentTabs = environmentKeys.map((environmentKey) => {
     return {
@@ -390,15 +396,17 @@ export function DisplayFeatureVariations() {
                 <th className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700">
                   {variation.variables && (
                     <ul className="list-inside list-disc text-left">
-                      {variation.variables.map((v) => {
+                      {Object.keys(variation.variables).map((variableKey) => {
+                        const variableValue = variation.variables[variableKey];
+
                         return (
-                          <li key={v.key}>
-                            <span className="font-semibold">{v.key}</span>:{" "}
-                            {typeof v.value === "string" ? (
-                              v.value
+                          <li key={variableKey}>
+                            <span className="font-semibold">{variableKey}</span>:{" "}
+                            {typeof variableValue === "string" ? (
+                              variableValue
                             ) : (
                               <pre className="rounded bg-gray-100 px-2 py-1 text-red-400">
-                                <code>{JSON.stringify(v.value, null, 2)}</code>
+                                <code>{JSON.stringify(variableValue, null, 2)}</code>
                               </pre>
                             )}
                           </li>
@@ -422,7 +430,7 @@ export function DisplayFeatureVariations() {
 export function DisplayFeatureVariablesSchema() {
   const { feature } = useOutletContext() as any;
 
-  if (!feature.variablesSchema || feature.variablesSchema.length === 0) {
+  if (!feature.variablesSchema) {
     return <p>n/a</p>;
   }
 
@@ -440,32 +448,33 @@ export function DisplayFeatureVariablesSchema() {
       </thead>
 
       <tbody>
-        {feature.variablesSchema.map((variableSchema, index) => {
-          return (
-            <tr key={variableSchema.key} className={index % 2 === 0 ? undefined : "bg-gray-50"}>
-              <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700">
-                {variableSchema.key}
-              </td>
-              <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700">
-                {variableSchema.type}
-              </td>
-              <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700">
-                {variableSchema.type === "string" ? (
-                  variableSchema.defaultValue
-                ) : (
-                  <pre>
-                    <code className="rounded bg-gray-100 px-2 py-1 text-red-400">
-                      {JSON.stringify(variableSchema.defaultValue, null, 2)}
-                    </code>
-                  </pre>
-                )}
-              </td>
-              <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700">
-                {variableSchema.description || <span>n/a</span>}
-              </td>
-            </tr>
-          );
-        })}
+        {feature.variablesSchema &&
+          Object.keys(feature.variablesSchema).map((variableKey, index) => {
+            const variableSchema = feature.variablesSchema[variableKey];
+
+            return (
+              <tr key={variableSchema.key} className={index % 2 === 0 ? undefined : "bg-gray-50"}>
+                <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700">{variableKey}</td>
+                <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700">
+                  {variableSchema.type}
+                </td>
+                <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700">
+                  {variableSchema.type === "string" ? (
+                    variableSchema.defaultValue
+                  ) : (
+                    <pre>
+                      <code className="rounded bg-gray-100 px-2 py-1 text-red-400">
+                        {JSON.stringify(variableSchema.defaultValue, null, 2)}
+                      </code>
+                    </pre>
+                  )}
+                </td>
+                <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700">
+                  {variableSchema.description || <span>n/a</span>}
+                </td>
+              </tr>
+            );
+          })}
       </tbody>
     </table>
   );

package/src/contexts/SearchIndexContext.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { SearchIndex } from "@featurevisor/types";
+import type { SearchIndex } from "@featurevisor/types";
 
 export interface SearchIndexProps {
   isLoaded: boolean;

package/src/hooks/useSearchIndex.ts

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { SearchIndex } from "@featurevisor/types";
+import type { SearchIndex } from "@featurevisor/types";
 
 import { SearchIndexContext } from "../contexts/SearchIndexContext";
 

package/src/utils/index.ts

@@ -1,11 +1,10 @@
-import { SearchIndex } from "@featurevisor/types";
+import type { SearchIndex } from "@featurevisor/types";
 
 export interface Query {
   keyword: string;
   tags: string[];
   environments: string[];
   archived?: boolean;
-  capture?: boolean;
   hasVariations?: boolean;
   hasVariables?: boolean;
   variableKeys?: string[];
@@ -18,7 +17,6 @@ export function parseSearchQuery(queryString: string) {
     tags: [],
     environments: [],
     archived: undefined,
-    capture: undefined,
   };
 
   const parts = queryString.split(" ");
@@ -44,14 +42,6 @@ export function parseSearchQuery(queryString: string) {
       } else if (archived === "false") {
         query.archived = false;
       }
-    } else if (part.startsWith("capture:")) {
-      const capture = part.replace("capture:", "");
-
-      if (capture === "true") {
-        query.capture = true;
-      } else if (capture === "false") {
-        query.capture = false;
-      }
     } else if (part.startsWith("variable:")) {
       const variableKey = part.replace("variable:", "");
 
@@ -95,20 +85,20 @@ export function isEnabledInEnvironment(feature: any, environment: string) {
     return false;
   }
 
-  if (feature.environments) {
+  if (!Array.isArray(feature.rules)) {
     // with environments
-    if (!feature.environments[environment]) {
+    if (!feature.rules[environment]) {
       return false;
     }
 
-    if (feature.environments[environment].expose === false) {
+    if (feature.rules[environment].expose === false) {
       return false;
     }
 
-    if (feature.environments[environment].rules.some((rule: any) => rule.percentage > 0)) {
+    if (feature.rules[environment].some((rule: any) => rule.percentage > 0)) {
       return true;
     }
-  } else {
+  } else if (feature.rules) {
     // no environments
     if (feature.rules.some((rule: any) => rule.percentage > 0)) {
       return true;
@@ -120,7 +110,7 @@ export function isEnabledInEnvironment(feature: any, environment: string) {
 
 export function isEnabledInAnyEnvironment(feature: any) {
   // no environments
-  if (feature.rules) {
+  if (Array.isArray(feature.rules)) {
     if (feature.rules.some((rule: any) => rule.percentage > 0)) {
       return true;
     }
@@ -129,7 +119,7 @@ export function isEnabledInAnyEnvironment(feature: any) {
   }
 
   // with environments
-  const environments = Object.keys(feature.environments);
+  const environments = Object.keys(feature.rules);
 
   for (const environment of environments) {
     const isEnabled = isEnabledInEnvironment(feature, environment);
@@ -206,7 +196,7 @@ export function getFeaturesByQuery(query: Query, data: SearchIndex) {
         if (!feature.variablesSchema) {
           matched = false;
         } else {
-          const keysFromFeature = feature.variablesSchema.map((v: any) => v.key);
+          const keysFromFeature = Object.keys(feature.variablesSchema);
 
           if (query.variableKeys.some((k) => keysFromFeature.indexOf(k) === -1)) {
             matched = false;
@@ -253,16 +243,6 @@ export function getAttributesByQuery(query: Query, data: SearchIndex) {
         }
       }
 
-      if (typeof query.capture === "boolean") {
-        if (query.capture && a.capture !== query.capture) {
-          matched = false;
-        }
-
-        if (!query.capture && a.capture === true) {
-          matched = false;
-        }
-      }
-
       return matched;
     })
     .sort((a, b) => a.key.localeCompare(b.key));