Feature/mashup-test-button

package.json

@@ -24,6 +24,7 @@
   ],
   "dependencies": {
     "@hookform/resolvers": "5.1.1",
+    "@radix-ui/react-popover": "^1.0.0",
     "@tanstack/react-table": "8.21.3",
     "ahooks": "3.9.0",
     "axios": "1.10.0",
@@ -42,6 +43,7 @@
     "react-router-dom": "7.6.3",
     "sonner": "2.0.6",
     "tailwind-merge": "3.3.1",
+    "uuid": "11.1.0",
     "zod": "3.25.74"
   },
   "devDependencies": {
@@ -67,4 +69,4 @@
     "unocss-preset-animations": "1.2.1",
     "vite": "7.0.2"
   }
-}
+}

src/App.jsx

@@ -12,6 +12,7 @@ import { ControlDetails } from '@/pages/app/ControlDetails';
 import { ComputationDetails } from '@/pages/app/ComputationDetails';
 import { CatalogWizard } from './pages/app/catalog/CatalogWizard.jsx';
 import { Mashups } from '@/pages/app/Mashups';
+import { ControlCreationAndTestPage } from '@/pages/app/mashups/ControlCreationAndTestPage';
 import { Scopes } from '@/pages/app/Scopes';
 import { Dashboards } from '@/pages/app/Dashboards';
 import { DashboardDetails } from '@/pages/app/dashboard/DashboardDetails';
@@ -60,7 +61,10 @@ function App() {
                 <Route path="folders/:id" element={<FolderDetails />} />
               </Route>
               <Route path="scopes" element={<Scopes />} />
-              <Route path="mashups" element={<Mashups />} />
+              <Route path="mashups">
+                <Route index element={<Mashups />} />
+                <Route path="control-test" element={<ControlCreationAndTestPage />} />
+              </Route>
               <Route path="secrets" element={<Secrets />} />
               <Route path="editor">
                 <Route index element={<Editor />} />

src/components/auth-provider.jsx

@@ -16,7 +16,7 @@ export const AuthProvider = ({ children }) => {
   // Ref to store the interceptor references for cleanup
   const axiosInterceptorRef = useRef(null);
   const nodeRedInterceptorRef = useRef(null);
-  
+
   // Handle node token change
   useEffect(() => {
     if (nodeRedToken) {
@@ -31,30 +31,30 @@ export const AuthProvider = ({ children }) => {
   // Refresh token on app boot
   useEffect(() => {
     void refreshUserToken();
-    
+
     // Configure interceptors if authenticated
     if (isAuthenticated) {
       setupInterceptors();
     }
-    
+
     // Cleanup interceptors on unmount
     return () => {
       cleanupInterceptors();
     };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
    * Configures the interceptors for axios and nodeRed clients
    */
   const setupInterceptors = () => {
     cleanupInterceptors();
-    
+
     axiosInterceptorRef.current = axiosClient.interceptors.response.use(
       response => response,
       axiosLogoutInterceptor
     );
-    
+
     nodeRedInterceptorRef.current = nodeRedClient.interceptors.response.use(
       response => response,
       axiosLogoutInterceptor
@@ -69,7 +69,7 @@ export const AuthProvider = ({ children }) => {
       axiosClient.interceptors.response.eject(axiosInterceptorRef.current);
       axiosInterceptorRef.current = null;
     }
-    
+
     if (nodeRedInterceptorRef.current !== null) {
       nodeRedClient.interceptors.response.eject(nodeRedInterceptorRef.current);
       nodeRedInterceptorRef.current = null;
@@ -135,16 +135,16 @@ export const AuthProvider = ({ children }) => {
 
         try {
           const refreshed = await refreshUserToken();
-          
+
           if (!refreshed) {
             throw new Error('Token refresh failed');
           }
-          
+
           // Update the original request with the new access token
           if (userData?.accessToken) {
             originalRequest.headers['Authorization'] = `Bearer ${userData.accessToken}`;
           }
-          
+
           processQueue(null);
           return axiosClient(originalRequest);
         } catch (err) {
@@ -156,11 +156,19 @@ export const AuthProvider = ({ children }) => {
           isRefreshing = false;
         }
       }
-      
+
       // If the request has already been retried, reject the promise
       return Promise.reject(error);
     };
-  })();  
+  })();
+
+
+  const encodeToBase64 = (str) => {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(str);
+    const binaryString = String.fromCharCode.apply(null, data)
+    return btoa(binaryString);
+  };
 
   /**
    * Logs in with a registered user
@@ -169,8 +177,10 @@ export const AuthProvider = ({ children }) => {
    * @param {string} credentials.password - Password
    * @returns {Promise} - Promise with the response
    */
-  async function authenticate ({ username, password }) {
+  async function authenticate({ username, password }) {
+    const basicAuth = encodeToBase64(`${username}:${password}`);
     const { message: _, ...userData } = await apiClient.post('/users/signIn', { username, password });
+    userData.basicAuth = basicAuth;
     setUserData(userData);
     setupInterceptors();
   };