Fix copy to clipboard (#83)

* Fixed copying to clipboard
* Fixed width for form and guide
* Removed cancel button

Author: jackcloudquery

etc/plugin-config-ui-lib.api.md

@@ -381,14 +381,13 @@ export interface FormFieldResetProps {
 }
 
 // @public
-export function FormFooter({ isUpdating, isSubmitting, isTestingConnection, testConnectionError, pluginKind, submitPayload, onCancel, onCancelTestConnection, onDelete, onGoToPreviousStep, onTestConnectionSuccess, submitLabel, submitDisabled, showPreviousStepButton, pluginName, teamName, testConnectionId, }: FormFooterProps): JSX_2.Element;
+export function FormFooter({ isUpdating, isSubmitting, isTestingConnection, testConnectionError, pluginKind, submitPayload, onCancelTestConnection, onDelete, onGoToPreviousStep, onTestConnectionSuccess, submitLabel, submitDisabled, showPreviousStepButton, pluginName, teamName, testConnectionId, }: FormFooterProps): JSX_2.Element;
 
 // @public (undocumented)
 export interface FormFooterProps {
     isSubmitting: boolean;
     isTestingConnection: boolean;
     isUpdating: boolean;
-    onCancel: () => void;
     onCancelTestConnection: () => void;
     onDelete: () => Promise<void>;
     onGoToPreviousStep: () => void;
@@ -926,7 +925,6 @@ export function useFormActions<PluginKind extends 'source' | 'destination'>({ ge
     apiBaseUrl?: string;
 }): {
     submitError: any;
-    handleCancel: () => void;
     handleCancelTestConnection: () => void;
     handleDelete: () => Promise<void>;
     handleGoToPreviousStep: () => void;

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudquery/plugin-config-ui-lib",
   "description": "Plugin configuration UI library for CloudQuery Cloud App",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "private": false,
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package.json

@@ -15,7 +15,20 @@ export function CopyToClipboardButton({ sx, text }: Props) {
   const [wasCopied, setWasCopied] = useState(false);
 
   const handleClick = () => {
+    // Because the code is running in an iframe but elements
+    // are rendered in the parent window, we need to create a button
+    // to focus and click it to establish user activation
+    const button = document.createElement('button');
+    button.style.position = 'fixed';
+    button.style.opacity = '0';
+    button.style.pointerEvents = 'none';
+    document.body.append(button);
+    button.focus();
+    button.click();
+
     navigator.clipboard.writeText(text);
+
+    button.remove();
     setWasCopied(true);
   };
 

src/components/display/codeSnippet/copyToClipboard.tsx

@@ -22,8 +22,6 @@ export interface FormFooterProps {
   pluginKind: 'source' | 'destination';
   /** Payload to be submitted, containing form values and connection ID */
   submitPayload: (FormValues & { connectionId: string }) | undefined;
-  /** Callback to cancel the current action */
-  onCancel: () => void;
   /** Callback to cancel the connection test */
   onCancelTestConnection: () => void;
   /** Callback to handle delete action */
@@ -60,7 +58,6 @@ export function FormFooter({
   testConnectionError,
   pluginKind,
   submitPayload,
-  onCancel,
   onCancelTestConnection,
   onDelete,
   onGoToPreviousStep,
@@ -100,7 +97,7 @@ export function FormFooter({
               size="medium"
               variant="contained"
             >
-              Delete this {pluginKind === 'source' ? 'integration' : 'destination'}
+              Delete {pluginKind === 'source' ? 'integration' : 'destination'}
             </Button>
           )}
           {showPreviousStepButton && (
@@ -109,26 +106,15 @@ export function FormFooter({
             </Button>
           )}
         </Stack>
-        <Stack
-          direction="row"
-          spacing={2}
-          sx={{
-            alignItems: 'center',
-          }}
+        <Button
+          loading={isBusy}
+          size="medium"
+          variant="contained"
+          type="submit"
+          disabled={submitDisabled}
         >
-          <Button disabled={isBusy} onClick={onCancel} size="medium">
-            Cancel
-          </Button>
-          <Button
-            loading={isBusy}
-            size="medium"
-            variant="contained"
-            type="submit"
-            disabled={submitDisabled}
-          >
-            {submitLabel || 'Test connection and save'}
-          </Button>
-        </Stack>
+          {submitLabel || 'Test and save'}
+        </Button>
       </Stack>
       {(isTestingConnection || testConnectionError || submitPayload) && (
         <FormFooterTestConnectionResult

src/components/display/formFooter/index.tsx

@@ -68,7 +68,6 @@ export function ConfigUIForm({ prepareSubmitValues, container }: ConfigUIFormPro
   useFormCurrentValues(pluginUiMessageHandler, getCurrentValues);
 
   const {
-    handleCancel,
     handleCancelTestConnection,
     handleDelete,
     handleGoToPreviousStep,
@@ -221,7 +220,7 @@ export function ConfigUIForm({ prepareSubmitValues, container }: ConfigUIFormPro
             <Box
               sx={{
                 flex: '1 1 0',
-                minWidth: 0,
+                minWidth: 435,
                 position: 'relative',
                 zIndex: 2,
               }}
@@ -262,7 +261,6 @@ export function ConfigUIForm({ prepareSubmitValues, container }: ConfigUIFormPro
                     isSubmitting={isSubmitting || submitGuardLoading}
                     testConnectionError={parsedTestConnectionError}
                     submitPayload={submitPayload}
-                    onCancel={handleCancel}
                     onCancelTestConnection={handleCancelTestConnection}
                     onTestConnectionSuccess={onTestConnectionSuccess}
                     onDelete={handleDelete}
@@ -278,7 +276,12 @@ export function ConfigUIForm({ prepareSubmitValues, container }: ConfigUIFormPro
             </Box>
             <Box
               sx={{
-                width: { xs: 360, lg: 500, xl: '40%' },
+                width: {
+                  xs: 360,
+                  lg: `calc(50% - (${theme.spacing(5)} / 2))`,
+                  xl: '500px',
+                  xxl: '40%',
+                },
                 minWidth: 360,
                 position: 'sticky',
                 top: 10,

src/components/form/configUIForm.tsx

@@ -9,7 +9,6 @@ import {
   formMessageTypes,
   pluginUiMessageTypes,
 } from '@cloudquery/plugin-config-ui-connector';
-import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
@@ -61,50 +60,8 @@ export function CloudAppMock({
 }: CloudAppMockProps) {
   const [testConnectionValues, setTestConnectionValues] = useState<Record<string, any>>();
   const [submitValues, setSubmitValues] = useState<Record<string, any>>();
-  const [errors, setErrors] = useState<string>('');
   const searchParams = useMemo(() => new URLSearchParams(window.location.search), []);
 
-  const handleSubmit = async () => {
-    formMessageHandler.sendMessage('validate');
-    let unsubscribeValidationPassed: (() => void) | undefined;
-    let unsubscribeValidationFailed: (() => void) | undefined;
-
-    formMessageHandler.sendMessage('is_busy', {
-      status: true,
-    });
-
-    try {
-      const values = await new Promise((resolve, reject) => {
-        unsubscribeValidationPassed = formMessageHandler.subscribeToMessageOnce(
-          'validation_passed',
-          ({ values }) => {
-            resolve(values);
-          },
-        );
-        unsubscribeValidationFailed = formMessageHandler.subscribeToMessageOnce(
-          'validation_failed',
-          ({ errors }) => reject(errors),
-        );
-      }).finally(() => {
-        unsubscribeValidationPassed?.();
-        unsubscribeValidationFailed?.();
-      });
-
-      setErrors('');
-      setSubmitValues(values as Record<string, any>);
-    } catch (error) {
-      unsubscribeValidationPassed?.();
-      unsubscribeValidationFailed?.();
-
-      setSubmitValues(undefined);
-      setErrors(JSON.stringify(error, null, 2));
-    }
-
-    formMessageHandler.sendMessage('is_busy', {
-      status: false,
-    });
-  };
-
   useEffect(() => {
     formMessageHandler.sendMessage('init', {
       initialValues: initialValues
@@ -244,18 +201,6 @@ export function CloudAppMock({
       >
         {children}
       </Stack>
-      <Stack
-        direction="row"
-        spacing={2}
-        sx={{
-          justifyContent: 'flex-end',
-          padding: 2,
-        }}
-      >
-        <Button onClick={handleSubmit} variant="contained">
-          Submit
-        </Button>
-      </Stack>
       <Stack
         sx={{
           padding: 2,
@@ -273,8 +218,6 @@ export function CloudAppMock({
         <pre style={{ wordBreak: 'break-all', whiteSpace: 'break-spaces' }}>
           {JSON.stringify(submitValues, null, 2) || '-'}
         </pre>
-        <div>Errors:</div>
-        <pre style={{ wordBreak: 'break-all', whiteSpace: 'break-spaces' }}>{errors || '-'}</pre>
       </Stack>
     </>
   );

src/components/utils/cloudAppMock.tsx

@@ -174,7 +174,7 @@ export const deletePlugin = async ({
     }),
   ).toHaveValue(pluginNewName);
 
-  await iframeElement.getByRole('button', { name: `Delete this ${kind}` }).click();
+  await iframeElement.getByRole('button', { name: `Delete ${kind}` }).click();
   await click(page, page.getByText(`Delete ${kind}`));
 
   await expect(page.getByText(pluginNewName)).toHaveCount(0, { timeout: 15_000 });

src/e2e-utils/plugin-ui-e2e-helpers.ts

@@ -197,17 +197,12 @@ export function useFormActions<PluginKind extends 'source' | 'destination'>({
     pluginUiMessageHandler.sendMessage('go_to_previous_step');
   };
 
-  const handleCancel = () => {
-    pluginUiMessageHandler.sendMessage('cancel');
-  };
-
   const handleDelete = async () => {
     pluginUiMessageHandler.sendMessage('delete');
   };
 
   return {
     submitError,
-    handleCancel,
     handleCancelTestConnection,
     handleDelete,
     handleGoToPreviousStep,