feature search, click feature to open, small visual tweaks

Author: laander

packages/browser-sdk/src/client.ts

@@ -15,7 +15,7 @@ import {
 } from "./feedback/feedback";
 import * as feedbackLib from "./feedback/ui";
 import { ToolbarPosition } from "./toolbar/Toolbar";
-import { API_BASE_URL, SSE_REALTIME_BASE_URL } from "./config";
+import { API_BASE_URL, APP_BASE_URL, SSE_REALTIME_BASE_URL } from "./config";
 import { BucketContext, CompanyContext, UserContext } from "./context";
 import { HttpClient } from "./httpClient";
 import { Logger, loggerWithPrefix, quietConsoleLogger } from "./logger";
@@ -93,6 +93,7 @@ export type PayloadContext = {
 
 interface Config {
   apiBaseUrl: string;
+  appBaseUrl: string;
   sseBaseUrl: string;
   enableTracking: boolean;
 }
@@ -151,6 +152,11 @@ export interface InitOptions {
    */
   apiBaseUrl?: string;
 
+  /**
+   * Base URL of the Bucket web app. Links open ín this app by default.
+   */
+  appBaseUrl?: string;
+
   /**
    * @deprecated
    * Use `sseBaseUrl` instead.
@@ -184,6 +190,7 @@ export interface InitOptions {
 
 const defaultConfig: Config = {
   apiBaseUrl: API_BASE_URL,
+  appBaseUrl: APP_BASE_URL,
   sseBaseUrl: SSE_REALTIME_BASE_URL,
   enableTracking: true,
 };
@@ -243,6 +250,7 @@ export class BucketClient {
 
     this.config = {
       apiBaseUrl: opts?.apiBaseUrl ?? opts?.host ?? defaultConfig.apiBaseUrl,
+      appBaseUrl: opts?.appBaseUrl ?? opts?.host ?? defaultConfig.appBaseUrl,
       sseBaseUrl: opts?.sseBaseUrl ?? opts?.sseHost ?? defaultConfig.sseBaseUrl,
       enableTracking: opts?.enableTracking ?? defaultConfig.enableTracking,
     } satisfies Config;
@@ -332,6 +340,13 @@ export class BucketClient {
     }
   }
 
+  /**
+   * Get the current configuration.
+   */
+  getConfig() {
+    return this.config;
+  }
+
   /**
    * Update the user context.
    * Performs a shallow merge with the existing user context.

packages/browser-sdk/src/config.ts

@@ -1,6 +1,7 @@
 import { version } from "../package.json";
 
 export const API_BASE_URL = "https://front.bucket.co";
+export const APP_BASE_URL = "https://app.bucket.co";
 export const SSE_REALTIME_BASE_URL = "https://livemessaging.bucket.co";
 
 export const SDK_VERSION_HEADER_NAME = "bucket-sdk-version";

packages/browser-sdk/src/toolbar/Toolbar.css

@@ -49,11 +49,13 @@
 #toolbarRoot {
   --brand300: #a39dfc;
   --brand400: #847cfb;
+  --gray500: #787c91;
   --black: #1e1f24;
 
   --bg-color: #1e1f24;
   --border-color: #292b32;
   --logo-color: white;
+  --text-color: white;
   font-family: monospace;
   font-size: 12px;
 }
@@ -62,10 +64,6 @@
   outline: none;
 }
 
-.reset {
-  color: var(--brand300);
-}
-
 .dialog {
   color: #ffffff;
   box-sizing: border-box;
@@ -79,10 +77,6 @@
   min-width: 200px;
 }
 
-.table tr td {
-  padding: 3px;
-}
-
 .toolbar-toggle {
   width: 32px;
   height: 32px;
@@ -148,3 +142,73 @@
     box-shadow: #d8d9df -1px 1px 1px 0px;
   }
 }
+
+.search-input {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  color: white;
+  padding: 0 0 6px 0;
+  font-family: monospace;
+  margin-bottom: 4px;
+  width: 100%;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table tr td {
+  padding: 6px 6px 4px 0;
+}
+
+.reset {
+  color: var(--brand300);
+}
+
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-left: 10px;
+  background: linear-gradient(
+      45deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 43%,
+      #fff 45%,
+      #fff 55%,
+      rgba(0, 0, 0, 0) 57%,
+      rgba(0, 0, 0, 0) 100%
+    ),
+    linear-gradient(
+      135deg,
+      transparent 0%,
+      transparent 43%,
+      #fff 45%,
+      #fff 55%,
+      transparent 57%,
+      transparent 100%
+    );
+  cursor: pointer;
+}
+
+.feature-name-cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: auto;
+}
+
+.feature-reset-cell {
+  min-width: "38px";
+}
+
+.feature-link {
+  color: var(--text-color);
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}

packages/browser-sdk/src/toolbar/Toolbar.tsx

@@ -69,6 +69,16 @@ export default function Toolbar({
     return bucketClient.onFeaturesUpdated(updateFeatures);
   }, [bucketClient]);
 
+  const [search, setSearch] = useState<string | null>(null);
+  const onSearch = (val: string) => {
+    setSearch(val === "" ? null : val);
+  };
+
+  const searchedFeatures =
+    search === null ? features : features.filter((f) => f.key.includes(search));
+
+  const appBaseUrl = bucketClient.getConfig().appBaseUrl;
+
   return (
     <div id="toolbarRoot">
       <style dangerouslySetInnerHTML={{ __html: styles }}></style>
@@ -88,11 +98,13 @@ export default function Toolbar({
         }}
         onClose={closeToolbar}
       >
+        <FeatureSearch onSearch={onSearch} />
         <FeatureTable
-          features={features}
+          features={searchedFeatures}
           setEnabledOverride={bucketClient.setFeatureOverride.bind(
             bucketClient,
           )}
+          appBaseUrl={appBaseUrl}
         />
       </Dialog>
     </div>
@@ -130,6 +142,18 @@ function ToolbarToggle({
   );
 }
 
+function FeatureSearch({ onSearch }: { onSearch: (val: string) => void }) {
+  return (
+    <input
+      type="search"
+      placeholder="Search"
+      onInput={(s) => onSearch(s.currentTarget.value)}
+      autoFocus
+      class="search-input"
+    />
+  );
+}
+
 function Reset({
   setEnabledOverride,
   featureKey,
@@ -154,49 +178,53 @@ function Reset({
 function FeatureTable({
   features,
   setEnabledOverride,
+  appBaseUrl,
 }: {
   features: {
     key: string;
     localOverride: boolean | null;
     isEnabled: boolean;
   }[];
   setEnabledOverride: (key: string, value: boolean | null) => void;
+  appBaseUrl: string;
 }) {
+  if (features.length === 0) {
+    return <div style={{ color: "var(--gray500)" }}>No features found</div>;
+  }
   return (
     <table class="table">
       <tbody>
-        {features.map((feat) => {
+        {features.map((feature) => {
           return (
-            <tr key={feat!.key}>
-              <td
-                style={{
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  width: "auto",
-                }}
-              >
-                {feat!.key}
+            <tr key={feature.key}>
+              <td class="feature-name-cell">
+                <a
+                  href={`${appBaseUrl}/envs/current/features/by-key/${feature.key}`}
+                  target="_blank"
+                  class="feature-link"
+                >
+                  {feature.key}
+                </a>
               </td>
-              <td style={{ minWidth: "38px" }}>
-                {feat?.localOverride !== null ? (
+              <td class="feature-reset-cell">
+                {feature.localOverride !== null ? (
                   <Reset
                     setEnabledOverride={setEnabledOverride}
-                    featureKey={feat!.key}
+                    featureKey={feature.key}
                   />
                 ) : null}
               </td>
               <td>
                 <Switch
                   isOn={
-                    (feat?.localOverride === null && feat!.isEnabled) ||
-                    feat?.localOverride === true
+                    (feature.localOverride === null && feature.isEnabled) ||
+                    feature.localOverride === true
                   }
                   onChange={(e) => {
                     const isChecked = e.currentTarget.checked;
-                    const isOverridden = isChecked !== feat!.isEnabled;
+                    const isOverridden = isChecked !== feature.isEnabled;
                     setEnabledOverride(
-                      feat!.key,
+                      feature.key,
                       isOverridden ? isChecked : null,
                     );
                   }}

packages/browser-sdk/src/ui/Switch.css

@@ -18,4 +18,5 @@
   position: absolute;
   top: 1px;
   transition: transform 0.1s ease-in-out;
+  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
 }

packages/browser-sdk/src/ui/Switch.tsx

@@ -12,8 +12,8 @@ const gutter = 1;
 
 export function Switch({
   isOn,
-  width = 30,
-  height = 15,
+  width = 24,
+  height = 14,
   ...props
 }: SwitchProps) {
   return (