Improve feature list UI, update readme (growthbook#244)

* Improve display of non-boolean features in feature list
* Update readme screenshot and text
* Improve override rule column
* Add in-app help for GrowthBook Cloud
* Switch to new env-scoped API keys for GrowthBook SDK

Author: jdorn

README.md

@@ -1,5 +1,5 @@
-<p align="center"><a href="https://www.growthbook.io"><img src="https://www.growthbook.io/logos/[email protected]" width="400px" alt="GrowthBook - The Open Source A/B Testing Platform" /></a></p>
-<p align="center"><b>The Open Source A/B Testing and Feature Flagging Platform</b></p>
+<p align="center"><a href="https://www.growthbook.io"><img src="https://www.growthbook.io/logos/[email protected]" width="400px" alt="GrowthBook - Open Source Feature Flagging and A/B Testing" /></a></p>
+<p align="center"><b>Open Source Feature Flagging and A/B Testing</b></p>
 <p align="center">
     <a href="https://github.com/growthbook/growthbook/actions/workflows/ci.yml"><img src="https://img.shields.io/github/workflow/status/growthbook/growthbook/CI" alt="Build Status" height="22"/></a>
     <a href="https://github.com/growthbook/growthbook/blob/main/LICENSE"><img src="https://img.shields.io/github/license/growthbook/growthbook" alt="MIT License" height="22"/></a>
@@ -17,27 +17,25 @@ docker-compose up -d
 
 Then visit http://localhost:3000
 
-[![GrowthBook Screenshot](/growthbook-screenshot.png)](https://www.growthbook.io)
+[![GrowthBook Screenshot](/features-screenshot.png)](https://www.growthbook.io)
 
 ## Our Philosophy
 
-The top 1% of companies spend thousands of hours building their own A/B testing and feature flagging platforms in-house.
+The top 1% of companies spend thousands of hours building their own feature flagging and A/B testing platforms in-house.
 The other 99% are left paying for expensive 3rd party SaaS tools or hacking together unmaintained open source libraries.
 
-GrowthBook gives you the flexibility and power of a fully-featured in-house platform without needing to build it yourself.
+We want to give all companies the flexibility and power of a fully-featured in-house platform without needing to build it themselves.
 
 ## Major Features
 
-- ❄️ Pull data from Snowflake, Redshift, BigQuery, Mixpanel, Google Analytics, [and more](https://docs.growthbook.io/app/datasources)
-- 🆎 Bayesian statistics engine with support for binomial, count, duration, and revenue metrics
-- ⬇️ Drill down into A/B test results by browser, country, or any other attribute
-- 🪐 Export results as a Jupyter Notebook!
+- 🏁 Feature flags with advanced targeting, gradual rollouts, and experiments
 - 💻 SDKs for [React](https://docs.growthbook.io/lib/react), [Javascript](https://docs.growthbook.io/lib/js), [PHP](https://docs.growthbook.io/lib/php), [Ruby](https://docs.growthbook.io/lib/ruby), [Python](https://docs.growthbook.io/lib/python), [Go](https://docs.growthbook.io/lib/go), and [Kotlin (Android)](https://docs.growthbook.io/lib/kotlin) with more coming soon
-- 🏁 Feature flags with targeting, gradual rollouts, and experiments
-- 👁️ [Visual Editor](https://docs.growthbook.io/app/visual) for non-technical users to create experiments _(beta)_
-- 📝 Document experiments with screenshots and GitHub Flavored Markdown
-- 🔔 Automated email alerts when tests become significant
-- 💡 Lightweight idea board and objective prioritization framework
+- 🆎 Powerful A/B test analysis with support for binomial, count, duration, and revenue metrics
+- ❄️ Use your existing data stack - BigQuery, Mixpanel, Redshift, Google Analytics, [and more](https://docs.growthbook.io/app/datasources)
+- ⬇️ Drill down into A/B test results by browser, country, or any other custom attribute
+- 🪐 Export reports as a Jupyter Notebook!
+- 📝 Document everything with screenshots and GitHub Flavored Markdown throughout
+- 🔔 Automated email alerts when A/B tests become significant
 
 ## Try GrowthBook
 

features-screenshot.png

@@ -0,0 +1,29 @@
+import { useFeature } from "@growthbook/growthbook-react";
+import { useEffect } from "react";
+import useUser from "../../hooks/useUser";
+import { isCloud } from "../../services/env";
+
+export default function InAppHelp() {
+  const config = useFeature("papercups-config").value;
+  const { name, email, userId } = useUser();
+  useEffect(() => {
+    if (!isCloud() || !config) return;
+    if (window["Papercups"]) return;
+    window["Papercups"] = {
+      config: {
+        ...config,
+        customer: {
+          name,
+          email,
+          external_id: userId,
+        },
+      },
+    };
+    const s = document.createElement("script");
+    s.async = true;
+    s.src = config.baseUrl + "/widget.js";
+    document.head.appendChild(s);
+  }, [config]);
+
+  return null;
+}

packages/front-end/components/Auth/InAppHelp.tsx

@@ -32,6 +32,7 @@ export default function FeatureList({ features }: Props) {
                         <ValueDisplay
                           value={feature.defaultValue}
                           type={feature.valueType}
+                          full={false}
                         />
                       </div>
                     </div>

packages/front-end/components/Features/FeatureList.tsx

@@ -6,9 +6,11 @@ import stringify from "json-stringify-pretty-compact";
 export default function ValueDisplay({
   value,
   type,
+  full = true,
 }: {
   value: string;
   type: FeatureValueType;
+  full?: boolean;
 }) {
   const formatted = useMemo(() => {
     if (type === "boolean") return value;
@@ -39,6 +41,22 @@ export default function ValueDisplay({
     );
   }
 
+  if (!full) {
+    return (
+      <div
+        style={{
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          maxWidth: "180px",
+          whiteSpace: "nowrap",
+        }}
+        className="text-muted"
+      >
+        {formatted}
+      </div>
+    );
+  }
+
   return (
     <div style={{ maxHeight: 150, overflowY: "auto" }}>
       <Code

packages/front-end/components/Features/ValueDisplay.tsx

@@ -13,6 +13,7 @@ import { OrganizationSettings } from "back-end/types/organization";
 import { useGrowthBook } from "@growthbook/growthbook-react";
 import { useRouter } from "next/router";
 import { isCloud } from "../services/env";
+import InAppHelp from "./Auth/InAppHelp";
 
 type User = { id: string; email: string; name: string };
 
@@ -212,6 +213,7 @@ const ProtectedPage: React.FC<{
 
   return (
     <UserContext.Provider value={userContextValue} key={orgId}>
+      <InAppHelp />
       {orgId ? (
         <WatchProvider>{children}</WatchProvider>
       ) : (

packages/front-end/components/ProtectedPage.tsx

@@ -56,8 +56,8 @@ function App({
   }, [ready]);
 
   useEffect(() => {
-    // Load feature definitions JSON (from API, database, etc.)
-    fetch("https://cdn.growthbook.io/api/features/key_486336ff87c125f4")
+    // Load feature definitions JSON from GrowthBook API
+    fetch("https://cdn.growthbook.io/api/features/key_prod_cb40dfcb0eb98e44")
       .then((res) => res.json())
       .then((json) => {
         growthbook.setFeatures(json.features);

packages/front-end/pages/_app.tsx

@@ -155,6 +155,9 @@ export default function FeaturesPage() {
             </thead>
             <tbody>
               {sorted.map((feature) => {
+                const firstRule = feature.rules?.[0];
+                const totalRules = feature.rules?.length || 0;
+
                 return (
                   <tr key={feature.id}>
                     <td>
@@ -180,9 +183,19 @@ export default function FeaturesPage() {
                       <ValueDisplay
                         value={feature.defaultValue}
                         type={feature.valueType}
+                        full={false}
                       />
                     </td>
-                    <td>{feature.rules?.length > 0 ? "yes" : "no"}</td>
+                    <td>
+                      {firstRule && (
+                        <span className="text-dark">{firstRule.type}</span>
+                      )}
+                      {totalRules > 1 && (
+                        <small className="text-muted ml-1">
+                          +{totalRules - 1} more
+                        </small>
+                      )}
+                    </td>
                     <td title={datetime(feature.dateUpdated)}>
                       {ago(feature.dateUpdated)}
                     </td>