feat(ui/console): add copy as curl button

ui/jest.config.ts

@@ -88,7 +88,9 @@ export default {
   // ],
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
-  // moduleNameMapper: {},
+  moduleNameMapper: {
+    "^~/(.*)$": "<rootDir>/src/$1"
+  },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
   // modulePathIgnorePatterns: [],

ui/src/app/console/Console.tsx

@@ -3,7 +3,7 @@
 import hljs from 'highlight.js';
 import javascript from 'highlight.js/lib/languages/json';
 import 'highlight.js/styles/tomorrow-night-bright.css';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
@@ -14,21 +14,34 @@
 import Button from '~/components/forms/buttons/Button';
 import Combobox from '~/components/forms/Combobox';
 import Input from '~/components/forms/Input';
-import { evaluateV2, listFlags } from '~/data/api';
+import {
+  evaluateURL,
+  evaluateV2,
+  listAuthMethods,
+  listFlags
+} from '~/data/api';
 import { useError } from '~/data/hooks/error';
+import { useSuccess } from '~/data/hooks/success';
 import {
   jsonValidation,
   keyValidation,
   requiredValidation
 } from '~/data/validations';
+import { IAuthMethod, IAuthMethodList } from '~/types/Auth';
 import {
   FilterableFlag,
+  FlagType,
   flagTypeToLabel,
   IFlag,
   IFlagList
 } from '~/types/Flag';
 import { INamespace } from '~/types/Namespace';
-import { classNames, getErrorMessage } from '~/utils/helpers';
+import {
+  classNames,
+  copyTextToClipboard,
+  generateCurlCommand,
+  getErrorMessage
+} from '~/utils/helpers';
 
 hljs.registerLanguage('json', javascript);
 
@@ -53,12 +66,16 @@
   const [selectedFlag, setSelectedFlag] = useState<FilterableFlag | null>(null);
   const [response, setResponse] = useState<string | null>(null);
   const [hasEvaluationError, setHasEvaluationError] = useState<boolean>(false);
+  const [isAuthRequired, setIsAuthRequired] = useState<boolean>(false);
 
   const { setError, clearError } = useError();
   const navigate = useNavigate();
+  const { setSuccess } = useSuccess();
 
   const namespace = useSelector(selectCurrentNamespace);
 
+  const codeRef = useRef<HTMLElement>(null);
+
   const loadData = useCallback(async () => {
     const initialFlagList = (await listFlags(namespace.key)) as IFlagList;
     const { flags } = initialFlagList;
@@ -77,6 +94,20 @@
     );
   }, [namespace.key]);
 
+  const checkIsAuthRequired = useCallback(() => {
+    listAuthMethods()
+      .then((resp: IAuthMethodList) => {
+        const enabledAuthMethods = resp.methods.filter(
+          (m: IAuthMethod) => m.enabled
+        );
+        setIsAuthRequired(enabledAuthMethods.length != 0);
+        clearError();
+      })
+      .catch((err) => {
+        setError(err);
+      });
+  }, [setError, clearError]);
+
   const handleSubmit = (flag: IFlag | null, values: ConsoleFormValues) => {
     const { entityId, context } = values;
 
@@ -110,9 +141,54 @@
       });
   };
 
+  const handleCopyAsCurl = (values: ConsoleFormValues) => {
+    let parsed = null;
+    try {
+      // need to unescape the context string
+      parsed = JSON.parse(values.context);
+    } catch (err) {
+      setHasEvaluationError(true);
+      setError('Context provided is invalid.');
+      return;
+    }
+    const uri =
+      window.location.origin +
+      evaluateURL +
+      (selectedFlag?.type === FlagType.BOOLEAN ? '/boolean' : '/variant');
+
+    let headers: Record<string, string> = {};
+
+    if (isAuthRequired) {
+      // user can generate an auth token and use it
+      headers.Authorization = 'Bearer <api-token>';
+    }
+
+    const command = generateCurlCommand({
+      method: 'POST',
+      body: {
+        ...values,
+        context: parsed,
+        namespaceKey: namespace.key
+      },
+      headers,
+      uri
+    });
+
+    copyTextToClipboard(command);
+
+    setSuccess(
+      'Command copied to clipboard'
+    );
+  };
+
   useEffect(() => {
+    if (codeRef.current) {
+      // must unset property 'highlighted' so that it can be highlighted again
+      // otherwise it gets highlighted the first time only
+      delete codeRef.current.dataset.highlighted;
+    }
     hljs.highlightAll();
-  }, [response]);
+  }, [response, codeRef]);
 
   useEffect(() => {
     loadData()
@@ -122,6 +198,10 @@
       });
   }, [clearError, loadData, setError]);
 
