Skip to content

Commit

Permalink
✨ New features
Browse files Browse the repository at this point in the history
  • Loading branch information
@naelob
naelob committed Jun 22, 2024
1 parent 1012d48 commit b0a3ba9
Show file tree
Hide file tree
Showing 152 changed files with 5,902 additions and 2,069 deletions.
4 changes: 2 additions & 2 deletions apps/client-ts/src/app/(Dashboard)/b2c/profile/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,9 @@ const Profile = () => {
<CardContent>
<h4 className="text-sm font-medium mb-2">Connected user</h4>

<div className="flex space-x-2">
<div className="flex space-x-2 items-center">
<Input value={`${profile?.email}`} readOnly />
<Button type="button" onClick={() => handleCopy(profile?.email!)}>
<Button type="button" onClick={() => handleCopy(profile?.email!)} size="sm" className="h-7 gap-1">
{copied ? 'Copied!' : (
<>
<p className="mr-1" >Copy</p>
Expand Down
6 changes: 3 additions & 3 deletions apps/client-ts/src/components/Configuration/Catalog/CatalogWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,9 @@ export function CatalogWidget() {
{item.vertical}
</Badge>
}
{item.authStrategy &&
<Badge key={item.authStrategy} variant={getBadgeVariantFromLabel(item.authStrategy)}>
{item.authStrategy}
{item.authStrategy.strategy &&
<Badge key={item.authStrategy.strategy} variant={getBadgeVariantFromLabel(item.authStrategy.strategy)}>
{item.authStrategy.strategy}
</Badge>
}
</div>
Expand Down
18 changes: 9 additions & 9 deletions apps/client-ts/src/components/Configuration/Connector/ConnectorDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
function onSubmit(values: z.infer<typeof formSchema>) {
const { client_id, client_secret, scope, api_key, secret, username, subdomain } = values;
const performUpdate = mappingConnectionStrategies && mappingConnectionStrategies.length > 0;
switch (item?.authStrategy) {
switch (item?.authStrategy.strategy) {
case AuthStrategy.oauth2:
const needs_subdomain = needsSubdomain(item.name.toLowerCase(), item.vertical!.toLowerCase());
if (client_id === "" || client_secret === "" || scope === "") {
Expand Down Expand Up @@ -341,11 +341,11 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
if (mappingConnectionStrategies && mappingConnectionStrategies.length > 0) {
fetchCredentials({
type: mappingConnectionStrategies[0].type,
attributes: item?.authStrategy === AuthStrategy.oauth2 ? needsSubdomain(item.name.toLowerCase(), item.vertical!.toLowerCase()) ? ["subdomain", "client_id", "client_secret", "scope"] : ["client_id", "client_secret", "scope"]
: item?.authStrategy === AuthStrategy.api_key ? ["api_key"] : ["username", "secret"]
attributes: item?.authStrategy.strategy === AuthStrategy.oauth2 ? needsSubdomain(item.name.toLowerCase(), item.vertical!.toLowerCase()) ? ["subdomain", "client_id", "client_secret", "scope"] : ["client_id", "client_secret", "scope"]
: item?.authStrategy.strategy === AuthStrategy.api_key ? ["api_key"] : ["username", "secret"]
}, {
onSuccess(data) {
if (item?.authStrategy === AuthStrategy.oauth2) {
if (item?.authStrategy.strategy === AuthStrategy.oauth2) {
let i = 0;
if(needsSubdomain(item.name.toLowerCase(), item.vertical!.toLowerCase())){
form.setValue("subdomain", data[i]);
Expand All @@ -355,10 +355,10 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
form.setValue("client_secret", data[i + 1]);
form.setValue("scope", data[i + 2]);
}
if (item?.authStrategy === AuthStrategy.api_key) {
if (item?.authStrategy.strategy === AuthStrategy.api_key) {
form.setValue("api_key", data[0]);
}
if (item?.authStrategy === AuthStrategy.basic) {
if (item?.authStrategy.strategy === AuthStrategy.basic) {
form.setValue("username", data[0]);
form.setValue("secret", data[1]);
}
Expand Down Expand Up @@ -435,7 +435,7 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
<div className="flex-1 whitespace-pre-wrap p-4 text-sm">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
{ item.authStrategy == AuthStrategy.oauth2 &&
{ item.authStrategy.strategy == AuthStrategy.oauth2 &&
<>
{ needsSubdomain(item.name.toLowerCase(), item.vertical!.toLowerCase()) &&
<div className="flex flex-col">
Expand Down Expand Up @@ -516,7 +516,7 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
</>
}
{
item.authStrategy == AuthStrategy.api_key &&
item.authStrategy.strategy == AuthStrategy.api_key &&
<>
<div className="flex flex-col">
<FormField
Expand All @@ -536,7 +536,7 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
</>
}
{
item.authStrategy == AuthStrategy.basic &&
item.authStrategy.strategy == AuthStrategy.basic &&
<>
<div className="flex flex-col">
<FormField
Expand Down
6 changes: 3 additions & 3 deletions apps/client-ts/src/components/Configuration/Connector/ConnectorList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ export function ConnectorList({ items }: ConnectorListProps) {
{item.vertical}
</Badge>
}
{item.authStrategy &&
<Badge key={item.authStrategy} variant={getBadgeVariantFromLabel(item.authStrategy)}>
{item.authStrategy}
{item.authStrategy.strategy &&
<Badge key={item.authStrategy.strategy} variant={getBadgeVariantFromLabel(item.authStrategy.strategy)}>
{item.authStrategy.strategy}
</Badge>
}
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/client-ts/src/components/Connection/ConnectionTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default function ConnectionTable() {
<AddConnectionButton setIsGenerated={setIsGenerated} />
}
<Suspense>
{ts && <DataTable data={ts} columns={columns} />}
{ts && <DataTable data={ts} columns={columns}/>}
</Suspense>
</div>
</>
Expand Down
125 changes: 100 additions & 25 deletions apps/client-ts/src/components/Connection/columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { toast } from "sonner"
import { getLogoURL } from "@panora/shared"
import { formatISODate, truncateMiddle } from "@/lib/utils"
import { Button } from "../ui/button"
import { Label } from "../ui/label"
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"

const connectionTokenComponent = ({row}:{row:any}) => {
const handleCopy = async () => {
Expand All @@ -35,6 +37,70 @@ const connectionTokenComponent = ({row}:{row:any}) => {
)
}

const Customizer = ({
logo,
name,
lastSync,
authStrategy,
linkedUserId,
connectionToken,
}: {
logo: string;
name: string;
lastSync: string;
authStrategy: string;
linkedUserId: string;
connectionToken: string;
}) => {
return (
<div className="">
<div className="flex items-start pt-4 md:pt-0">
<div className="space-y-1 pr-2">
<div className="flex space-x-2 items-center">
<img src={logo} className="w-12 h-12 rounded-sm mr-2" />
<div className="flex flex-col font-bold">
{`${name.substring(0, 1).toUpperCase()}${name.substring(1)}`}
<Badge variant={"outline"} className="rounded-xl py-1 font-normal">{authStrategy}</Badge>
</div>
</div>
</div>
</div>
<div className="flex flex-1 mt-2 flex-col space-y-4 md:space-y-6">
<div className="flex justify-between items-center">
<Label className="text-xs">Last sync</Label>
<Badge variant={"outline"} className="py-1 font-normal">{lastSync}</Badge>
</div>
<div className="flex justify-between items-center">
<Label className="text-xs">Connection Token</Label>
<Badge variant={"outline"} className="py-1 font-normal">{truncateMiddle(connectionToken,6)}</Badge>
</div>
<div className="flex justify-between items-center">
<Label className="text-xs">Linked User Id</Label>
<Badge variant={"outline"} className="py-1 font-normal">{truncateMiddle(linkedUserId,6)}</Badge>
</div>
</div>
<div className="flex align-middle pt-2">
<Button
variant={"destructive"}
size="sm"
className="rounded-sm h-7 py-1 font-normal mr-2"
onClick={() => { }}
>
Unconnect
</Button>
<Button
size="sm"
className="rounded-sm h-7 py-1 font-normal"
onClick={() => { }}
>
Resync
</Button>
</div>
</div>

)
}

export const columns: ColumnDef<Connection>[] = [
{
accessorKey: "app",
Expand Down Expand Up @@ -82,30 +148,6 @@ export const columns: ColumnDef<Connection>[] = [
enableSorting: false,
enableHiding: false,
},
{
accessorKey: "status",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Status" />
),
cell: ({ row }) => {
/*const direction = priorities.find(
(direction) => direction.value === row.getValue("status")
)
if (!direction) {
return null
}*/

return (
<div className="flex items-center">
<Badge variant="outline" className="rounded-sm py-1 font-normal">{row.getValue("status")}</Badge>
</div>
)
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id))
},
},
{
accessorKey: "linkedUser",
header: ({ column }) => (
Expand Down Expand Up @@ -151,5 +193,38 @@ export const columns: ColumnDef<Connection>[] = [
<DataTableColumnHeader column={column} title="Connection Token" />
),
cell: connectionTokenComponent
},
{
accessorKey: "status",
header: ({ column }) => (
''
),
cell: ({ row }) => {
return (
<div className="flex items-center">
<Popover>
<PopoverTrigger asChild>
<Button size="sm" className="rounded-sm py-1 h-7 font-normal mr-1"><p className="pr-2">More Info</p> <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.6788 2.95419C10.0435 2.53694 9.18829 2.54594 8.51194 3.00541C8.35757 3.11027 8.1921 3.27257 7.7651 3.69957L7.14638 4.31829C6.95112 4.51355 6.63454 4.51355 6.43928 4.31829C6.24401 4.12303 6.24401 3.80645 6.43928 3.61119L7.058 2.99247C7.0725 2.97797 7.08679 2.96366 7.1009 2.94955C7.47044 2.57991 7.70691 2.34336 7.95001 2.17822C8.94398 1.50299 10.2377 1.46813 11.2277 2.11832C11.4692 2.27689 11.7002 2.508 12.0515 2.85942C12.0662 2.8741 12.081 2.88898 12.0961 2.90408C12.1112 2.91917 12.1261 2.93405 12.1408 2.94871C12.4922 3.30001 12.7233 3.53102 12.8819 3.77248C13.5321 4.76252 13.4972 6.05623 12.822 7.0502C12.6568 7.2933 12.4203 7.52976 12.0507 7.89929C12.0366 7.9134 12.0222 7.92771 12.0077 7.94221L11.389 8.56093C11.1938 8.7562 10.8772 8.7562 10.6819 8.56093C10.4867 8.36567 10.4867 8.04909 10.6819 7.85383L11.3006 7.23511C11.7276 6.80811 11.8899 6.64264 11.9948 6.48827C12.4543 5.81192 12.4633 4.95675 12.046 4.32141C11.9513 4.17714 11.8009 4.02307 11.389 3.61119C10.9771 3.1993 10.8231 3.04893 10.6788 2.95419ZM4.31796 6.43961C4.51322 6.63487 4.51322 6.95146 4.31796 7.14672L3.69924 7.76544C3.27224 8.19244 3.10993 8.35791 3.00507 8.51227C2.54561 9.18863 2.53661 10.0438 2.95385 10.6791C3.0486 10.8234 3.19896 10.9775 3.61085 11.3894C4.02274 11.8012 4.17681 11.9516 4.32107 12.0464C4.95642 12.4636 5.81158 12.4546 6.48794 11.9951C6.6423 11.8903 6.80777 11.728 7.23477 11.301L7.85349 10.6823C8.04875 10.487 8.36533 10.487 8.5606 10.6823C8.75586 10.8775 8.75586 11.1941 8.5606 11.3894L7.94188 12.0081C7.92738 12.0226 7.91307 12.0369 7.89897 12.051C7.52943 12.4206 7.29296 12.6572 7.04986 12.8223C6.05589 13.4976 4.76219 13.5324 3.77214 12.8822C3.53068 12.7237 3.29967 12.4925 2.94837 12.1411C2.93371 12.1264 2.91883 12.1116 2.90374 12.0965C2.88865 12.0814 2.87377 12.0665 2.8591 12.0518C2.50766 11.7005 2.27656 11.4695 2.11799 11.2281C1.4678 10.238 1.50265 8.94432 2.17788 7.95035C2.34303 7.70724 2.57957 7.47077 2.94922 7.10124C2.96333 7.08713 2.97763 7.07283 2.99213 7.05833L3.61085 6.43961C3.80611 6.24435 4.12269 6.24435 4.31796 6.43961Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></Button>
</PopoverTrigger>
<PopoverContent
align="center"
className="w-[340px] mr-40 mb-3 rounded-[0.5rem] bg-white p-6 dark:bg-zinc-950"
>
<Customizer
logo={getLogoURL((row.getValue("app") as string).toLowerCase())}
name={(row.getValue("app") as string)}
lastSync={"12/07/2024, 12:58:02 PM"}
authStrategy={row.getValue("category")}
linkedUserId={row.getValue("linkedUser")}
connectionToken={row.getValue("connectionToken")}
/>
</PopoverContent>
</Popover>
</div>
)
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id))
},
}
]
];
2 changes: 1 addition & 1 deletion apps/client-ts/src/components/Events/EventsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function EventsTable() {
error,
} = useEvents({
page: pagination.page,
pageSize: pagination.pageSize,
limit: pagination.limit,
});

const transformedEvents = events?.map((event: Event) => ({
Expand Down
1 change: 0 additions & 1 deletion apps/client-ts/src/components/RootLayout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@ export const RootLayout = ({children}:{children:React.ReactNode}) => {
<div className="space-y-4 py-4 pt-10">
<div className="px-3 py-2">
<div className="space-y-3">
<p className='text-xs dark:text-gray-400 cursor-default text-gray-950 font-semibold'>Project</p>
<div className='flex gap-2 items-center'>
<TeamSwitcher className='w-40 ml-3' projects={projectsData? projectsData : []}/>
<div
Expand Down
10 changes: 5 additions & 5 deletions apps/client-ts/src/components/shared/api-data-table-pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,18 @@ export function ApiDataTablePagination(props: DataTablePaginationProps) {
<p className='text-sm font-medium'>Rows per page</p>
<Select
disabled={props.totalItems <= 10 || props.isLoading}
value={`${props.pageSize}`}
value={`${props.limit}`}
onValueChange={(value) => {
props.setPageSize(Number(value));
}}
>
<SelectTrigger className='h-8 w-[70px]'>
<SelectValue placeholder={props.pageSize} />
<SelectValue placeholder={props.limit} />
</SelectTrigger>
<SelectContent side='top'>
{[10, 20, 30, 40, 50].map((pageSize) => (
<SelectItem key={pageSize} value={`${pageSize}`}>
{pageSize}
{[10, 20, 30, 40, 50].map((limit) => (
<SelectItem key={limit} value={`${limit}`}>
{limit}
</SelectItem>
))}
</SelectContent>
Expand Down
6 changes: 3 additions & 3 deletions apps/client-ts/src/components/shared/data-table-pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ import {
<SelectValue placeholder={table.getState().pagination.pageSize} />
</SelectTrigger>
<SelectContent side="top">
{[10, 20, 30, 40, 50].map((pageSize) => (
<SelectItem key={pageSize} value={`${pageSize}`}>
{pageSize}
{[10, 20, 30, 40, 50].map((limit) => (
<SelectItem key={limit} value={`${limit}`}>
{limit}
</SelectItem>
))}
</SelectContent>
Expand Down
2 changes: 1 addition & 1 deletion apps/client-ts/src/components/shared/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ interface DataTableProps<TData, TValue> {
export function DataTable<TData, TValue>({
columns,
data,
filterColumn
filterColumn,
}: DataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = React.useState({})
const [columnVisibility, setColumnVisibility] =
Expand Down
4 changes: 2 additions & 2 deletions apps/client-ts/src/hooks/get/useEvents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Cookies from 'js-cookie';
const fetchEvents = async (params: PaginationParams): Promise<Event[]> => {
const searchParams = new URLSearchParams({
page: params.page.toString(),
pageSize: params.pageSize.toString(),
limit: params.limit.toString(),
});

const response = await fetch(`${config.API_URL}/events?${searchParams.toString()}`,
Expand All @@ -28,7 +28,7 @@ const fetchEvents = async (params: PaginationParams): Promise<Event[]> => {

const useEvents = (params: PaginationParams) => {
return useQuery({
queryKey: ['events', { page: params.page, pageSize: params.pageSize }],
queryKey: ['events', { page: params.page, limit: params.limit }],
queryFn: () => fetchEvents(params),
});
};
Expand Down
16 changes: 8 additions & 8 deletions apps/client-ts/src/hooks/get/useQueryPagination.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { useCallback, useMemo } from 'react';
import { useRouter, usePathname, useSearchParams } from 'next/navigation';

function getTotalPages(totalItems: number, pageSize: number) {
return Math.ceil(totalItems / pageSize);
function getTotalPages(totalItems: number, limit: number) {
return Math.ceil(totalItems / limit);
}

interface UseQueryPaginationProps {
Expand All @@ -19,18 +19,18 @@ export const useQueryPagination = ({ totalItems = 0 }: UseQueryPaginationProps =

// Read query parameters directly from the URL
const page = parseInt(searchParams.get('page')!) || DEFAULT_PAGE;
const pageSize = parseInt(searchParams.get('pageSize')!) || DEFAULT_PAGE_SIZE;
const limit = parseInt(searchParams.get('limit')!) || DEFAULT_PAGE_SIZE;

const totalPages = useMemo(() => getTotalPages(totalItems, pageSize), [totalItems, pageSize]);
const totalPages = useMemo(() => getTotalPages(totalItems, limit), [totalItems, limit]);

const nextEnabled = useMemo(() => page < totalPages, [page, totalPages]);
const previousEnabled = useMemo(() => page > 1, [page]);

const navigate = useCallback((newPage: number, newPageSize: number = pageSize) => {
const navigate = useCallback((newPage: number, newPageSize: number = limit) => {
// Use router.push to navigate to the new URL with updated query parameters
const url = `${pathname}?page=${newPage}&pageSize=${newPageSize}`;
const url = `${pathname}?page=${newPage}&limit=${newPageSize}`;
router.push(url);
}, [router, pathname, pageSize]); // Include pathname and pageSize in the dependency array
}, [router, pathname, limit]); // Include pathname and limit in the dependency array

const setNextPage = useCallback(() => {
if (!nextEnabled) return;
Expand All @@ -56,7 +56,7 @@ export const useQueryPagination = ({ totalItems = 0 }: UseQueryPaginationProps =
return {
page,
resetPage,
pageSize,
limit,
setPageSize: handlePageSizeChange,
totalItems,
totalPages: totalPages === 0 ? 1 : totalPages,
Expand Down
2 changes: 1 addition & 1 deletion apps/client-ts/src/lib/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@ export interface HookBaseReturn {

export interface PaginationParams {
page: number;
pageSize: number;
limit: number;
}
Loading

0 comments on commit b0a3ba9

Please sign in to comment.