Skip to content

Commit

Permalink
feat(connectors): better UI for flow connectors
Browse files Browse the repository at this point in the history
  • Loading branch information
@anteqkois
anteqkois committed May 26, 2024
1 parent cf7fbb9 commit 631dbda
Show file tree
Hide file tree
Showing 7 changed files with 105 additions and 27 deletions.
2 changes: 1 addition & 1 deletion apps/api-gateway/src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ async function bootstrap() {
)

const configService = app.get(ConfigService)
const frontendUrl = configService.get('FRONTEND_HOST')
const frontendUrl = configService.getOrThrow('FRONTEND_HOST')

app.enableCors({
origin: [frontendUrl],
Expand Down
80 changes: 76 additions & 4 deletions apps/web/modules/flows/flows/defaultColumns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ import {
FlowStatus,
TriggerType,
assertNotNullOrUndefined,
builImageUrlFromConnectorPacakgeName,
flowHelper,
isCustomHttpExceptionAxios,
isStepBaseSettings,
isTrigger,
} from '@linkerry/shared'
import {
Expand Down Expand Up @@ -37,6 +39,7 @@ import {
import { Button, Icons } from '@linkerry/ui-components/server'
import { ColumnDef } from '@tanstack/react-table'
import dayjs from 'dayjs'
import Image from 'next/image'
import Link from 'next/link'
import { useCallback, useState } from 'react'
import { getBrowserQueryCllient } from '../../../libs/react-query'
Expand Down Expand Up @@ -73,11 +76,44 @@ export const columns: ColumnDef<FlowPopulated>[] = [
<Tooltip>
<TooltipTrigger asChild>
<div className="font-medium max-w-[150px] truncate">
{/* {`${row.original.version.stepsCount} ${flowVersionChainMap[0].map((step) => step.settings.connectorName).join(', ')}`} */}

<span className="text-primary font-bold">{row.original.version.stepsCount}:</span>
<span className="pl-1 max-w-[10px] overflow-hidden">
{isEmptyFlow ? 'Empty Trigger' : flowVersionChainMap[0].map((step) => step.settings.connectorName).join(', ')}
{isEmptyFlow ? (
'Empty Trigger'
) : (
<>
{flowVersionChainMap[0].slice(0, 4).map((step, index) => {
if (!isStepBaseSettings(step.settings))
return (
<span
key={step.name}
className="h-[26px] w-[26px] inline-block bg-muted text-muted-foreground rounded-full text-center text-base border border-muted-foreground"
style={{ transform: `translate(-${index * 6}px, 0px)` }}
>
?
</span>
)
return (
<Image
key={step.name}
width={26}
height={26}
className="inline-block bg-muted text-muted-foreground rounded-full"
style={{ transform: `translate(-${index * 6}px, 0px)` }}
src={builImageUrlFromConnectorPacakgeName(step.settings.connectorName)}
alt={step.displayName}
/>
)
})}
{flowVersionChainMap[0].length > 4 ? (
<span
className="h-7 w-7 inline-block bg-muted text-muted-foreground rounded-full text-center text-base border border-muted-foreground"
style={{ transform: `translate(-${24}px, 0px)` }}
>
+{flowVersionChainMap[0].length - 4}
</span>
) : null}
</>
)}
</span>
</div>
</TooltipTrigger>
Expand All @@ -97,6 +133,42 @@ export const columns: ColumnDef<FlowPopulated>[] = [
},
},
// {
// id: 'steps',
// accessorFn: (row) => row.version.stepsCount,
// header: ({ column }) => <TableColumnHeader column={column} title="Steps" sortable />,
// cell: ({ row }) => {
// const flowVersionChainMap = flowHelper.transformFlowVersionToChainMap(row.original.version)
// const isEmptyFlow = flowVersionChainMap[0][0].type === TriggerType.EMPTY

// return (
// <TooltipProvider delayDuration={100}>
// <Tooltip>
// <TooltipTrigger asChild>
// <div className="font-medium max-w-[150px] truncate">
// {/* {`${row.original.version.stepsCount} ${flowVersionChainMap[0].map((step) => step.settings.connectorName).join(', ')}`} */}

// <span className="text-primary font-bold">{row.original.version.stepsCount}:</span>
// <span className="pl-1 max-w-[10px] overflow-hidden">
// {isEmptyFlow ? 'Empty Trigger' : flowVersionChainMap[0].map((step) => step.settings.connectorName).join(', ')}
// </span>
// </div>
// </TooltipTrigger>
// {isEmptyFlow ? null : (
// <TooltipContent>
// {flowVersionChainMap[0].map((step) => (
// <div key={step.name} className="flex flex-col ">
// {!isTrigger(step) && <Icons.ArrowDown className="w-full" />}
// <p>{`${isTrigger(step) ? 'Trigger' : 'Action'}: ${step.settings.connectorName} - ${step.displayName}`}</p>
// </div>
// ))}
// </TooltipContent>
// )}
// </Tooltip>
// </TooltipProvider>
// )
// },
// },
// {
// id: 'steps',
// accessorFn: (row) => row.version.stepsCount,
// header: ({ column }) => <TableColumnHeader column={column} title="Steps" sortable />,
Expand Down
Binary file modified apps/web/public/images/connectors/binance.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...web/public/images/connectors/telegram.png → ...public/images/connectors/telegram-bot.png
View file
File renamed without changes
2 changes: 1 addition & 1 deletion libs/connectors/telegram-bot/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const telegramBot = createConnector({
displayName: 'Telegram Bot',
description: 'Build chatbots for Telegram',
minimumSupportedRelease: '0.0.0',
logoUrl: '/images/connectors/telegram.png',
logoUrl: '/images/connectors/telegram-bot.png',
tags: ['communication', 'bots', 'cryptocurrency'],
auth: telegramBotAuth,
actions: [
Expand Down
43 changes: 22 additions & 21 deletions libs/nest-core/src/core.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,28 +91,29 @@ import { QUEUES } from './modules/workers/flow-worker/queues/types'
export class CoreModule implements NestModule, OnApplicationBootstrap {
async onApplicationBootstrap() {

// Clear env
setTimeout(() => {
delete process.env['LINKERRY_API_KEY']
delete process.env['APPS_SECRET']
delete process.env['MONGO_PROTOCOL']
delete process.env['MONGO_USERNAME']
delete process.env['MONGO_PASSWORD']
delete process.env['MONGO_HOST']
delete process.env['MONGO_DATABASE']
delete process.env['APP_WEBHOOK_SECRETS']
delete process.env['TAWK_API_KEY']
delete process.env['STRIPE_WEBHOOK_SECRET']
delete process.env['STRIPE_API_KEY']
delete process.env['REDIS_PASSWORD']
delete process.env['JWT_SECRET']
delete process.env['COOKIES_SIGNATURE']
delete process.env['ENCRYPTION_KEY']
delete process.env['ENCRYPTION_ALG']
delete process.env['IV_LENGTH']
// TODO update it to delete only few keys
// // Clear env
// setTimeout(() => {
// delete process.env['LINKERRY_API_KEY']
// delete process.env['APPS_SECRET']
// delete process.env['MONGO_PROTOCOL']
// delete process.env['MONGO_USERNAME']
// delete process.env['MONGO_PASSWORD']
// delete process.env['MONGO_HOST']
// delete process.env['MONGO_DATABASE']
// delete process.env['APP_WEBHOOK_SECRETS']
// delete process.env['TAWK_API_KEY']
// delete process.env['STRIPE_WEBHOOK_SECRET']
// delete process.env['STRIPE_API_KEY']
// delete process.env['REDIS_PASSWORD']
// delete process.env['JWT_SECRET']
// delete process.env['COOKIES_SIGNATURE']
// delete process.env['ENCRYPTION_KEY']
// delete process.env['ENCRYPTION_ALG']
// delete process.env['IV_LENGTH']

console.log('CLEARED')
}, 15_000)
// console.log('CLEARED')
// }, 15_000)
}
// Add a middleware on all routes
configure(consumer: MiddlewareConsumer) {
Expand Down
5 changes: 5 additions & 0 deletions libs/shared/src/lib/modules/connectors/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ export const getConnectorAppNameFromConnectorPacakgeName = (pacakgeName: string)
return pacakgeName.slice(10)
}

export const builImageUrlFromConnectorPacakgeName = (pacakgeName: string): string => {
const name = pacakgeName.slice(10)
return `/images/connectors/${name}.png`
}

export const extractConnectorFromModule = <T>(params: ExtractConnectorFromModuleParams): T => {
const { module, connectorName, connectorVersion } = params
const exports = Object.values(module)
Expand Down

0 comments on commit 631dbda

Please sign in to comment.