Merge branch 'main' into feat/new-bucket-cli

Author: Swiftwork

packages/browser-sdk/README.md

@@ -176,6 +176,8 @@ generate a `check` event, contrary to the `isEnabled` property on the object ret
 
 ### Remote config (beta)
 
+Remote config is a dynamic and flexible approach to configuring feature behavior outside of your app – without needing to re-deploy it.
+
 Similar to `isEnabled`, each feature has a `config` property. This configuration is managed from within Bucket.
 It is managed similar to the way access to features is managed, but instead of the binary `isEnabled` you can have
 multiple configuration values which are given to different user/companies.
@@ -194,10 +196,7 @@ const features = bucketClient.getFeatures();
 // }
 ```
 
-The `key` is always present while the `payload` is a optional JSON value for arbitrary configuration needs.
-If feature has no configuration or, no configuration value was matched against the context, the `config` object
-will be empty, thus, `key` will be `undefined`. Make sure to check against this case when trying to use the
-configuration in your application.
+`key` is mandatory for a config, but if a feature has no config or no config value was matched against the context, the `key` will be `undefined`. Make sure to check against this case when trying to use the configuration in your application. `payload` is an optional JSON value for arbitrary configuration needs.
 
 Just as `isEnabled`, accessing `config` on the object returned by `getFeatures` does not automatically
 generate a `check` event, contrary to the `config` property on the object returned by `getFeature`.
@@ -321,6 +320,13 @@ The two cookies are:
 - `bucket-prompt-${userId}`: store the last automated feedback prompt message ID received to avoid repeating surveys
 - `bucket-token-${userId}`: caching a token used to connect to Bucket's live messaging infrastructure that is used to deliver automated feedback surveys in real time.
 
+### Upgrading to 3.0 from 2.x
+
+Breaking changes:
+
+- `client.onFeaturesUpdated()` is now replaced by [event listeners](#event-listeners)
+- Arguments to the `BucketClient` constructor which were previously under `featureOptions` are now supplied directly in the root.
+
 ### TypeScript
 
 Types are bundled together with the library and exposed automatically when importing through a package manager.

packages/browser-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bucketco/browser-sdk",
-  "version": "3.0.0-alpha.6",
+  "version": "3.1.0",
   "packageManager": "yarn@4.1.1",
   "license": "MIT",
   "repository": {

packages/browser-sdk/src/client.ts

@@ -256,6 +256,13 @@ export type InitOptions = {
    */
   staleTimeMs?: number;
 
+  /**
+   * When proxying requests, you may want to include credentials like cookies
+   * so you can authorize the request in the proxy.
+   * This option controls the `credentials` option of the fetch API.
+   */
+  credentials?: "include" | "same-origin" | "omit";
+
   /**
    * Base URL of Bucket servers for SSE connections used by AutoFeedback.
    */
@@ -387,6 +394,7 @@ export class BucketClient {
     this.httpClient = new HttpClient(this.publishableKey, {
       baseUrl: this.config.apiBaseUrl,
       sdkVersion: opts?.sdkVersion,
+      credentials: opts?.credentials,
     });
 
     this.featuresClient = new FeaturesClient(
@@ -458,7 +466,6 @@ export class BucketClient {
     }
 
     await this.featuresClient.initialize();
-
     if (this.context.user && this.config.enableTracking) {
       this.user().catch((e) => {
         this.logger.error("error sending user", e);
@@ -476,12 +483,14 @@ export class BucketClient {
    * Add a hook to the client.
    *
    * @param hook Hook to add.
+   * @returns A function to remove the hook.
    */
   on<THookType extends keyof HookArgs>(
     type: THookType,
     handler: (args0: HookArgs[THookType]) => void,
   ) {
     this.hooks.addHook(type, handler);
+    return () => this.hooks.removeHook(type, handler);
   }
 
   /**
@@ -796,8 +805,6 @@ export class BucketClient {
   /**
    * Stop the SDK.
    * This will stop any automated feedback surveys.
-   * It will also stop the features client, including removing
-   * any onFeaturesUpdated listeners.
    *
    **/
   async stop() {

packages/browser-sdk/src/hooksManager.ts

@@ -13,7 +13,7 @@ export interface HookArgs {
   track: TrackEvent;
 }
 
-type TrackEvent = {
+export type TrackEvent = {
   user: UserContext;
   company?: CompanyContext;
   eventName: string;

packages/browser-sdk/src/httpClient.ts

@@ -3,12 +3,15 @@ import { API_BASE_URL, SDK_VERSION, SDK_VERSION_HEADER_NAME } from "./config";
 export interface HttpClientOptions {
   baseUrl?: string;
   sdkVersion?: string;
+  credentials?: RequestCredentials;
 }
 
 export class HttpClient {
   private readonly baseUrl: string;
   private readonly sdkVersion: string;
 
+  private readonly fetchOptions: RequestInit;
+
   constructor(
     public publishableKey: string,
     opts: HttpClientOptions = {},
@@ -21,6 +24,7 @@ export class HttpClient {
       this.baseUrl += "/";
     }
     this.sdkVersion = opts.sdkVersion ?? SDK_VERSION;
+    this.fetchOptions = { credentials: opts.credentials };
   }
 
   getUrl(path: string): URL {
@@ -50,13 +54,14 @@ export class HttpClient {
     url.search = params.toString();
 
     if (timeoutMs === undefined) {
-      return fetch(url);
+      return fetch(url, this.fetchOptions);
     }
 
     const controller = new AbortController();
     const id = setTimeout(() => controller.abort(), timeoutMs);
 
     const res = await fetch(url, {
+      ...this.fetchOptions,
       signal: controller.signal,
     });
     clearTimeout(id);
@@ -73,6 +78,7 @@ export class HttpClient {
     body: any;
   }): ReturnType<typeof fetch> {
     return fetch(this.getUrl(path), {
+      ...this.fetchOptions,
       method: "POST",
       headers: {
         "Content-Type": "application/json",

packages/browser-sdk/src/index.ts

@@ -28,5 +28,6 @@ export type {
   OnScoreSubmitResult,
   OpenFeedbackFormOptions,
 } from "./feedback/ui/types";
+export type { TrackEvent } from "./hooksManager";
 export type { Logger } from "./logger";
 export { feedbackContainerId, propagatedEvents } from "./ui/constants";

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

@@ -47,13 +47,19 @@
   opacity: 0;
   transform: translateY(-7px);
   transition-property: opacity, transform;
-  transition-duration: 0.1s;
+  transition-duration: 0.075s;
   transition-timing-function: cubic-bezier(0.75, -0.015, 0.565, 1.055);
 
-  &.show {
+  &.show-on-open {
     opacity: 1;
     transform: translateY(0);
-    transition-delay: calc(0.01s * var(--i));
+    /* stagger effect where first item (i=0) has no delay,
+       and delay is based on item count (n) so total animation time always is 509ms */
+    transition-delay: calc(0.05s * var(--i) / max(var(--n) - 1, 1));
+  }
+
+  &.not-visible {
+    visibility: hidden;
   }
 }
 
@@ -63,12 +69,23 @@
   text-overflow: ellipsis;
   width: auto;
   padding: 6px 6px 6px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .feature-icon {
+    height: 15px;
+    width: 15px;
+    color: var(--dimmed-color);
+  }
 }
 
 .feature-link {
   color: var(--text-color);
   text-decoration: none;
-  &:hover {
+
+  &:hover,
+  &:focus-visible {
     text-decoration: underline;
   }
 }
@@ -81,6 +98,13 @@
 
 .reset {
   color: var(--brand300);
+
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: underline;
+  }
 }
 
 .feature-switch-cell {

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

@@ -1,32 +1,47 @@
 import { h } from "preact";
 import { useEffect, useState } from "preact/hooks";
 
+import { Feature } from "../ui/icons/Feature";
+
 import { Switch } from "./Switch";
 import { FeatureItem } from "./Toolbar";
 
 export function FeaturesTable({
   features,
+  searchQuery,
   setEnabledOverride,
   appBaseUrl,
   isOpen,
 }: {
   features: FeatureItem[];
+  searchQuery: string | null;
   setEnabledOverride: (key: string, value: boolean | null) => void;
   appBaseUrl: string;
   isOpen: boolean;
 }) {
-  if (features.length === 0) {
+  const searchedFeatures =
+    searchQuery === null
+      ? features
+      : [...features].sort((a, _b) => (a.key.includes(searchQuery) ? -1 : 1));
+
+  if (searchedFeatures.length === 0) {
     return <div style={{ color: "var(--gray500)" }}>No features found</div>;
   }
   return (
-    <table class="features-table">
+    <table class="features-table" style={{ "--n": searchedFeatures.length }}>
       <tbody>
-        {features.map((feature, index) => (
+        {searchedFeatures.map((feature, index) => (
           <FeatureRow
             key={feature.key}
             appBaseUrl={appBaseUrl}
             feature={feature}
             index={index}
+            isNotVisible={
+              searchQuery !== null &&
+              !feature.key
+                .toLocaleLowerCase()
+                .includes(searchQuery.toLocaleLowerCase())
+            }
             isOpen={isOpen}
             setEnabledOverride={setEnabledOverride}
           />
@@ -42,28 +57,36 @@ function FeatureRow({
   feature,
   isOpen,
   index,
+  isNotVisible,
 }: {
   feature: FeatureItem;
   appBaseUrl: string;
   setEnabledOverride: (key: string, value: boolean | null) => void;
   isOpen: boolean;
   index: number;
+  isNotVisible: boolean;
 }) {
-  const [show, setShow] = useState(true);
+  const [showOnOpen, setShowOnOpen] = useState(isOpen);
   useEffect(() => {
-    setShow(isOpen);
+    setShowOnOpen(isOpen);
   }, [isOpen]);
   return (
     <tr
       key={feature.key}
-      class={["feature-row", show ? "show" : undefined].join(" ")}
+      class={[
+        "feature-row",
+        showOnOpen ? "show-on-open" : undefined,
+        isNotVisible ? "not-visible" : undefined,
+      ].join(" ")}
       style={{ "--i": index }}
     >
       <td class="feature-name-cell">
+        <Feature class="feature-icon" />
         <a
           class="feature-link"
           href={`${appBaseUrl}/envs/current/features/by-key/${feature.key}`}
           rel="noreferrer"
+          tabIndex={index + 1}
           target="_blank"
         >
           {feature.key}
@@ -74,6 +97,7 @@ function FeatureRow({
           <Reset
             featureKey={feature.key}
             setEnabledOverride={setEnabledOverride}
+            tabIndex={index + 1}
           />
         ) : null}
       </td>
@@ -83,6 +107,7 @@ function FeatureRow({
             (feature.localOverride === null && feature.isEnabled) ||
             feature.localOverride === true
           }
+          tabIndex={index + 1}
           onChange={(e) => {
             const isChecked = e.currentTarget.checked;
             const isOverridden = isChecked !== feature.isEnabled;
@@ -103,6 +128,7 @@ export function FeatureSearch({
     <input
       class="search-input"
       placeholder="Search features"
+      tabIndex={0}
       type="search"
       autoFocus
       onInput={(s) => onSearch(s.currentTarget.value)}
@@ -113,10 +139,11 @@ export function FeatureSearch({
 function Reset({
   setEnabledOverride,
   featureKey,
+  ...props
 }: {
   setEnabledOverride: (key: string, value: boolean | null) => void;
   featureKey: string;
-}) {
+} & h.JSX.HTMLAttributes<HTMLAnchorElement>) {
   return (
     <a
       class="reset"
@@ -125,6 +152,7 @@ function Reset({
         e.preventDefault();
         setEnabledOverride(featureKey, null);
       }}
+      {...props}
     >
       reset
     </a>

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

@@ -1,11 +1,30 @@
 .switch {
   cursor: pointer;
+  position: relative;
+}
+
+.switch-input {
+  border: 0px;
+  clip: rect(0px, 0px, 0px, 0px);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  padding: 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+}
+
+.switch-input:focus-visible + .switch-track {
+  outline: none;
+  box-shadow: 0 0 0 1px #fff;
 }
 
 .switch-track {
   position: relative;
   transition: background 0.1s ease;
   background: #606476;
+  border-radius: 999px;
 }
 
 .switch[data-enabled="true"] .switch-track {

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

@@ -19,8 +19,8 @@ export function Switch({
       <label class="switch" data-enabled={checked}>
         <input
           checked={checked}
+          class="switch-input"
           name="enabled"
-          style={{ display: "none" }}
           type="checkbox"
           {...props}
         />