flipt-io · markphelps · Jan 31, 2024 · Jan 19, 2024 · Jan 31, 2024 · Jan 31, 2024
@@ -7,7 +7,7 @@
   </head>
   <body class="h-full antialiased">
     <noscript class="flex h-full items-center justify-center">
-     Javascript is required for the Flipt UI
+      Javascript is required for the Flipt UI
     </noscript>
     <div id="root"></div>
 

@@ -32,6 +32,7 @@ import {
   generateCurlCommand,
   getErrorMessage
 } from '~/utils/helpers';
+import { selectCurrentRef } from '~/app/refs/refsSlice';
 
 function ResetOnNamespaceChange({ namespace }: { namespace: INamespace }) {
   const { resetForm } = useFormikContext();
@@ -65,7 +66,7 @@ export default function Console() {
   const { setSuccess } = useSuccess();
 
   const namespace = useSelector(selectCurrentNamespace);
-
+  const ref = useSelector(selectCurrentRef);
   const { data, error } = useListFlagsQuery(namespace.key);
 
   useEffect(() => {
@@ -121,7 +122,7 @@ export default function Console() {
       context: parsed
     };
 
-    evaluateV2(namespace.key, flag.key, flag.type, rest)
+    evaluateV2(ref, namespace.key, flag.key, flag.type, rest)
       .then((resp) => {
         setHasEvaluationError(false);
         setResponse(JSON.stringify(resp, null, 2));

@@ -277,8 +277,8 @@ export default function Rollouts(props: RolloutsProps) {
               </p>
             </div>
             <div
-              className="border-gray-200 pattern-boxes w-full border p-4 pattern-bg-gray-50 pattern-gray-100 pattern-opacity-100 pattern-size-2 lg:p-6 dark:pattern-bg-black
-  dark:pattern-gray-900"
+              className="border-gray-200 pattern-boxes w-full border p-4 pattern-bg-gray-50 pattern-gray-100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-black dark:pattern-gray-900
+  lg:p-6"
             >
               {rollouts && rollouts.length > 0 && (
                 <DndContext

@@ -282,8 +282,8 @@ export default function Rules() {
                 </p>
               </div>
               <div
-                className="border-gray-200 pattern-boxes w-full border p-4 pattern-bg-gray-50 pattern-gray-100 pattern-opacity-100 pattern-size-2 lg:w-3/4 lg:p-6
-  dark:pattern-bg-black dark:pattern-gray-900"
+                className="border-gray-200 pattern-boxes w-full border p-4 pattern-bg-gray-50 pattern-gray-100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-black dark:pattern-gray-900
+  lg:w-3/4 lg:p-6"
               >
                 <DndContext
                   sensors={sensors}

@@ -5,7 +5,8 @@ import { RootState } from '~/store';
 import { LoadingStatus } from '~/types/Meta';
 import { INamespace, INamespaceBase, INamespaceList } from '~/types/Namespace';
 import { baseQuery } from '~/utils/redux-rtk';
-const namespaceKey = 'namespace';
+
+export const namespaceKey = 'namespace';
 
 interface INamespacesState {
   namespaces: { [key: string]: INamespace };
@@ -112,4 +113,5 @@ export const {
   useDeleteNamespaceMutation,
   useUpdateNamespaceMutation
 } = namespaceApi;
+
 export default namespacesSlice.reducer;
@@ -0,0 +1,31 @@
+import { createSelector, createSlice } from '@reduxjs/toolkit';
+import { RootState } from '~/store';
+
+export const refsKey = 'refs';
+interface IRefState {
+  currentRef?: string;
+}
+
+const initialState: IRefState = {
+  currentRef: undefined
+};
+
+export const refsSlice = createSlice({
+  name: 'refs',
+  initialState,
+  reducers: {
+    currentRefChanged: (state, action) => {
+      const ref = action.payload;
+      state.currentRef = ref;
+    }
+  }
+});
+
+export const { currentRefChanged } = refsSlice.actions;
+
+export const selectCurrentRef = createSelector(
+  [(state: RootState) => state.refs.currentRef],
+  (ref) => ref
+);
+
+export default refsSlice.reducer;
@@ -114,13 +114,17 @@ export async function evaluate(
 //
 // evaluateV2
 export async function evaluateV2(
+  ref: string | undefined,
   namespaceKey: string,
   flagKey: string,
   flagType: FlagType,
   values: any
 ) {
-  const route = flagType === FlagType.BOOLEAN ? '/boolean' : '/variant';
-
+  let route = flagType === FlagType.BOOLEAN ? '/boolean' : '/variant';
+  if (ref) {
+    const q = new URLSearchParams({ reference: ref }).toString();
+    route += '?' + q;
+  }
   const body = {
     namespaceKey,
     flagKey: flagKey,

@@ -7,6 +7,7 @@ import {
 import { authProvidersApi } from '~/app/auth/authApi';
 import {
   namespaceApi,
+  namespaceKey,
   namespacesSlice
 } from '~/app/namespaces/namespacesSlice';
 import { flagsApi } from './app/flags/flagsApi';
@@ -20,11 +21,10 @@ import {
 import { segmentTag, segmentsApi } from './app/segments/segmentsApi';
 import { tokensApi } from './app/tokens/tokensApi';
 import { LoadingStatus } from './types/Meta';
+import { refsKey, refsSlice } from './app/refs/refsSlice';
 
 const listenerMiddleware = createListenerMiddleware();
 
-const namespaceKey = 'namespace';
-
 listenerMiddleware.startListening({
   matcher: isAnyOf(
     preferencesSlice.actions.themeChanged,
@@ -49,6 +49,25 @@ listenerMiddleware.startListening({
     );
   }
 });
+
+listenerMiddleware.startListening({
+  matcher: isAnyOf(refsSlice.actions.currentRefChanged),
+  effect: (_action, api) => {
+    // save to local storage
+    localStorage.setItem(
+      refsKey,
+      (api.getState() as RootState).refs.currentRef || ''
+    );
+
+    // reset internal cache
+    api.dispatch(namespaceApi.util.resetApiState());
+    api.dispatch(flagsApi.util.resetApiState());
+    api.dispatch(segmentsApi.util.resetApiState());
+    api.dispatch(rolloutsApi.util.resetApiState());
+    api.dispatch(rulesApi.util.resetApiState());
+  }
+});
+
 /*
  * It could be anti-pattern but it feels like the right thing to do.
  * The namespacesSlice holds the namespaces globally and doesn't refetch them
@@ -89,10 +108,15 @@ const preferencesState = JSON.parse(
   localStorage.getItem(preferencesKey) || '{}'
 );
 
+const currentRef = localStorage.getItem(refsKey) || undefined;
+
 const currentNamespace = localStorage.getItem(namespaceKey) || 'default';
 
 export const store = configureStore({
   preloadedState: {
+    refs: {
+      currentRef
+    },
     preferences: preferencesState,
     namespaces: {
       namespaces: {},
@@ -102,6 +126,7 @@ export const store = configureStore({
     }
   },
   reducer: {
+    refs: refsSlice.reducer,
     namespaces: namespacesSlice.reducer,
     preferences: preferencesSlice.reducer,
     meta: metaSlice.reducer,

@@ -1,6 +1,10 @@
-import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import {
+  BaseQueryFn,
+  FetchArgs,
+  FetchBaseQueryError,
+  fetchBaseQuery
+} from '@reduxjs/toolkit/query/react';
 import { apiURL, checkResponse, defaultHeaders } from '~/data/api';
-
 type CustomFetchFn = (
   url: RequestInfo,
   options: RequestInit | undefined
@@ -17,7 +21,40 @@ export const customFetchFn: CustomFetchFn = async (url, options) => {
   return response;
 };
 
-export const baseQuery = fetchBaseQuery({
-  baseUrl: apiURL,
-  fetchFn: customFetchFn
-});
+export const baseQuery: BaseQueryFn<
+  string | FetchArgs,
+  unknown,
+  FetchBaseQueryError
+> = async (args, api, extraOptions) => {
+  return fetchBaseQuery({
+    baseUrl: apiURL,
+    fetchFn: async (url, options) => {
+      const state = api.getState();
+      // @ts-ignore
+      const ref = state?.refs?.currentRef;
+      if (ref) {
+        const req = url instanceof Request ? url : new Request(url);
+        const q = new URLSearchParams({ reference: ref }).toString();
+        const blob = req.headers.get('Content-Type')
+          ? req.blob()
+          : Promise.resolve(undefined);
+        url = await blob.then(
+          (body) =>
+            new Request(req.url + '?' + q, {
+              method: req.method,
+              headers: req.headers,
+              body: body,
+              referrer: req.referrer,
+              referrerPolicy: req.referrerPolicy,
+              mode: req.mode,
+              credentials: req.credentials,
+              cache: req.cache,
+              redirect: req.redirect,
+              integrity: req.integrity
+            })
+        );
+      }
+      return customFetchFn(url, options);
+    }
+  })(args, api, extraOptions);
+};