ServiceInfo, ServiceHeader and Portal Info/Connect page

apps/webapp/src/Components/Portals/ServiceHeader.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { Button, Title } from '@mexit/shared'
+
+import { DEFAULT_LIST_ITEM_ICON, getIconType, ProjectIconMex } from './utils'
+import { FlexBetween } from '../FloatingButton'
+import { ActionGroupIcon, ServiceDescription, GroupHeader } from './styled'
+
+type ServiceHeaderProps = {
+  icon: string
+  onClick: () => void
+  isConnected: boolean
+  title: string
+  description: string
+}
+
+const ServiceHeader: React.FC<ServiceHeaderProps> = ({ icon, onClick, isConnected, title, description }) => {
+  const { mexIcon } = getIconType(icon || DEFAULT_LIST_ITEM_ICON)
+
+  return (
+    <div>
+      <ActionGroupIcon>
+        <span>
+          <ProjectIconMex isMex={mexIcon} icon={icon} size={140} />
+        </span>
+        <Button onClick={onClick} disabled={isConnected}>
+          {isConnected ? 'Disconnect' : 'Connect'}
+        </Button>
+      </ActionGroupIcon>
+      <GroupHeader connected={isConnected}>
+        <FlexBetween>
+          <Title>{title}</Title>
+        </FlexBetween>
+        <ServiceDescription>
+          {description ??
+            `Magna quis cupidatat laboris aliquip esse. Ut Despacito eu voluptate qui incididunt ipsum. Officia et esse
+              enim laborum ullamco magna labore quis sit mollit. Esse amet nostrud pariatur esse. Commodo consequat
+              ipsum tempor ad cillum ad et esse nostrud veniam pariatur excepteur laboris. Adipisicing aliqua do
+              proident aliquip ad et voluptate et ut excepteur mollit do tempor. Magna nostrud esse sunt anim quis in.
+              Amet ut fugiat adipisicing officia aliquip quis non. Veniam magna dolor consequat quis aliqua ea ipsum
+              reprehenderit commodo commodo. Minim minim sit sit magna labore sint esse ipsum.`}
+        </ServiceDescription>
+      </GroupHeader>
+    </div>
+  )
+}
+
+export default ServiceHeader

apps/webapp/src/Components/Portals/ServiceInfo.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect } from 'react'
+import arrowLeftLine from '@iconify/icons-ri/arrow-left-line'
+// import { ServiceContainer, GroupHeaderContainer, FloatingIcon } from './styled'
+
+import { Button, IconButton } from '@mexit/shared'
+import { ErrorBoundary } from 'react-error-boundary'
+import tinykeys from 'tinykeys'
+import { NavigationType, ROUTE_PATHS, useRouting } from '../../Hooks/useRouting'
+import { useKeyListener } from '../../Hooks/useShortcutListener'
+import { FloatingIcon, ServiceContainer, GroupHeaderContainer } from './styled'
+
+// type ServiceInfoProps = {}
+
+const ServiceInfo: React.FC<any> = ({ children }) => {
+  const { goTo } = useRouting()
+  const { shortcutDisabled } = useKeyListener()
+
+  const goBackToIntegrations = () => goTo(ROUTE_PATHS.integrations, NavigationType.replace)
+
+  useEffect(() => {
+    const unsubscribe = tinykeys(window, {
+      Escape: (event) => {
+        event.preventDefault()
+        if (!shortcutDisabled) goBackToIntegrations()
+      }
+    })
+
+    return () => {
+      unsubscribe()
+    }
+  }, [])
+
+  return (
+    <ErrorBoundary
+      FallbackComponent={() => <Button onClick={() => goTo(ROUTE_PATHS.home, NavigationType.replace)}>Back</Button>}
+    >
+      <ServiceContainer>
+        <GroupHeaderContainer>
+          <FloatingIcon>
+            <IconButton
+              size={24}
+              shortcut={`Esc`}
+              icon={arrowLeftLine}
+              onClick={goBackToIntegrations}
+              title={'Return to Integrations'}
+            />
+          </FloatingIcon>
+          {children}
+        </GroupHeaderContainer>
+      </ServiceContainer>
+    </ErrorBoundary>
+  )
+}
+
+export default ServiceInfo

apps/webapp/src/Components/Portals/index.tsx

@@ -10,6 +10,11 @@ import { useLinks } from '../../Hooks/useLinks'
 import usePortalStore from '../../Stores/usePortalStore'
 import { usePortals } from '../../Hooks/usePortals'
 import { QuickLink } from '../NodeSelect/NodeSelect'
