feat: prism component with super powers (#563)

* feat: prism component with super powers * fix: quick fix * fix: build errors
NangoHQ · Apr 21, 2023 · 6c2161d · 6c2161d
1 parent 6945a52
commit 6c2161d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 15 deletions.
diff --git a/packages/webapp/src/components/ui/prism/PrismPlus.tsx b/packages/webapp/src/components/ui/prism/PrismPlus.tsx
@@ -0,0 +1,38 @@
+import type { PrismProps } from '@mantine/prism';
+import { Prism } from '@mantine/prism';
+import classNames from 'classnames';
+import { useCallback, useState } from 'react';
+
+//just Prism component with some additional powers!
+
+export default function PrismPlus({ children, ...props }: PrismProps) {
+    const [isSecretVisible, setIsSecretVisible] = useState(false);
+
+    const toggleSecretVisibility = useCallback(() => setIsSecretVisible(!isSecretVisible), [isSecretVisible, setIsSecretVisible]);
+
+    const Switch = useCallback(() => {
+        return (
+            <span
+                onClick={toggleSecretVisibility}
+                className="bg-gray-300 hover:bg-gray-400 rounded px-2 py-1 text-sm text-gray-600 cursor-pointer absolute z-10 top-3 right-10"
+            >
+                {isSecretVisible ? 'hide' : 'show'}
+            </span>
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSecretVisible]);
+
+    return (
+        <div className="relative">
+            {isSecretVisible ? (
+                <Switch />
+            ) : (
+                <div className={classNames('absolute z-10', { 'h-full w-full backdrop-blur-sm bg-black/0': !isSecretVisible })}>
+                    <Switch />
+                </div>
+            )}
+
+            <Prism {...props}>{children}</Prism>
+        </div>
+    );
+}
diff --git a/packages/webapp/src/pages/ConnectionDetails.tsx b/packages/webapp/src/pages/ConnectionDetails.tsx
@@ -8,6 +8,8 @@ import { HelpCircle } from '@geist-ui/icons';
 import { useGetConnectionDetailsAPI, useDeleteConnectionAPI } from '../utils/api';
 import DashboardLayout from '../layout/DashboardLayout';
 import { LeftNavBarItems } from '../components/LeftNavBar';
+import SecretInput from '../components/ui/SecretInput';
+import PrismPlus from '../components/ui/prism/PrismPlus';
 
 interface Connection {
     id: number;
@@ -161,9 +163,8 @@ We could not retrieve and/or refresh your access token due to the following erro
                                             <label htmlFor="email" className="text-text-light-gray block text-sm font-semibold">
                                                 Access Token
                                             </label>
-                                            <Prism language="bash" colorScheme="dark">
-                                                {connection.accessToken}
-                                            </Prism>
+
+                                            <SecretInput disabled defaultValue={connection.accessToken} copy={true} />
                                         </div>
                                     </div>
                                 )}
@@ -183,9 +184,7 @@ We could not retrieve and/or refresh your access token due to the following erro
                                             <label htmlFor="email" className="text-text-light-gray block text-sm font-semibold">
                                                 Refresh Token
                                             </label>
-                                            <Prism language="bash" colorScheme="dark">
-                                                {connection.refreshToken}
-                                            </Prism>
+                                            <SecretInput disabled defaultValue={connection.refreshToken} copy={true} />
                                         </div>
                                     </div>
                                 )}
@@ -195,9 +194,7 @@ We could not retrieve and/or refresh your access token due to the following erro
                                             <label htmlFor="email" className="text-text-light-gray block text-sm font-semibold">
                                                 OAuth Token
                                             </label>
-                                            <Prism language="bash" colorScheme="dark">
-                                                {connection.oauthToken}
-                                            </Prism>
+                                            <SecretInput disabled defaultValue={connection.oauthToken} copy={true} />
                                         </div>
                                     </div>
                                 )}
@@ -207,9 +204,7 @@ We could not retrieve and/or refresh your access token due to the following erro
                                             <label htmlFor="email" className="text-text-light-gray block text-sm font-semibold">
                                                 OAuth Token Secret
                                             </label>
-                                            <Prism language="bash" colorScheme="dark">
-                                                {connection.oauthTokenSecret}
-                                            </Prism>
+                                            <SecretInput disabled defaultValue={connection.oauthTokenSecret} copy={true} />
                                         </div>
                                     </div>
                                 )}
@@ -238,14 +233,13 @@ We could not retrieve and/or refresh your access token due to the following erro
                                         <label htmlFor="email" className="text-text-light-gray block text-sm font-semibold">
                                             Raw Token Response
                                         </label>
-                                        <Prism language="json" colorScheme="dark">
+                                        <PrismPlus language="json" colorScheme="dark">
                                             {JSON.stringify(connection.rawCredentials, null, 4) || '{}'}
-                                        </Prism>
+                                        </PrismPlus>
                                     </div>
                                 </div>
                             </div>
                         )}
-
                         {serverErrorMessage && (
                             <div className="mx-8 mt-8">
                                 <p className="mt-6 text-sm text-red-600">{serverErrorMessage}</p>