@featurevisor/site 0.8.0

package/src/components/SearchInput.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+interface SearchInputProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export function SearchInput(props: SearchInputProps) {
+  return (
+    <div className="relative px-6 pt-3.5">
+      <div className="pointer-events-none absolute">
+        <svg
+          className="absolute ml-3 mt-5 h-6 w-6 text-slate-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <input
+        type="text"
+        value={props.value}
+        onChange={(e) => props.onChange(e)}
+        placeholder="Type to search..."
+        autoComplete="off"
+        className="mb-4 mt-2 w-full rounded-full border-slate-300 indent-8 text-xl text-gray-700 placeholder:text-gray-400"
+      />
+    </div>
+  );
+}

package/src/components/ShowAttribute.tsx

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { useParams, Outlet, useOutletContext, Link } from "react-router-dom";
+
+import { PageContent } from "./PageContent";
+import { PageTitle } from "./PageTitle";
+import { Tabs } from "./Tabs";
+import { EditLink } from "./EditLink";
+import { useSearchIndex } from "../hooks/searchIndexHook";
+import { Markdown } from "./Markdown";
+import { HistoryTimeline } from "./HistoryTimeline";
+
+export function DisplayAttributeOverview() {
+  const { attribute } = useOutletContext() as any;
+
+  return (
+    <div className="border-gray-200 py-6">
+      <dl className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Key</dt>
+          <dd className="mt-1 text-sm text-gray-900">{attribute.key}</dd>
+        </div>
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Archived</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {attribute.archived === true ? <span>Yes</span> : <span>No</span>}
+          </dd>
+        </div>
+        <div>
+          <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">
+            {attribute.description.trim().length > 0 ? (
+              <Markdown children={attribute.description} />
+            ) : (
+              "n/a"
+            )}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
+export function DisplayAttributeUsage() {
+  const { attribute } = useOutletContext() as any;
+
+  return (
+    <div className="border-gray-200 py-6">
+      <dl className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Segments</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {attribute.usedInSegments.length === 0 && "none"}
+
+            {attribute.usedInSegments.length > 0 && (
+              <ul className="list-inside list-disc">
+                {attribute.usedInSegments.map((segment) => {
+                  return (
+                    <li key={segment}>
+                      <Link to={`/segments/${segment}`}>{segment}</Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </dd>
+        </div>
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Features</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {attribute.usedInFeatures.length === 0 && "none"}
+
+            {attribute.usedInFeatures.length > 0 && (
+              <ul className="list-inside list-disc">
+                {attribute.usedInFeatures.map((feature) => {
+                  return (
+                    <li key={feature}>
+                      <Link to={`/features/${feature}`}>{feature}</Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
+export function DisplayAttributeHistory() {
+  const { attribute } = useOutletContext() as any;
+
+  return <HistoryTimeline entityType="attribute" entityKey={attribute.key} />;
+}
+
+export function ShowAttribute(props) {
+  const { attributeKey } = useParams();
+  const { data } = useSearchIndex();
+  const links = data?.links;
+  const attribute = data?.entities.attributes.find((a) => a.key === attributeKey);
+
+  if (!attribute) {
+    return <p>Attribute not found.</p>;
+  }
+
+  const tabs = [
+    {
+      title: "Overview",
+      to: `/attributes/${attributeKey}`,
+    },
+    {
+      title: "Usage",
+      to: `/attributes/${attributeKey}/usage`,
+    },
+    {
+      title: "History",
+      to: `/attributes/${attributeKey}/history`,
+    },
+  ];
+
+  return (
+    <PageContent>
+      <PageTitle className="border-none">
+        Attribute: {attributeKey}{" "}
+        {links && <EditLink url={links.attribute.replace("{{key}}", attribute.key)} />}
+      </PageTitle>
+
+      <Tabs tabs={tabs} />
+
+      <div className="p-8">
+        <Outlet context={{ attribute }} />
+      </div>
+    </PageContent>
+  );
+}

package/src/components/ShowFeature.tsx

@@ -0,0 +1,490 @@
+import * as React from "react";
+import { useParams, useOutletContext, Outlet, NavLink } from "react-router-dom";
+
+import { PageContent } from "./PageContent";
+import { PageTitle } from "./PageTitle";
+import { Tabs } from "./Tabs";
+import { HistoryTimeline } from "./HistoryTimeline";
+import { Tag } from "./Tag";
+import { useSearchIndex } from "../hooks/searchIndexHook";
+import { isEnabledInEnvironment } from "../utils";
+import { ExpandRuleSegments } from "./ExpandRuleSegments";
+import { ExpandConditions } from "./ExpandConditions";
+import { EditLink } from "./EditLink";
+import { Markdown } from "./Markdown";
+
+export function DisplayFeatureOverview() {
+  const { feature } = useOutletContext() as any;
+
+  const environmentKeys = Object.keys(feature.environments).sort();
+
+  return (
+    <div className="border-gray-200">
+      <dl className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Key</dt>
+          <dd className="mt-1 text-sm text-gray-900">{feature.key}</dd>
+        </div>
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Archived</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {feature.archived === true ? <span>Yes</span> : <span>No</span>}
+          </dd>
+        </div>
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Default variation</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {typeof feature.defaultVariation === "string" ? (
+              <span>{feature.defaultVariation}</span>
+            ) : (
+              <pre>
+                <code className="rounded bg-gray-100 px-2 py-1 text-red-400">
+                  {JSON.stringify(feature.defaultVariation)}
+                </code>
+              </pre>
+            )}
+          </dd>
+        </div>
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Bucket by</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {typeof feature.bucketBy === "string" ? (
+              <span>{feature.bucketBy}</span>
+            ) : (
+              <ul>
+                {feature.bucketBy.map((b) => (
+                  <li key={b}>{b}</li>
+                ))}
+              </ul>
+            )}
+          </dd>
+        </div>
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Status</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            <ul className="">
+              {environmentKeys.map((environmentKey) => (
+                <li key={environmentKey}>
+                  <span className="relative top-0.5 inline-block h-3 w-3">
+                    {isEnabledInEnvironment(feature, environmentKey) ? (
+                      <span className="relative inline-block h-3 w-3 rounded-full bg-green-500"></span>
+                    ) : (
+                      <span className="relative inline-block h-3 w-3 rounded-full bg-slate-300"></span>
+                    )}
+                  </span>{" "}
+                  {environmentKey}
+                </li>
+              ))}
+            </ul>
+          </dd>
+        </div>
+        <div>
+          <dt className="text-sm font-medium text-gray-500">Tags</dt>
+          <dd className="mt-1 text-sm text-gray-900">
+            {feature.tags.map((tag: string) => (
+              <Tag tag={tag} key={tag} />
+            ))}
+          </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">
+            {feature.description && feature.description.trim().length > 0 ? (
+              <Markdown children={feature.description} />
+            ) : (
+              "n/a"
+            )}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
+export function DisplayFeatureForceTable() {
+  const { feature } = useOutletContext() as any;
+  const { environmentKey } = useParams();
+
+  if (
+    !environmentKey ||
+    !feature.environments[environmentKey] ||
+    !feature.environments[environmentKey].force
+  ) {
+    return <p>n/a</p>;
+  }
+
+  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">
+            Conditions / Segments
+          </th>
+          <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">
+            Variation
+          </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].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">
+                {force.conditions ? (
+                  <ExpandConditions conditions={force.conditions} />
+                ) : (
+                  <ExpandRuleSegments segments={force.segments} />
+                )}
+              </td>
+              <td className="py-4 pl-4 pr-3 text-sm text-gray-900">
+                {force.variation && typeof force.variation === "string" && (
+                  <span>{force.variation}</span>
+                )}
+
+                {force.variation && typeof force.variation != "string" && (
+                  <code className="rounded bg-gray-100 px-2 py-1 text-red-400">
+                    {JSON.stringify(force.variation)}
+                  </code>
+                )}
+              </td>
+              <td className="py-4 pl-4 pr-3 text-sm text-gray-900">
+                {force.variables && (
+                  <ul className="list-inside list-disc">
+                    {Object.keys(force.variables).map((k) => {
+                      return (
+                        <li key={k}>
+                          <span className="font-semibold">{k}</span>:{" "}
+                          {typeof force.variables[k] === "string" && force.variables[k]}
+                          {typeof force.variables[k] !== "string" && (
+                            <code className="rounded bg-gray-100 px-2 py-1 text-red-400">
+                              {force.variables[k]}
+                            </code>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                )}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+export function DisplayFeatureForce() {
+  const { feature } = useOutletContext() as any;
+  const environmentKeys = Object.keys(feature.environments).sort();
+
+  const environmentTabs = environmentKeys.map((environmentKey, index) => {
+    return {
+      title: environmentKey,
+      to: `/features/${feature.key}/force/${environmentKey}`,
+    };
+  });
+
+  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>
+
+      <Outlet context={{ feature }} />
+    </>
+  );
+}
+
+export function DisplayFeatureRulesTable() {
+  const { feature } = useOutletContext() as any;
+  const { environmentKey } = useParams();
+
+  if (!environmentKey || !feature.environments[environmentKey]) {
+    return <p>n/a</p>;
+  }
+
+  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>
+  );
+}
+
+export function DisplayFeatureRules() {
+  const { feature } = useOutletContext() as any;
+  const environmentKeys = Object.keys(feature.environments).sort();
+
+  const environmentTabs = environmentKeys.map((environmentKey, index) => {
+    return {
+      title: environmentKey,
+      to: `/features/${feature.key}/rules/${environmentKey}`,
+    };
+  });
+
+  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>
+
+      <Outlet context={{ feature }} />
+    </>
+  );
+}
+
+export function DisplayFeatureVariations() {
+  const { feature } = useOutletContext() as any;
+
+  return (
+    <table className="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">Value</th>
+          <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">Weight</th>
+          {feature.variablesSchema && (
+            <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">
+              Variables
+            </th>
+          )}
+          <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">
+            Description
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {feature.variations.map((variation, index) => {
+          return (
+            <tr key={variation.value} className={index % 2 === 0 ? undefined : "bg-gray-50"}>
+              <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700 ">
+                {variation.type === "string" ? (
+                  variation.value
+                ) : (
+                  <pre>
+                    <code className="rounded bg-gray-100 px-2 py-1 text-red-400">
+                      {JSON.stringify(variation.value)}
+                    </code>
+                  </pre>
+                )}
+              </td>
+              <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700">
+                {variation.weight}%
+              </td>
+
+              {feature.variablesSchema && (
+                <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) => {
+                        return (
+                          <li key={v.key}>
+                            <span className="font-semibold">{v.key}</span>:{" "}
+                            {typeof v.value === "string" ? (
+                              v.value
+                            ) : (
+                              <pre className="rounded bg-gray-100 px-2 py-1 text-red-400">
+                                <code>{JSON.stringify(v.value, null, 2)}</code>
+                              </pre>
+                            )}
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  )}
+                </th>
+              )}
+              <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-700">
+                {variation.description || <span>n/a</span>}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+export function DisplayFeatureVariablesSchema() {
+  const { feature } = useOutletContext() as any;
+
+  if (!feature.variablesSchema || feature.variablesSchema.length === 0) {
+    return <p>n/a</p>;
+  }
+
+  return (
+    <table className="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">Key</th>
+          <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">Type</th>
+          <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">Default</th>
+          <th className="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-500">
+            Description
+          </th>
+        </tr>
+      </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>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+export function DisplayFeatureHistory() {
+  const { feature } = useOutletContext() as any;
+
+  return <HistoryTimeline entityType="feature" entityKey={feature.key} />;
+}
+
+export function ShowFeature(props) {
+  const { featureKey } = useParams();
+  const { data } = useSearchIndex();
+  const feature = data?.entities.features.find((f) => f.key === featureKey);
+  const links = data?.links;
+
+  if (!feature) {
+    return <p>Feature not found</p>;
+  }
+
+  const tabs = [
+    {
+      title: "Overview",
+      to: `/features/${featureKey}`,
+    },
+    ,
+    {
+      title: "Variations",
+      to: `/features/${featureKey}/variations`,
+    },
+    {
+      title: "Variables",
+      to: `/features/${featureKey}/variables`,
+    },
+    {
+      title: "Rules",
+      to: `/features/${featureKey}/rules`,
+    },
+    {
+      title: "Force",
+      to: `/features/${featureKey}/force`,
+    },
+    {
+      title: "History",
+      to: `/features/${featureKey}/history`,
+    },
+  ];
+
+  return (
+    <PageContent>
+      <PageTitle className="relative border-none">
+        Feature: {featureKey}{" "}
+        {links && <EditLink url={links.feature.replace("{{key}}", feature.key)} />}
+      </PageTitle>
+
+      <Tabs tabs={tabs} />
+
+      <div className="p-8">
+        <Outlet context={{ feature }} />
+      </div>
+    </PageContent>
+  );
+}