+  useEffect(() => {
+    checkIsAuthRequired();
+  }, [checkIsAuthRequired]);
+
   const initialvalues: ConsoleFormValues = {
     flagKey: selectedFlag?.key || '',
     entityId: uuidv4(),
@@ -223,6 +303,16 @@
                         </div>
                       </div>
                       <div className="flex justify-end">
+                        <Button
+                          className="ml-3"
+                          type="button"
+                          disabled={!(formik.dirty && formik.isValid)}
+                          onClick={() => {
+                            handleCopyAsCurl(formik.values);
+                          }}
+                        >
+                          Copy as curl
+                        </Button>
                         <Button
                           primary
                           className="ml-3"
@@ -241,14 +331,16 @@
             <div className="mt-8 w-full overflow-hidden md:w-1/2 md:pl-4">
               {response && (
                 <pre className="p-2 text-sm md:h-full">
-                  <code
-                    className={classNames(
-                      hasEvaluationError ? 'border-red-400 border-4' : '',
-                      'json rounded-sm md:h-full'
-                    )}
-                  >
-                    {response as React.ReactNode}
-                  </code>
+                  {hasEvaluationError ? (
+                    <p className="border-red-400 border-4">{response}</p>
+                  ) : (
+                    <code
+                      className="hljs json rounded-sm md:h-full"
+                      ref={codeRef}
+                    >
+                      {response as React.ReactNode}
+                    </code>
+                  )}
                 </pre>
               )}
               {!response && (

ui/src/components/console/ContextEditor.module.css

@@ -1,4 +1,5 @@
 .ContextEditor {
-  width: 100vw;
-  height: 50vh;
+  width: 100%;
+  min-height: 50vh;
+  height: 100%;
 }

ui/src/data/api.ts

@@ -4,7 +4,7 @@ import { IVariantBase } from '~/types/Variant';
 
 export const apiURL = '/api/v1';
 const authURL = '/auth/v1';
-const evaluateURL = '/evaluate/v1';
+export const evaluateURL = '/evaluate/v1';
 const metaURL = '/meta';
 const csrfTokenHeaderKey = 'x-csrf-token';
 const sessionKey = 'session';

ui/src/types/Auth.ts

@@ -1,5 +1,9 @@
 export interface IAuthMethod {
-  method: 'METHOD_TOKEN' | 'METHOD_OIDC' | 'METHOD_GITHUB';
+  method:
+    | 'METHOD_TOKEN'
+    | 'METHOD_OIDC'
+    | 'METHOD_GITHUB'
+    | 'METHOD_KUBERNETES';
   enabled: boolean;
   sessionCompatible: boolean;
   metadata: { [key: string]: any };

ui/src/types/Curl.ts

@@ -0,0 +1,6 @@
+export interface ICurlOptions {
+  method: 'GET' | 'POST'; // maybe we'll need to extend this in the future
+  headers?: Record<string, string>;
+  body?: any;
+  uri: string;
+}

ui/src/utils/helpers.ts

@@ -1,3 +1,6 @@
+import { defaultHeaders } from '~/data/api';
+import { ICurlOptions } from '~/types/Curl';
+
 export function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(' ');
 }
@@ -87,3 +90,19 @@ function toErrorWithMessage(maybeError: unknown): ErrorWithMessage {
 export function getErrorMessage(error: unknown) {
   return toErrorWithMessage(error).message;
 }
+
+export function generateCurlCommand(curlOptions: ICurlOptions) {
+  const headers = { ...defaultHeaders(), ...curlOptions.headers };
+  const curlHeaders = Object.keys(headers)
+    .map((key) => `-H "${key}: ${headers[key]}"`)
+    .join(' ');
+
+  const curlData = `-d '${JSON.stringify(curlOptions.body)}'`;
+  return [
+    'curl',
+    `-X ${curlOptions.method}`,
+    curlHeaders,
+    curlData,
+    curlOptions.uri
+  ].join(' ');
+}