From 638a12c57194f3e40990fd0a0082d5ea7354c238 Mon Sep 17 00:00:00 2001 From: Aditya Pimpalkar Date: Fri, 15 Mar 2024 15:36:53 +0000 Subject: [PATCH] feat: iframe addition (chrome-extension) (#4418) * toggle iframe addition * React UI init * remove files * loading state files * render iframe logic * remove event * build fix * WIP * Ok * Cleaned --------- Co-authored-by: Lucas Bordeau --- packages/twenty-chrome-extension/loading.html | 12 +++ .../public/light-noise.png | Bin 0 -> 9657 bytes .../src/background/index.ts | 4 +- .../src/contentScript/index.ts | 50 ++++++++++++ .../twenty-chrome-extension/src/manifest.ts | 5 ++ .../src/options/Loading.tsx | 24 ++++++ .../src/options/index.tsx | 4 +- .../src/options/loading-index.tsx | 20 +++++ .../modules/api-key/components/ApiKeyForm.tsx | 73 +++++++++++++----- .../ui/display/loader/components/Loader.tsx | 38 +++++++++ packages/twenty-front/tsconfig.json | 2 +- 11 files changed, 206 insertions(+), 26 deletions(-) create mode 100644 packages/twenty-chrome-extension/loading.html create mode 100644 packages/twenty-chrome-extension/public/light-noise.png create mode 100644 packages/twenty-chrome-extension/src/options/Loading.tsx create mode 100644 packages/twenty-chrome-extension/src/options/loading-index.tsx create mode 100644 packages/twenty-chrome-extension/src/options/modules/ui/display/loader/components/Loader.tsx diff --git a/packages/twenty-chrome-extension/loading.html b/packages/twenty-chrome-extension/loading.html new file mode 100644 index 000000000..b286e663d --- /dev/null +++ b/packages/twenty-chrome-extension/loading.html @@ -0,0 +1,12 @@ + + + + + + Twenty + + +
+ + + diff --git a/packages/twenty-chrome-extension/public/light-noise.png b/packages/twenty-chrome-extension/public/light-noise.png new file mode 100644 index 0000000000000000000000000000000000000000..d7b3bc2c064a31ef0097871db02268610b349eb3 GIT binary patch literal 9657 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 { }); // Open options page when extension icon is clicked. -chrome.action.onClicked.addListener(() => { - openOptionsPage(); +chrome.action.onClicked.addListener((tab) => { + chrome.tabs.sendMessage(tab.id ?? 0, { action: 'TOGGLE' }); }); // This listens for an event from other parts of the extension, such as the content script, and performs the required tasks. diff --git a/packages/twenty-chrome-extension/src/contentScript/index.ts b/packages/twenty-chrome-extension/src/contentScript/index.ts index a541e0144..0e81cc94c 100644 --- a/packages/twenty-chrome-extension/src/contentScript/index.ts +++ b/packages/twenty-chrome-extension/src/contentScript/index.ts @@ -16,5 +16,55 @@ chrome.runtime.onMessage.addListener((message, _, sendResponse) => { insertButtonForPerson(); } + if (message.action === 'TOGGLE') { + toggle(); + } + sendResponse('Executing!'); }); + +const createIframe = () => { + const iframe = document.createElement('iframe'); + iframe.style.background = 'lightgrey'; + iframe.style.height = '100vh'; + iframe.style.width = '400px'; + iframe.style.position = 'fixed'; + iframe.style.top = '0px'; + iframe.style.right = '-400px'; + iframe.style.zIndex = '9000000000000000000'; + iframe.style.transition = 'ease-in-out 0.3s'; + return iframe; +}; + +const handleContentIframeLoadComplete = () => { + //If the pop-out window is already open then we replace loading iframe with our content iframe + if (loadingIframe.style.right === '0px') contentIframe.style.right = '0px'; + loadingIframe.style.display = 'none'; + contentIframe.style.display = 'block'; +}; + +//Creating one iframe where we are loading our front end in the background +const contentIframe = createIframe(); +contentIframe.style.display = 'none'; +contentIframe.src = `${import.meta.env.VITE_FRONT_BASE_URL}`; +contentIframe.onload = handleContentIframeLoadComplete; + +//Creating this iframe to show as a loading state until the above iframe loads completely +const loadingIframe = createIframe(); +loadingIframe.src = chrome.runtime.getURL('loading.html'); + +document.body.appendChild(loadingIframe); +document.body.appendChild(contentIframe); + +const toggleIframe = (iframe: HTMLIFrameElement) => { + if (iframe.style.right === '-400px' && iframe.style.display !== 'none') { + iframe.style.right = '0px'; + } else if (iframe.style.right === '0px' && iframe.style.display !== 'none') { + iframe.style.right = '-400px'; + } +}; + +const toggle = () => { + toggleIframe(loadingIframe); + toggleIframe(contentIframe); +}; diff --git a/packages/twenty-chrome-extension/src/manifest.ts b/packages/twenty-chrome-extension/src/manifest.ts index dc08d0bca..dd3896ba7 100644 --- a/packages/twenty-chrome-extension/src/manifest.ts +++ b/packages/twenty-chrome-extension/src/manifest.ts @@ -16,6 +16,7 @@ export default defineManifest({ action: {}, + //TODO: change this to a documenation page options_page: 'options.html', background: { @@ -34,4 +35,8 @@ export default defineManifest({ permissions: ['activeTab', 'storage'], host_permissions: ['https://www.linkedin.com/*'], + + externally_connectable: { + matches: [`https://app.twenty.com/*`, `http://localhost:3001/*`], + }, }); diff --git a/packages/twenty-chrome-extension/src/options/Loading.tsx b/packages/twenty-chrome-extension/src/options/Loading.tsx new file mode 100644 index 000000000..1fde24f2b --- /dev/null +++ b/packages/twenty-chrome-extension/src/options/Loading.tsx @@ -0,0 +1,24 @@ +import styled from '@emotion/styled'; + +import { Loader } from '@/ui/display/loader/components/Loader'; + +const StyledContainer = styled.div` + align-items: center; + background: ${({ theme }) => theme.background.noisy}; + display: flex; + flex-direction: column; + height: 100vh; + gap: ${({ theme }) => theme.spacing(2)}; + justify-content: center; +`; + +const Loading = () => { + return ( + + twenty-logo + + + ); +}; + +export default Loading; diff --git a/packages/twenty-chrome-extension/src/options/index.tsx b/packages/twenty-chrome-extension/src/options/index.tsx index dde380ebf..e7920fc9e 100644 --- a/packages/twenty-chrome-extension/src/options/index.tsx +++ b/packages/twenty-chrome-extension/src/options/index.tsx @@ -3,14 +3,14 @@ import ReactDOM from 'react-dom/client'; import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider'; import { ThemeType } from '@/ui/theme/constants/ThemeLight'; -import App from '~/options/Options'; +import Options from '~/options/Options'; import '~/index.css'; ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render( - + , ); diff --git a/packages/twenty-chrome-extension/src/options/loading-index.tsx b/packages/twenty-chrome-extension/src/options/loading-index.tsx new file mode 100644 index 000000000..46f2193fe --- /dev/null +++ b/packages/twenty-chrome-extension/src/options/loading-index.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; + +import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider'; +import { ThemeType } from '@/ui/theme/constants/ThemeLight'; +import Loading from '~/options/Loading'; + +import '~/index.css'; + +ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render( + + + + + , +); + +declare module '@emotion/react' { + export interface Theme extends ThemeType {} +} diff --git a/packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx b/packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx index 88e051972..524dc0c1f 100644 --- a/packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx +++ b/packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx @@ -23,7 +23,11 @@ const StyledHeader = styled.header` text-align: center; `; -const StyledImg = styled.img``; +const StyledImgLogo = styled.img` + &:hover { + cursor: pointer; + } +`; const StyledMain = styled.main` margin-bottom: ${({ theme }) => theme.spacing(8)}; @@ -51,6 +55,13 @@ const StyledSection = styled.div<{ showSection: boolean }>` max-height: ${({ showSection }) => (showSection ? '200px' : '0')}; `; +const StyledButtonHorizontalContainer = styled.div` + display: flex; + flex-direction: row; + gap: ${({ theme }) => theme.spacing(4)}; + width: 100%; +`; + export const ApiKeyForm = () => { const [apiKey, setApiKey] = useState(''); const [route, setRoute] = useState(''); @@ -73,10 +84,6 @@ export const ApiKeyForm = () => { void getState(); }, []); - useEffect(() => { - chrome.storage.local.set({ apiKey }); - }, [apiKey]); - useEffect(() => { if (import.meta.env.VITE_SERVER_BASE_URL !== route) { chrome.storage.local.set({ serverBaseUrl: route }); @@ -85,10 +92,18 @@ export const ApiKeyForm = () => { } }, [route]); + const handleValidateKey = () => { + chrome.storage.local.set({ apiKey }); + + window.close(); + }; + const handleGenerateClick = () => { - window.open( - `${import.meta.env.VITE_FRONT_BASE_URL}/settings/developers/api-keys`, - ); + window.open(`${import.meta.env.VITE_FRONT_BASE_URL}/settings/developers`); + }; + + const handleGoToTwenty = () => { + window.open(`${import.meta.env.VITE_FRONT_BASE_URL}`); }; const handleToggle = () => { @@ -98,9 +113,12 @@ export const ApiKeyForm = () => { return ( - + - { onChange={setApiKey} placeholder="My API key" /> -