feat: make local storage work and make feedback url configurable (#5738)

Make storage work react way.
Make feedback url configurable by env variable.

frontend/src/hooks/api/actions/useUserFeedbackApi/useUserFeedbackApi.ts

@@ -1,40 +1,41 @@
-import { IInternalBanner } from 'interfaces/banner';
 import useAPI from '../useApi/useApi';
 import { ProvideFeedbackSchema } from '../../../../openapi';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
-const DIRECT_ENDPOINT = 'https://sandbox.getunleash.io/enterprise/feedback';
 const ENDPOINT = 'feedback';
 
 export const useUserFeedbackApi = () => {
-    const addDirectFeedback = async (feedbackSchema: ProvideFeedbackSchema) => {
-        await fetch(DIRECT_ENDPOINT, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(feedbackSchema),
-        });
-    };
+    const { uiConfig } = useUiConfig();
+
     const { loading, makeRequest, createRequest, errors } = useAPI({
         propagateErrors: true,
     });
 
     const addFeedback = async (feedbackSchema: ProvideFeedbackSchema) => {
-        const requestId = 'addFeedback';
-        const req = createRequest(
-            ENDPOINT,
-            {
+        if (uiConfig.feedbackUriPath !== undefined) {
+            await fetch(uiConfig.feedbackUriPath, {
                 method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(feedbackSchema),
-            },
-            requestId,
-        );
+            });
+        } else {
+            const requestId = 'addFeedback';
+            const req = createRequest(
+                ENDPOINT,
+                {
+                    method: 'POST',
+                    body: JSON.stringify(feedbackSchema),
+                },
+                requestId,
+            );
 
-        const response = await makeRequest(req.caller, req.id);
-        return response.json();
+            const response = await makeRequest(req.caller, req.id);
+            return response.json();
+        }
     };
 
     return {
         addFeedback,
-        addDirectFeedback,
         errors,
         loading,
     };

frontend/src/hooks/useSubmittedFeedback.ts

@@ -1,20 +1,15 @@
 import { useEffect, useState } from 'react';
 import { getLocalStorageItem, setLocalStorageItem } from '../utils/storage';
 import { basePath } from 'utils/formatPath';
+import { createLocalStorage } from '../utils/createLocalStorage';
 
 export type IFeedbackCategory = 'search';
 
 export const useUserSubmittedFeedback = (category: IFeedbackCategory) => {
     const key = `${basePath}:unleash-userSubmittedFeedback:${category}`;
 
-    const [hasSubmittedFeedback, setHasSubmittedFeedback] = useState(() => {
-        return getLocalStorageItem<boolean>(key) || false;
-    });
-
-    useEffect(() => {
-        setLocalStorageItem(key, hasSubmittedFeedback);
-    }, [hasSubmittedFeedback, key]);
-
+    const { value: hasSubmittedFeedback, setValue: setHasSubmittedFeedback } =
+        createLocalStorage<Boolean>(key, false);
     return {
         hasSubmittedFeedback,
         setHasSubmittedFeedback,

frontend/src/interfaces/uiConfig.ts

@@ -4,6 +4,7 @@ import { Variant } from 'utils/variants';
 export interface IUiConfig {
     authenticationType?: string;
     baseUriPath?: string;
+    feedbackUriPath?: string;
     /**
      * @deprecated `useUiFlags` can be used instead
      * @example

src/lib/__snapshots__/create-config.test.ts.snap

@@ -69,6 +69,7 @@ exports[`should create default config 1`] = `
     "_maxListeners": undefined,
     Symbol(kCapture): false,
   },
+  "feedbackUriPath": undefined,
   "flagResolver": FlagResolver {
     "experiments": {
       "anonymiseEventLog": false,

src/lib/create-config.ts

@@ -549,6 +549,8 @@ export function createConfig(options: IUnleashOptions): IUnleashConfig {
 
     const rateLimiting = loadRateLimitingConfig(options);
 
+    const feedbackUriPath = process.env.FEEDBACK_URI_PATH;
+
     return {
         db,
         session,
@@ -584,6 +586,7 @@ export function createConfig(options: IUnleashOptions): IUnleashConfig {
         isEnterprise: isEnterprise,
         metricsRateLimiting,
         rateLimiting,
+        feedbackUriPath,
     };
 }
 

src/lib/openapi/spec/ui-config-schema.ts

@@ -43,6 +43,12 @@ export const uiConfigSchema = {
                 'The base URI path at which this Unleash instance is listening.',
             example: '/enterprise',
         },
+        feedbackUriPath: {
+            type: 'string',
+            description:
+                'The URI path at which the feedback endpoint is listening.',
+            example: '/feedback',
+        },
         disablePasswordAuth: {
             type: 'boolean',
             description:

src/lib/routes/admin-api/config.ts

@@ -142,6 +142,7 @@ class ConfigController extends Controller {
             networkViewEnabled: this.config.prometheusApi !== undefined,
             disablePasswordAuth,
             maintenanceMode,
+            feedbackUriPath: this.config.feedbackUriPath,
         };
 
         this.openApiService.respondWithValidation(

src/lib/types/option.ts

@@ -243,4 +243,5 @@ export interface IUnleashConfig {
     disableScheduler?: boolean;
     isEnterprise: boolean;
     rateLimiting: IRateLimiting;
+    feedbackUriPath?: string;
 }