DX: Split out feature flags from the Me user data endpoint

eslint-local-rules/persistBackgroundData.txt

@@ -11,9 +11,10 @@
 ./src/analysis/analysisVisitors/regexAnalysis.ts
 ./src/analysis/analysisVisitors/varAnalysis/varMap.ts
 ./src/auth/authConstants.ts
+./src/auth/authStorage.ts
 ./src/auth/authTypes.ts
 ./src/auth/authUtils.ts
-./src/auth/token.ts
+./src/auth/featureFlags.ts
 ./src/components/annotationAlert/FieldAnnotationAlert.tsx
 ./src/components/AsyncButton.tsx
 ./src/components/DelayedRender.tsx
@@ -255,7 +256,6 @@
 ./src/store/settings/settingsStorage.ts
 ./src/store/settings/settingsTypes.ts
 ./src/store/StorageInterface.ts
-./src/store/syncFlags.ts
 ./src/telemetry/BackgroundLogger.ts
 ./src/telemetry/deployments.ts
 ./src/telemetry/dnt.ts

src/auth/RequireAuth.tsx

@@ -19,7 +19,7 @@ import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Loader from "@/components/Loader";
 import { useGetMeQuery } from "@/data/service/api";
-import { clearCachedAuthSecrets, updateUserData } from "@/auth/token";
+import { clearCachedAuthSecrets, updateUserData } from "@/auth/authStorage";
 import {
   selectExtensionAuthState,
   selectUserDataUpdate,

src/auth/authConstants.ts

@@ -28,7 +28,6 @@ export const anonAuth: AuthState = Object.freeze({
   isTestAccount: false,
   extension: true,
   scope: null,
-  flags: [],
   milestones: [],
   organizations: [],
   groups: [],

src/auth/authSelectors.ts

@@ -21,7 +21,6 @@ export const selectAuth = (state: AuthRootState) => state.auth;
 export const selectIsLoggedIn = (state: AuthRootState) =>
   selectAuth(state).isLoggedIn;
 export const selectScope = (state: AuthRootState) => selectAuth(state).scope;
-export const selectFlags = (state: AuthRootState) => selectAuth(state).flags;
 export const selectMilestones = (state: AuthRootState) =>
   selectAuth(state).milestones;
 export const selectOrganizations = (state: AuthRootState) =>

src/auth/authSlice.ts

@@ -33,7 +33,6 @@ export const authSlice = createSlice({
       return {
         ...payload,
         scope: isEmpty(payload.scope) ? null : payload.scope,
-        flags: Array.isArray(payload.flags) ? payload.flags : [],
         organizations: Array.isArray(payload.organizations)
           ? payload.organizations
           : [],

src/auth/authTypes.ts

@@ -56,10 +56,6 @@ export type UserData = Partial<{
    * The user's organization for engagement and error attribution
    */
   telemetryOrganizationId: UUID | null;
-  /**
-   * Feature flags
-   */
-  flags: string[];
   /**
    * Organizations the user is a member of
    */
@@ -108,7 +104,6 @@ export const USER_DATA_UPDATE_KEYS: Array<keyof UserDataUpdate> = [
   "telemetryOrganizationId",
   "organizations",
   "groups",
-  "flags",
   "enforceUpdateMillis",
   "partner",
   "partnerPrincipals",
@@ -235,11 +230,6 @@ export type AuthState = {
     name: string;
   }>;
 
-  /**
-   * List of feature flags for the user.
-   */
-  readonly flags: string[];
-
   /**
    * List of milestones for the user. A Milestone represents progress through the PixieBrix product.
    */

src/auth/authUtils.ts

@@ -17,7 +17,6 @@
 
 import { type Me } from "@/types/contract";
 import { type UserDataUpdate, type AuthState } from "@/auth/authTypes";
-import { readAuthData } from "@/auth/token";
 
 // Used by the app
 function selectOrganizations(
@@ -52,7 +51,6 @@ export function selectUserDataUpdate({
   telemetry_organization: telemetryOrganization,
   organization_memberships: organizationMemberships = [],
   group_memberships = [],
-  flags = [],
   partner,
   enforce_update_millis: enforceUpdateMillis,
   partner_principals: partnerPrincipals = [],
@@ -67,7 +65,6 @@ export function selectUserDataUpdate({
     email: email!,
     organizationId: organization?.id ?? null,
     telemetryOrganizationId: telemetryOrganization?.id ?? null,
-    flags,
     organizations,
     groups,
     partner: partner ?? null,
@@ -84,7 +81,6 @@ export function selectExtensionAuthState({
   telemetry_organization,
   is_onboarded: isOnboarded,
   test_account: isTestAccount = false,
-  flags = [],
   milestones = [],
   organization_memberships: organizationMemberships = [],
   group_memberships = [],
@@ -106,18 +102,8 @@ export function selectExtensionAuthState({
     telemetryOrganizationId: telemetry_organization?.id,
     organizations,
     groups,
-    flags,
     milestones,
     partner,
     enforceUpdateMillis,
   };
 }
-
-/**
- * Returns true if the specified flag is on for the current user.
- * @param flag the feature flag to check
- */
-export async function flagOn(flag: string): Promise<boolean> {
-  const authData = await readAuthData();
-  return authData.flags?.includes(flag) ?? false;
-}

src/auth/featureFlags.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { StorageItem } from "webext-storage";
+import { getApiClient } from "@/data/service/apiClient";
+import { type components } from "@/types/swagger";
+
+const TIME_TO_EXPIRATION_MS = 1000 * 30; // 30 seconds
+
+const featureFlagStorage = new StorageItem("featureFlags", {
+  defaultValue: {
+    flags: [] as string[],
+    lastFetchedTime: 0,
+  },
+});
+
+/**
+ * Returns true if the specified flag is on for the current user.
+ * @param flag the feature flag to check
+ */
+export async function flagOn(flag: string): Promise<boolean> {
+  const { flags: cachedFlags = [], lastFetchedTime = 0 } =
+    (await featureFlagStorage.get()) ?? {};
+  let flags = cachedFlags;
+  if (Date.now() - lastFetchedTime > TIME_TO_EXPIRATION_MS) {
+    const client = await getApiClient();
+    const { data, status } =
+      await client.get<components["schemas"]["Me"]>("/api/me/");
+    if (status >= 400) {
+      console.debug("Failed to fetch feature flags");
+    } else {
+      const newFlags = [...(data.flags ?? [])];
+      await featureFlagStorage.set({
+        flags: newFlags,
+        lastFetchedTime: Date.now(),
+      });
+      flags = newFlags;
+    }
+  }
+
+  return flags.includes(flag);
+}

src/auth/useLinkState.ts

@@ -19,7 +19,7 @@ import {
   addListener as addAuthListener,
   isLinked,
   removeListener as removeAuthListener,
-} from "@/auth/token";
+} from "@/auth/authStorage";
 import useAsyncState from "@/hooks/useAsyncState";
 import { useEffect } from "react";
 

src/auth/useRequiredPartnerAuth.ts

@@ -24,7 +24,7 @@ import {
   addListener as addAuthListener,
   readPartnerAuthData,
   removeListener as removeAuthListener,
-} from "@/auth/token";
+} from "@/auth/authStorage";
 import { useEffect } from "react";
 import { AUTOMATION_ANYWHERE_PARTNER_KEY } from "@/data/service/constants";
 import { type AuthState } from "@/auth/authTypes";

src/background/deploymentUpdater.test.ts

@@ -24,7 +24,7 @@ import MockAdapter from "axios-mock-adapter";
 import axios from "axios";
 import { updateDeployments } from "@/background/deploymentUpdater";
 import reportEvent from "@/telemetry/reportEvent";
-import { isLinked, readAuthData } from "@/auth/token";
+import { isLinked, readAuthData } from "@/auth/authStorage";
 import { refreshRegistries } from "@/hooks/useRefreshRegistries";
 import { isUpdateAvailable } from "@/background/installer";
 import {
@@ -73,7 +73,7 @@ jest.mock("@/telemetry/reportEvent");
 jest.mock("@/sidebar/messenger/api", () => {});
 jest.mock("@/contentScript/messenger/api");
 
-jest.mock("@/auth/token", () => ({
+jest.mock("@/auth/authStorage", () => ({
   getExtensionToken: async () => "TESTTOKEN",
   getAuthHeaders: jest.fn().mockResolvedValue({}),
   readAuthData: jest.fn().mockResolvedValue({

src/background/deploymentUpdater.ts

@@ -19,7 +19,7 @@ import { type Deployment, type Me } from "@/types/contract";
 import { isEmpty, partition } from "lodash";
 import reportError from "@/telemetry/reportError";
 import { getUUID } from "@/telemetry/telemetryHelpers";
-import { isLinked, readAuthData, updateUserData } from "@/auth/token";
+import { isLinked, readAuthData, updateUserData } from "@/auth/authStorage";
 import reportEvent from "@/telemetry/reportEvent";
 import { refreshRegistries } from "@/hooks/useRefreshRegistries";
 import {

src/background/installer.test.ts

@@ -20,7 +20,7 @@ import {
   openInstallPage,
   handleInstall,
 } from "@/background/installer";
-import * as auth from "@/auth/token";
+import * as auth from "@/auth/authStorage";
 import { locator } from "@/background/locator";
 import { uuidv4 } from "@/types/helpers";
 import { waitForEffect } from "@/testUtils/testHelpers";
@@ -33,18 +33,14 @@ jest.mock("@/data/service/baseService", () => ({
   getBaseURL: jest.fn().mockResolvedValue("https://app.pixiebrix.com"),
 }));
 
-jest.mock("@/auth/token", () => ({
+jest.mock("@/auth/authStorage", () => ({
   isLinked: jest.fn().mockResolvedValue(false),
   getExtensionToken: jest.fn().mockResolvedValue(null),
   getUserData: jest.fn().mockResolvedValue(null),
 }));
 
 jest.mock("@/background/telemetry");
 
-jest.mock("@/store/syncFlags", () => ({
-  syncFlagOn: jest.fn().mockResolvedValue(false),
-}));
-
 jest.mock("@/background/locator", () => ({
   locator: {
     locateAllForService: jest.fn().mockResolvedValue([]),

src/background/installer.ts

@@ -22,7 +22,7 @@ import { getUUID } from "@/telemetry/telemetryHelpers";
 import { allowsTrack, dntConfig } from "@/telemetry/dnt";
 import { gt } from "semver";
 import { getBaseURL } from "@/data/service/baseService";
-import { getExtensionToken, getUserData, isLinked } from "@/auth/token";
+import { getExtensionToken, getUserData, isLinked } from "@/auth/authStorage";
 import { isCommunityControlRoom } from "@/contrib/automationanywhere/aaUtils";
 import { isEmpty } from "lodash";
 import { expectContext } from "@/utils/expectContext";

src/background/makeConfiguredRequest.test.ts

@@ -19,7 +19,7 @@ import serviceRegistry from "@/integrations/registry";
 import axios, { type AxiosError, type AxiosRequestConfig } from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { performConfiguredRequest } from "./requests";
-import * as token from "@/auth/token";
+import * as token from "@/auth/authStorage";
 import Locator, * as locator from "@/integrations/locator";
 import { validateRegistryId } from "@/types/helpers";
 import enrichAxiosErrors from "@/utils/enrichAxiosErrors";
@@ -55,7 +55,7 @@ jest.mock("@/background/auth/getToken", () => ({
   __esModule: true,
   getToken: jest.fn().mockResolvedValue({ token: "iamatoken" }),
 }));
-jest.mock("@/auth/token");
+jest.mock("@/auth/authStorage");
 jest.mock("@/integrations/locator");
 
 // Use real version of pixiebrixConfigurationFactory

src/background/messenger/external/_implementation.ts

@@ -19,7 +19,7 @@
  * @file THIS FILE IS MEANT TO BE IMPORTED EXCLUSIVELY BY ./api.js
  */
 
-import { linkExtension } from "@/auth/token";
+import { linkExtension } from "@/auth/authStorage";
 import { type TokenAuthData } from "@/auth/authTypes";
 import reportEvent from "@/telemetry/reportEvent";
 import { Events } from "@/telemetry/events";

src/background/messenger/external/api.ts

@@ -22,7 +22,7 @@
 
 import { _liftBackground as liftExternal } from "@/background/externalProtocol";
 import * as local from "@/background/messenger/external/_implementation";
-import { readPartnerAuthData } from "@/auth/token";
+import { readPartnerAuthData } from "@/auth/authStorage";
 
 export const connectPage = liftExternal("CONNECT_PAGE", async () =>
   browser.runtime.getManifest(),

src/background/messenger/strict/registration.ts

@@ -39,7 +39,7 @@ import { rememberFocus } from "@/utils/focusTracker";
 import writeToClipboardInFocusedContext from "@/background/clipboard";
 import * as registry from "@/registry/packageRegistry";
 import serviceRegistry from "@/integrations/registry";
-import { getUserData } from "@/auth/token";
+import { getUserData } from "@/auth/authStorage";
 import {
   clearExtensionDebugLogs,
   clearLog,

src/background/navigation.ts

@@ -23,7 +23,7 @@ import { isScriptableUrl } from "webext-content-scripts";
 import { debounce } from "lodash";
 import { canAccessTab as canInjectTab, getTabUrl } from "webext-tools";
 import { getTargetState } from "@/contentScript/ready";
-import { flagOn } from "@/auth/authUtils";
+import { flagOn } from "@/auth/featureFlags";
 
 export function reactivateEveryTab(): void {
   console.debug("Reactivate all tabs");

src/background/partnerIntegrations.test.ts

@@ -24,7 +24,7 @@ import tokenIntegrationDefinition from "@contrib/integrations/automation-anywher
 import oauthIntegrationDefinition from "@contrib/integrations/automation-anywhere-oauth2.yaml";
 import { locator as serviceLocator } from "@/background/locator";
 import { uuidv4 } from "@/types/helpers";
-import { readPartnerAuthData, setPartnerAuth } from "@/auth/token";
+import { readPartnerAuthData, setPartnerAuth } from "@/auth/authStorage";
 import { syncRemotePackages } from "@/registry/memoryRegistry";
 import { type RegistryId } from "@/types/registryTypes";
 import { type IntegrationConfig } from "@/integrations/integrationTypes";
@@ -45,7 +45,7 @@ const integrationDefinitionMap = new Map([
   [CONTROL_ROOM_OAUTH_INTEGRATION_ID, oauthIntegrationDefinition],
 ]);
 
-jest.mock("@/auth/token", () => ({
+jest.mock("@/auth/authStorage", () => ({
   readPartnerAuthData: jest.fn().mockResolvedValue({}),
   setPartnerAuth: jest.fn(),
 }));

src/background/partnerIntegrations.ts

@@ -20,7 +20,7 @@ import { flatten, isEmpty } from "lodash";
 import { expectContext } from "@/utils/expectContext";
 import { type RegistryId } from "@/types/registryTypes";
 import launchOAuth2Flow from "@/background/auth/launchOAuth2Flow";
-import { readPartnerAuthData, setPartnerAuth } from "@/auth/token";
+import { readPartnerAuthData, setPartnerAuth } from "@/auth/authStorage";
 import serviceRegistry from "@/integrations/registry";
 import axios from "axios";
 import { getBaseURL } from "@/data/service/baseService";

src/background/requests.ts

@@ -23,7 +23,7 @@ import axios, {
 } from "axios";
 import { pixiebrixConfigurationFactory } from "@/integrations/locator";
 import serviceRegistry from "@/integrations/registry";
-import { getExtensionToken } from "@/auth/token";
+import { getExtensionToken } from "@/auth/authStorage";
 import { locator } from "@/background/locator";
 import { isEmpty } from "lodash";
 import launchOAuth2Flow from "@/background/auth/launchOAuth2Flow";

src/background/restrictUnauthenticatedUrlAccess.test.ts

@@ -25,13 +25,13 @@ import {
   isLinked,
   TEST_clearListeners,
   TEST_triggerListeners,
-} from "@/auth/token";
+} from "@/auth/authStorage";
 import { waitForEffect } from "@/testUtils/testHelpers";
 import { tabFactory } from "@/testUtils/factories/browserFactories";
 
-jest.mock("@/auth/token", () => ({
+jest.mock("@/auth/authStorage", () => ({
   __esModule: true,
-  ...jest.requireActual("@/auth/token"),
+  ...jest.requireActual("@/auth/authStorage"),
   isLinked: jest.fn(),
 }));
 

src/background/restrictUnauthenticatedUrlAccess.ts

@@ -17,7 +17,7 @@
 
 import { type OrganizationAuthUrlPattern } from "@/types/contract";
 import { readManagedStorage } from "@/store/enterprise/managedStorage";
-import { addListener as addAuthListener, isLinked } from "@/auth/token";
+import { addListener as addAuthListener, isLinked } from "@/auth/authStorage";
 import { validateUUID } from "@/types/helpers";
 import { type UUID } from "@/types/stringTypes";
 import { testMatchPatterns } from "@/bricks/available";