Add support for multiple projects

wip

rm some logs

working

loading indicator works correctly

project setting

self cr

cr

rebase

project name

Author: rickary

flagsmith-jira-app/src/backend/flagsmith.ts

@@ -17,7 +17,7 @@ type PaginatedModels<TModel extends Model> = {
 
 export type Organisation = Model;
 export type Project = Model;
-export type Environment = Model & { api_key: string };
+export type Environment = Model & { api_key: string; project: number };
 
 export type Feature = Model & {
   id: number | string;
@@ -27,6 +27,8 @@ export type Feature = Model & {
   multivariate_options: unknown[];
   num_segment_overrides: number | null;
   num_identity_overrides: number | null;
+  project: number;
+  project_name: string;
 };
 
 export type EnvironmentFeatureState = Model & {
@@ -157,22 +159,59 @@ export const readEnvironments: ReadEnvironments = async ({ projectId }) => {
 };
 
 export type ReadFeatures = (args: {
-  projectId?: string;
+  projectIds?: string[];
   environmentId?: string;
 }) => Promise<Feature[]>;
 
 /** Read Flagsmith Features for stored API Key, given Project ID and optional Environment ID */
-export const readFeatures: ReadFeatures = async ({ projectId, environmentId }) => {
+export const readFeatures: ReadFeatures = async ({ projectIds, environmentId }) => {
   const apiKey = await readApiKey();
   checkApiKey(apiKey);
-  if (!projectId) throw new ApiError("Flagsmith project not connected", 400);
-  const params = new URLSearchParams({ is_archived: "false" });
-  if (environmentId) params.set("environment", environmentId);
-  const path = route`/projects/${projectId}/features/?${params}`;
-  const data = (await flagsmithApi(apiKey, path)) as PaginatedModels<Feature>;
-  const results = await unpaginate(apiKey, data);
-  if (results.length === 0) throw new ApiError("Flagsmith project has no features", 404);
-  return results;
+
+  if (!projectIds || projectIds.length === 0) {
+    throw new ApiError("Flagsmith project not connected", 400);
+  }
+
+  const allFeatures: Feature[] = [];
+  const organisationId = await readOrganisationId();
+  const projects = await readProjects({ organisationId });
+
+  for (const projectId of projectIds) {
+    const params = new URLSearchParams({ is_archived: "false" });
+    if (environmentId) params.set("environment", environmentId);
+
+    try {
+      const project = projects.find((p) => String(p.id) === String(projectId));
+
+      if (!project) {
+        throw new ApiError(`Flagsmith project ${projectId} not found`, 404);
+      }
+
+      const path = route`/projects/${projectId}/features/?${params}`;
+      const data = (await flagsmithApi(apiKey, path)) as PaginatedModels<Feature>;
+      const results = await unpaginate(apiKey, data);
+
+      const enrichedFeatures = results.map((feature) => ({
+        ...feature,
+        project_name: project.name,
+      }));
+
+      allFeatures.push(...enrichedFeatures);
+    } catch (error) {
+      // If a specific project has no features, we can log it but continue with others
+      if (error instanceof ApiError && error.code === 404) {
+        console.warn(`Flagsmith project ${projectId} has no features`);
+      } else {
+        throw error; // rethrow unexpected errors
+      }
+    }
+  }
+
+  if (allFeatures.length === 0) {
+    throw new ApiError("Flagsmith projects have no features", 404);
+  }
+
+  return allFeatures;
 };
 
 export type ReadEnvironmentFeatureState = (args: {
@@ -188,6 +227,7 @@ export const readEnvironmentFeatureState: ReadEnvironmentFeatureState = async ({
   const apiKey = await readApiKey();
   checkApiKey(apiKey);
   if (!envApiKey) throw new ApiError("Flagsmith environment not connected", 400);
+
   const path = route`/environments/${envApiKey}/featurestates/?feature_name=${featureName}`;
   const data = (await flagsmithApi(apiKey, path)) as PaginatedModels<EnvironmentFeatureState>;
   const results = await unpaginate(apiKey, data);

flagsmith-jira-app/src/frontend/components/IssueFeatureTables.tsx

@@ -13,7 +13,7 @@ import {
 } from "@forge/react";
 import { Fragment, useCallback, useState } from "react";
 
-import { usePromise } from "../../common";
+import { FLAGSMITH_APP, usePromise } from "../../common";
 import {
   Environment,
   EnvironmentFeatureState,
@@ -130,14 +130,12 @@ const makeRows = (projectUrl: string, state: FeatureState) => {
 };
 
 type IssueFeatureTableProps = {
-  projectUrl: string;
   environments: Environment[]; // must be non-empty
   // list of same feature in the context of each environment
   environmentFeatures: Feature[];
 };
 
 const IssueFeatureTable = ({
-  projectUrl,
   environments,
   environmentFeatures,
 }: IssueFeatureTableProps): JSX.Element => {
@@ -147,31 +145,60 @@ const IssueFeatureTable = ({
   // get id and name from first feature - assume non-empty
   const featureId = environmentFeatures[0]!.id;
   const featureName = environmentFeatures[0]!.name;
+  const featureProjectId = environmentFeatures[0]!.project;
+  const projectUrl = `${FLAGSMITH_APP}/project/${featureProjectId}`;
 
   /** Read feature state for each environment */
-  const readFeatureState = useCallback(
-    async (): Promise<FeatureState> => ({
-      featureId,
-      environments: await Promise.all(
-        environments.map(async (environment) => ({
-          ...(await readEnvironmentFeatureState({
+  const readFeatureState = useCallback(async (): Promise<FeatureState> => {
+    const matchingEnvs = environments.filter(
+      (env) => String(env.project) === String(featureProjectId),
+    );
+
+    const environmentFeatureStates = await Promise.all(
+      matchingEnvs.map(async (environment) => {
+        try {
+          const state = await readEnvironmentFeatureState({
             envApiKey: String(environment.api_key),
             featureName,
-          })),
-          name: environment.name,
-          api_key: String(environment.api_key),
-        })),
-      ),
-      counts: environmentFeatures.map((feature) => ({
+          });
+
+          return {
+            ...state,
+            name: environment.name,
+            api_key: String(environment.api_key),
+          };
+        } catch (err) {
+          return null;
+        }
+      }),
+    );
+
+    const validStates = environmentFeatureStates.filter(
+      (state): state is EnvironmentFeatureState => !!state,
+    );
+
+    const relevantFeatures = environmentFeatures.filter(
+      (f) => String(f.project) === String(featureProjectId),
+    );
+
+    return {
+      featureId,
+      environments: validStates,
+      counts: relevantFeatures.map((feature) => ({
         variations: feature.multivariate_options.length,
         segments: feature.num_segment_overrides ?? 0,
         identities: feature.num_identity_overrides ?? 0,
       })),
-    }),
-    [environments, environmentFeatures],
-  );
+    };
+  }, [environments, environmentFeatures]);
+
   const [state] = usePromise(
-    async () => (error === undefined ? readFeatureState() : undefined),
+    async () => {
+      if (error === undefined) {
+        return await readFeatureState();
+      }
+      return undefined;
+    },
     [error, readFeatureState],
     setError,
   );
@@ -198,47 +225,63 @@ const IssueFeatureTable = ({
 
 type FeatureTableData = {
   featureId: string;
-  baseFeature: Feature | undefined;
-  environmentFeatures: Feature[];
+  baseFeature: Feature;
+  envFeaturesForThisFeature: Feature[];
+  matchingEnvironments: Environment[];
 };
 
 const buildFeatureTableData = ({
   issueFeatureIds,
   features,
+  environments,
   environmentsFeatures,
 }: {
   issueFeatureIds: string[];
   features: Feature[];
+  environments: Environment[];
   environmentsFeatures: Feature[][];
 }): FeatureTableData[] => {
-  return issueFeatureIds.map((featureId) => {
-    const baseFeature = features.find((f) => String(f.id) === featureId);
+  return issueFeatureIds
+    .map((featureId) => {
+      const baseFeature = features.find((f) => String(f.id) === featureId);
+      if (!baseFeature) {
+        return null;
+      }
 
-    const envFeaturesForThisFeature = environmentsFeatures
-      .map((envFeatures) => {
+      const envFeaturesForThisFeature: Feature[] = [];
+      const matchingEnvironments: Environment[] = [];
+
+      environmentsFeatures.forEach((envFeatures, index) => {
         const matchingFeature = envFeatures.find((f) => String(f.id) === featureId);
-        return matchingFeature;
-      })
-      .filter(Boolean) as Feature[];
+        const environment = environments[index];
+        if (matchingFeature && environment !== undefined) {
+          envFeaturesForThisFeature.push(matchingFeature);
+          matchingEnvironments.push(environment);
+        }
+      });
 
-    return {
-      featureId,
-      baseFeature,
-      environmentFeatures: envFeaturesForThisFeature,
-    };
-  });
+      if (envFeaturesForThisFeature.length === 0 || matchingEnvironments.length === 0) {
+        return null;
+      }
+
+      return {
+        featureId,
+        baseFeature,
+        envFeaturesForThisFeature,
+        matchingEnvironments,
+      };
+    })
+    .filter((data): data is FeatureTableData => !!data);
 };
 
 type IssueFeatureTablesProps = {
-  projectUrl: string;
   // environments/environmentsFeatures are assumed to be same length/order
   environments: Environment[];
   environmentsFeatures: Feature[][];
   issueFeatureIds: string[];
 };
 
 const IssueFeatureTables = ({
-  projectUrl,
   environments,
   environmentsFeatures,
   issueFeatureIds,
@@ -254,38 +297,34 @@ const IssueFeatureTables = ({
   // iterate features from the first environment to get list of tables
   // (id/name/description are the same across environments)
   const features = environmentsFeatures[0];
-
   const featureTableData = buildFeatureTableData({
     issueFeatureIds,
     features,
+    environments,
     environmentsFeatures,
   });
 
   return (
     <Fragment>
-      {featureTableData.map(({ featureId, baseFeature, environmentFeatures }) => {
-        if (!baseFeature) {
-          return null;
-        }
-        return (
+      {featureTableData.map(
+        ({ featureId, baseFeature, matchingEnvironments, envFeaturesForThisFeature }) => (
           <Fragment key={featureId}>
             <Box xcss={{ marginTop: "space.300", marginBottom: "space.100" }}>
               <Text>
                 <Strong>
-                  {baseFeature.name}
+                  {baseFeature.name} ({baseFeature.project_name})
                   {baseFeature.description ? ": " : ""}
                 </Strong>
                 {baseFeature.description}
               </Text>
             </Box>
             <IssueFeatureTable
-              projectUrl={projectUrl}
-              environments={environments}
-              environmentFeatures={environmentFeatures}
+              environments={matchingEnvironments}
+              environmentFeatures={envFeaturesForThisFeature}
             />
           </Fragment>
-        );
-      })}
+        ),
+      )}
     </Fragment>
   );
 };

flagsmith-jira-app/src/frontend/components/IssueFeaturesForm.tsx

@@ -27,15 +27,32 @@ const IssueFeaturesForm = ({
   }, [props.issueFeatureIds]);
 
   const featureInputId = useId();
-  const featureOptions = useMemo(
-    () =>
-      features.map((each) => ({
-        label: each.name,
-        value: String(each.id),
-      })),
-    [features],
-  );
-  const featureValue = featureOptions.filter((option) => featureIds.includes(option.value)) ?? null;
+  const featureOptions = useMemo(() => {
+    const grouped = features.reduce(
+      (acc, feature) => {
+        const projectGroup = acc.find((group) => group.label === feature.project_name);
+        const option = {
+          label: feature.name,
+          value: String(feature.id),
+        };
+        if (projectGroup) {
+          projectGroup.options.push(option);
+        } else {
+          acc.push({
+            label: feature.project_name,
+            options: [option],
+          });
+        }
+        return acc;
+      },
+      [] as { label: string; options: { label: string; value: string }[] }[],
+    );
+    return grouped;
+  }, [features]);
+  const featureValue =
+    featureOptions
+      .flatMap((group) => group.options)
+      .filter((option) => featureIds.includes(option.value)) ?? null;
 
   const onFeatureChange = async (options: { value: string }[]) => {
     const featureIds = options.map((option) => option.value);