feat: Change request preview integration (#7743)

Use API to check change request evaluation

frontend/src/component/playground/Playground/AdvancedPlayground.tsx

@@ -113,7 +113,12 @@ export const AdvancedPlayground: FC<{
     const { setToastData } = useToast();
     const [searchParams, setSearchParams] = useSearchParams();
     const [changeRequest, setChangeRequest] = useState<string>();
-    const { evaluateAdvancedPlayground, loading, errors } = usePlaygroundApi();
+    const {
+        evaluateAdvancedPlayground,
+        evaluateChangeRequestPlayground,
+        loading,
+        errors,
+    } = usePlaygroundApi();
     const [hasFormBeenSubmitted, setHasFormBeenSubmitted] = useState(false);
 
     useEffect(() => {
@@ -203,14 +208,21 @@ export const AdvancedPlayground: FC<{
     ) => {
         try {
             setConfigurationError(undefined);
-            const parsedContext = JSON.parse(context || '{}');
+            const parsedContext = {
-            const response = await evaluateAdvancedPlayground({
+                appName: 'playground',
+                ...JSON.parse(context || '{}'),
+            };
+
+            const response = changeRequest
+                ? await evaluateChangeRequestPlayground(changeRequest, {
+                      context: parsedContext,
+                      projects: [],
+                      environments: [],
+                  })
+                : await evaluateAdvancedPlayground({
                       environments: resolveEnvironments(environments),
                       projects: resolveProjects(projects),
-                context: {
+                      context: parsedContext,
-                    appName: 'playground',
-                    ...parsedContext,
-                },
                   });
 
             if (action && typeof action === 'function') {

frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.test.tsx

@@ -213,7 +213,7 @@ test('should show change request and disable other fields until removed', async
         const [environments, setEnvironments] = useState<string[]>([]);
         const [projects, setProjects] = useState<string[]>(['test-project']);
         const [token, setToken] = useState<string>();
-        const [changeRequest, setChangeRequest] = useState('CR #1');
+        const [changeRequest, setChangeRequest] = useState('1');
 
         const availableEnvironments = ['development', 'production'];
 
@@ -233,14 +233,15 @@ test('should show change request and disable other fields until removed', async
     };
     render(<Component />);
 
-    const changeRequestInput = await screen.findByDisplayValue('CR #1');
+    const changeRequestInput =
-    // expect(changeRequestInput).toHaveValue('CR #1');
+        await screen.findByDisplayValue('Change request #1');
     const viewButton = await screen.findByText(/View change request/);
     expect(viewButton).toHaveProperty(
         'href',
-        'http://localhost:3000/projects/test-project/change-requests/CR%20#1',
+        'http://localhost:3000/projects/test-project/change-requests/1',
     );
-    // TODO: check if other fields are disabled
+    const tokenInput = await screen.findByLabelText('API token');
+    expect(tokenInput).toBeDisabled();
 
     const clearButton = await screen.findByLabelText(/clear change request/i);
 

frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.tsx

@@ -277,20 +277,17 @@ export const PlaygroundConnectionFieldset: FC<
                             <Box sx={{ flex: 1 }}>
                                 <StyledChangeRequestInput
                                     label='Change request'
-                                    value={changeRequest || ''}
+                                    value={
+                                        changeRequest
+                                            ? `Change request #${changeRequest}`
+                                            : ''
+                                    }
                                     onChange={() => {}}
                                     type={'text'}
-                                    // error={Boolean(changeRequestError)}
-                                    // errorText={changeRequestError)}}
-                                    placeholder={'Enter your API token'}
-                                    data-testid={'PLAYGROUND_TOKEN_INPUT'}
                                     disabled
                                     InputProps={{
                                         endAdornment: (
-                                            <InputAdornment
+                                            <InputAdornment position='end'>
-                                                position='end'
-                                                data-testid='CR_INPUT_CLEAR_BTN'
-                                            >
                                                 <IconButton
                                                     aria-label='clear Change request results'
                                                     onClick={

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

@@ -24,8 +24,23 @@ export const usePlaygroundApi = () => {
         return res.json();
     };
 
+    const evaluateChangeRequestPlayground = async (
+        changeRequestId: string,
+        payload: AdvancedPlaygroundRequestSchema, // FIXME: type
+    ): Promise<AdvancedPlaygroundResponseSchema> => {
+        const path = `${URI}/change-request/${changeRequestId}`;
+        const req = createRequest(path, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+        });
+
+        const res = await makeRequest(req.caller, req.id);
+        return res.json();
+    };
+
     return {
         evaluateAdvancedPlayground,
+        evaluateChangeRequestPlayground,
         errors,
         loading,
     };