+import { LoadingButton } from '../Buttons/Buttons'
+import ServiceInfo from './ServiceInfo'
+import ServiceHeader from './ServiceHeader'
+import { GlobalSectionHeader, GlobalSectionContainer } from '../../Style/GlobalSection'
+import CreateInput from '../createInput'
 
 const Portals = () => {
   const theme = useTheme()
@@ -32,6 +37,8 @@ const Portals = () => {
 
   const actionGroup = apps[params.actionGroupId]
 
+  mog('Inside Specific Portal', { location, query, serviceId, apps, connectedPortals, params, actionGroup })
+
   const { connectedPortalInfo, parentNoteName } = useMemo(() => {
     const connectedPortalInfo = getIsPortalConnected(actionGroup.actionGroupId)
 
@@ -50,7 +57,8 @@ const Portals = () => {
 
   const onClick = () => {
     const url = actionGroup?.authConfig?.authURL
-    if (url) shell.openExternal(url)
+
+    if (url) window.open(url, '_blank')
   }
 
   const onSaveDetails = async () => {

apps/webapp/src/Components/Portals/styled.tsx

@@ -0,0 +1,141 @@
+import styled, { css } from 'styled-components'
+// import { FlexBetween } from '@components/spotlight/Actions/styled'
+
+import { Button, CardShadow, StyledEditor, BodyFont } from '@mexit/shared'
+import { CenteredFlex, Title } from '../../Style/Integrations'
+import { FlexBetween } from '../FloatingButton'
+
+export const ServiceContainer = styled(StyledEditor)``
+
+export const CardStyles = css`
+  padding: ${({ theme }) => theme.spacing.medium};
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  background-color: ${({ theme }) => theme.colors.gray[8]};
+`
+
+export const Description = styled.p`
+  margin: 6px 0 4px;
+  ${BodyFont};
+  font-weight: 400;
+  white-space: nowrap;
+  overflow-x: hidden;
+  color: ${({ theme }) => theme.colors.text.fade};
+  opacity: 0.7;
+  text-overflow: ellipsis;
+`
+
+export const GroupHeaderContainer = styled.section`
+  ${CardStyles}
+  ${CardShadow}
+  position: relative;
+
+  margin-top: 1rem;
+  user-select: none;
+
+  & > div {
+    display: flex;
+    padding: ${({ theme }) => theme.spacing.large} ${({ theme }) => theme.spacing.medium};
+    gap: ${({ theme }) => theme.spacing.medium};
+    margin-bottom: ${({ theme }) => theme.spacing.medium};
+    justify-content: space-evenly;
+  }
+
+  height: fit-content;
+`
+
+export const ServiceDescription = styled.p`
+  margin: 0 1rem 0 0;
+  font-size: 1rem;
+  font-weight: normal;
+  color: ${({ theme }) => theme.colors.text.default};
+`
+
+export const ActionGroupIcon = styled(CenteredFlex)`
+  margin: 0 1rem;
+
+  ${Button} {
+    width: 100%;
+  }
+
+  & > span {
+    padding: 1rem 2rem;
+    margin: 1rem 0 2rem;
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+  }
+`
+
+export const GroupHeader = styled.div<{ connected?: boolean }>`
+  ${Title} {
+    padding: 0;
+    font-size: 2.5rem;
+  }
+
+  ${FlexBetween} {
+    padding-right: 1rem;
+  }
+
+  ${Button} {
+    padding: 0.5rem 0.75rem;
+    ${({ connected, theme }) =>
+      connected &&
+      css`
+        background: transparentize(0.6, theme.colors.background.app);
+        color: theme.colors.text.heading;
+        cursor: default;
+        :hover {
+          box-shadow: none;
+        }
+      `}
+  }
+`
+
+export const FloatingIcon = styled.span`
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+`
+
+export const ActionsContainer = styled.section`
+  padding: ${({ theme }) => theme.spacing.large};
+  border-top: 1px solid ${({ theme }) => theme.colors.gray[7]};
+  width: 100%;
+  overflow: hidden auto;
+  max-height: 60vh;
+
+  & > header {
+    font-size: 0.95rem;
+    color: ${({ theme }) => theme.colors.text.fade};
+    font-weight: 700;
+    padding: 1rem 0.5rem 1.5rem;
+  }
+`
+
+export const ActionContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 1rem;
+  padding: 0.75rem ${({ theme }) => theme.spacing.small};
+
+  /* border-radius: ${({ theme }) => theme.borderRadius.small}; */
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray[7]};
+
+  ${ActionGroupIcon} {
+    flex: none;
+    width: auto;
+  }
+
+  section {
+    padding: 0 ${({ theme }) => theme.spacing.small};
+  }
+
+  h4 {
+    margin: 0;
+    font-size: medium;
+    font-weight: bold;
+    color: ${({ theme }) => theme.colors.text.default};
+  }
+
+  ${Description} {
+    font-size: 0.8rem;
+  }
+`

apps/webapp/src/Components/createInput.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { Input, StyledMenu } from '@mexit/shared'
+
+import NodeSelect from './NodeSelect/NodeSelect'
+
+export type CreateInputType = { value?: string; onChange; disabled?: boolean; autoFocus?: boolean }
+
+export const StyleCreateInputWrapper = styled.div`
+  width: 100%;
+  position: relative;
+  ${StyledMenu} {
+    margin-top: ${({ theme }) => theme.spacing.medium};
+  }
+  ${Input} {
+    color: ${({ theme }) => theme.colors.text.fade};
+    width: 100%;
+    border: none;
+  }
+`
+
+const CreateInput: React.FC<CreateInputType> = ({ autoFocus, onChange, value, disabled }) => {
+  return (
+    <StyleCreateInputWrapper>
+      <NodeSelect
+        autoFocus={autoFocus}
+        disabled={disabled}
+        defaultValue={value}
+        id="wd-spotlight-editor-search"
+        name="wd-spotlight-editor-search"
+        placeholder="Search for a note"
+        handleSelectItem={onChange}
+      />
+    </StyleCreateInputWrapper>
+  )
+}
+
+export default CreateInput

apps/webapp/src/Stores/usePortalStore.ts

@@ -48,8 +48,7 @@ const usePortalStore = create<PortalStoreType>(
         }
       }),
       {
-        name: 'mex-portal-store',
-        getStorage: () => IDBStorage
+        name: 'mex-portal-store'
       }
     )
   )

apps/webapp/src/Style/GlobalSection.ts

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export const GlobalSectionContainer = styled.section`
+  padding: ${({ theme }) => theme.spacing.medium};
+  border-top: 1px solid ${({ theme }) => theme.colors.gray[7]};
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 0 ${({ theme }) => theme.spacing.medium};
+  gap: 0 ${({ theme }) => theme.spacing.medium};
+`
+
+export const GlobalSectionHeader = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 0 ${({ theme }) => theme.spacing.large};
+`

apps/webapp/src/Switch.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Navigate, Route, Routes, useLocation, Outlet } from 'react-router-dom'
 
 import EditorView from './Views/EditorView'
@@ -172,10 +172,14 @@ const SnippetRoutes = () => {
 }
 
 const IntegrationRoutes = () => {
+  const location = useLocation()
+  useEffect(() => {
+    console.log('Location: ', location)
+  }, [location])
   return (
     <Routes>
       <Route
-        path=""
+        index
         element={
           <ProtectedRoute>
             <PortalsPage />
@@ -218,7 +222,7 @@ export const Switch = () => {
           <Route path={ROUTE_PATHS.tasks} element={<Tasks />} />
           <Route path={ROUTE_PATHS.archive} element={<Archive />} />
           <Route path={`${ROUTE_PATHS.tag}/:tag`} element={<Tag />} />
-          <Route path={ROUTE_PATHS.integrations} element={<IntegrationRoutes />} />
+          <Route path={`${ROUTE_PATHS.integrations}/*`} element={<IntegrationRoutes />} />
         </Route>
       </Routes>
     </SwitchWrapper>

apps/webapp/src/Views/PortalsPage.tsx

@@ -18,10 +18,6 @@ const PortalsPage = () => {
     getConnectedPortals()
   }, []) // eslint-disable-line
 
-  const onClick = (route: string, actionGroupId: string) => {
-    goTo(route, NavigationType.push, actionGroupId)
-  }
-
   const portals = useMemo(
     () => sortPortals(apps, (item: any) => !!getIsPortalConnected(item.actionGroupId)),
     [apps, connectedPortals] // eslint-disable-line
@@ -34,7 +30,9 @@ const PortalsPage = () => {
           <Section
             items={portals}
             title="Portals"
-            onClick={(item: ActionGroupType) => onClick(`${ROUTE_PATHS.integrations}/portal`, item.actionGroupId)}
+            onClick={(item: ActionGroupType) =>
+              goTo(`${ROUTE_PATHS.integrations}/portal`, NavigationType.push, item.actionGroupId)
+            }
           />
         </IntegrationContainer>
       </FullHeight>