Skip to content

Commit

Permalink
Merge pull request #442 from panoratech/feat/fixe-ui
Browse files Browse the repository at this point in the history 
Feat/fixe UI
  • Loading branch information
@naelob
naelob authored May 20, 2024
2 parents 1da8e88 + 0e320db commit a41a610
Show file tree
Hide file tree
Showing 101 changed files with 949 additions and 2,521 deletions.
47 changes: 22 additions & 25 deletions apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { PlusCircledIcon } from "@radix-ui/react-icons";
import { Button } from "@/components/ui/button"
import { columns } from "@/components/ApiKeys/data/columns";
import { DataTable } from "@/components/shared/data-table";
import {
Dialog,
Expand All @@ -22,9 +21,9 @@ import {
FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input";
import useApiKeys from "@/hooks/useApiKeys";
import useApiKeys from "@/hooks/get/useApiKeys";
import useProjectStore from "@/state/projectStore";
import useApiKeyMutation from "@/hooks/mutations/useApiKeyMutation";
import useCreateApiKey from "@/hooks/create/useCreateApiKey";
import useProfileStore from "@/state/profileStore";
import { Suspense, useEffect, useState } from "react";
import { cn } from "@/lib/utils";
Expand All @@ -35,6 +34,8 @@ import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { DataTableLoading } from "@/components/shared/data-table-loading";
import {CustomHeading} from "@/components/shared/custom-heading";
import { useColumns } from "@/components/ApiKeys/columns";
import { PlusCircle } from "lucide-react";

const formSchema = z.object({
apiKeyIdentifier: z.string().min(2, {
Expand All @@ -43,9 +44,10 @@ const formSchema = z.object({
})

interface TSApiKeys {
name : string,
token : string,
created : string
id_api_key: string;
name : string;
token : string;
created : string;
}

export default function Page() {
Expand All @@ -56,21 +58,19 @@ export default function Page() {
const {profile} = useProfileStore();

const { data: apiKeys, isLoading, error } = useApiKeys();
const { mutate } = useApiKeyMutation();
const { mutate } = useCreateApiKey();
const columns = useColumns();

useEffect(() => {
const temp_tsApiKeys = apiKeys?.map((key) => ({
id_api_key: key.id_api_key,
name: key.name || "",
token: key.api_key_hash,
created: new Date().toISOString()
}))

setTSApiKeys(temp_tsApiKeys)

},[apiKeys])



const posthog = usePostHog()

if(error){
Expand All @@ -96,10 +96,6 @@ export default function Page() {


const onSubmit = (values: z.infer<typeof formSchema>) => {
// e.preventDefault(); // Prevent default form submission
console.log("user data is => "+ JSON.stringify(profile))
console.log("id_user is "+ profile!.id_user)
console.log("idProject is "+ idProject)
mutate({
userId: profile!.id_user,
projectId: idProject,
Expand All @@ -112,7 +108,6 @@ export default function Page() {

setOpen(!open)


};

return (
Expand All @@ -132,19 +127,19 @@ export default function Page() {
<div>
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-label="Select an api key"
className={cn("w-[180px] justify-between")}
<Button
size="sm"
className="h-7 gap-1"
onClick={() => {
posthog?.capture("add_new_api_key_button_clicked", {
id_project: idProject,
mode: config.DISTRIBUTION
})}}
>
<PlusCircledIcon className="mr-2 h-5 w-5" />
Create New Key
<PlusCircle className="h-3.5 w-3.5" />
<span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
Create New Api Key
</span>
</Button>
</DialogTrigger>
<DialogContent>
Expand Down Expand Up @@ -192,8 +187,10 @@ export default function Page() {
</div>
</div>
<DialogFooter>
<Button variant='outline' type="reset" onClick={() => onCancel()}>Cancel</Button>
<Button type='submit'>Create</Button>
<Button variant='outline' type="reset" size="sm" className="h-7 gap-1" onClick={() => onCancel()}>Cancel</Button>
<Button type='submit' size="sm" className="h-7 gap-1">
Create
</Button>
</DialogFooter>
</form>
</Form>
Expand Down
5 changes: 0 additions & 5 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 @@ -18,12 +18,9 @@ import { useQueryClient } from '@tanstack/react-query';


const Profile = () => {

const { profile, setProfile } = useProfileStore();
const { setIdProject } = useProjectStore();
const queryClient = useQueryClient();



const router = useRouter();

Expand All @@ -33,7 +30,6 @@ const Profile = () => {
setProfile(null)
setIdProject("")
queryClient.clear()

}

return (
Expand Down Expand Up @@ -68,5 +64,4 @@ const Profile = () => {
);
};


export default Profile;
73 changes: 23 additions & 50 deletions apps/client-ts/src/app/(Dashboard)/configuration/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,40 +18,38 @@ import {
TabsList,
TabsTrigger,
} from "@/components/ui/tabs"
import { LinkedUsersPage } from "@/components/Configuration/LinkedUsersPage";
import { LinkedUsersPage } from "@/components/Configuration/LinkedUsers/LinkedUsersPage";
import { Button } from "@/components/ui/button";
import { PlusCircledIcon } from "@radix-ui/react-icons";
import { FModal } from "@/components/Configuration/FieldMappingModal"
import { FModal } from "@/components/Configuration/FieldMappings/FieldMappingModal"
import { Separator } from "@/components/ui/separator";
import FieldMappingsTable from "@/components/Configuration/FieldMappingsTable";
import AddLinkedAccount from "@/components/Configuration/AddLinkedAccount";
import useLinkedUsers from "@/hooks/useLinkedUsers";
import useFieldMappings from "@/hooks/useFieldMappings";
import FieldMappingsTable from "@/components/Configuration/FieldMappings/FieldMappingsTable";
import AddLinkedAccount from "@/components/Configuration/LinkedUsers/AddLinkedAccount";
import useLinkedUsers from "@/hooks/get/useLinkedUsers";
import useFieldMappings from "@/hooks/get/useFieldMappings";
import { Skeleton } from "@/components/ui/skeleton";
import { useState } from "react";
import { LoadingSpinner } from "@/components/Connection/LoadingSpinner";
import AddWebhook from "@/components/Configuration/AddWebhook";
import AddWebhook from "@/components/Configuration/Webhooks/AddWebhook";
import { cn } from "@/lib/utils";
import { WebhooksPage } from "@/components/Configuration/WebhooksPage";
import useWebhooks from "@/hooks/useWebhooks";
import { WebhooksPage } from "@/components/Configuration/Webhooks/WebhooksPage";
import useWebhooks from "@/hooks/get/useWebhooks";
import { usePostHog } from 'posthog-js/react'
import config from "@/lib/config";
import useProjectStore from "@/state/projectStore";
import AddAuthCredentials from "@/components/Configuration/AddAuthCredentials";
import AuthCredentialsTable from "@/components/Configuration/AuthCredentialsTable";
import useConnectionStrategies from "@/hooks/useConnectionStrategies";
import useConnectionStrategies from "@/hooks/get/useConnectionStrategies";
import { extractAuthMode,extractProvider,extractVertical} from '@panora/shared'
import { Heading } from "@/components/ui/heading";
import CustomConnectorPage from "@/components/Configuration/CustomConnectorPage";
import CustomConnectorPage from "@/components/Configuration/Connector/CustomConnectorPage";
import { PlusCircle } from "lucide-react";

export default function Page() {
const {idProject} = useProjectStore();

const { data: linkedUsers, isLoading, error } = useLinkedUsers();
const { data: webhooks, isLoading: isWebhooksLoading, error: isWebhooksError } = useWebhooks();
const {data: connectionStrategies, isLoading: isConnectionStrategiesLoading,error: isConnectionStategiesError} = useConnectionStrategies()

const { data: connectionStrategies, isLoading: isConnectionStrategiesLoading, error: isConnectionStategiesError} = useConnectionStrategies()
const { data: mappings, isLoading: isFieldMappingsLoading, error: isFieldMappingsError } = useFieldMappings();

const [open, setOpen] = useState(false);
const handleClose = () => {
setOpen(false);
Expand Down Expand Up @@ -79,13 +77,11 @@ export default function Page() {
console.log("error fetching webhooks..");
}

if(isConnectionStrategiesLoading)
{
if(isConnectionStrategiesLoading){
console.log("loading Connection Strategies...");
}

if(isConnectionStategiesError)
{
if(isConnectionStategiesError){
console.log("error Fetching connection Strategies!")
}

Expand All @@ -99,8 +95,6 @@ export default function Page() {
data_type: mapping.data_type,
}))

// console.log(ConnectionStrategies)

const mappingConnectionStrategies = connectionStrategies?.map(cs => ({
id_cs : cs.id_connection_strategy,
provider_name : extractProvider(cs.type),
Expand All @@ -110,8 +104,6 @@ export default function Page() {
status: cs.status
}))

console.log(mappingConnectionStrategies)

return (

<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
Expand Down Expand Up @@ -157,19 +149,19 @@ export default function Page() {
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-12">
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className={cn("w-[200px] justify-between")}
<Button
size="sm"
className="h-7 gap-1 w-[180px]"
onClick={() => {
posthog?.capture("add_field_mappings_button_clicked", {
id_project: idProject,
mode: config.DISTRIBUTION
})}}
>
<PlusCircledIcon className="mr-2 h-5 w-5" />
Add Field Mappings
<span className="flex flex-row justify-center sr-only sm:not-sr-only sm:whitespace-nowrap">
<PlusCircledIcon className="h-3.5 w-3.5 mt-[3px] mr-1" />
Create Field Mappings
</span>
</Button>
</DialogTrigger>
<DialogContent className="sm:w-[450px] lg:max-w-screen-lg overflow-y-scroll max-h-screen">
Expand Down Expand Up @@ -211,28 +203,9 @@ export default function Page() {
</div>
</TabsContent>

<TabsContent value="0auth" className="space-y-4">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-12">
<AddAuthCredentials/>
<Card className="col-span-12">
<CardHeader>
<CardTitle className="text-left">Your Providers</CardTitle>
<CardDescription className="text-left">
Use and setup the credentials of your providers.
</CardDescription>
</CardHeader>
<Separator className="mb-10"/>
<CardContent>
<AuthCredentialsTable mappings={mappingConnectionStrategies} isLoading={false} />
</CardContent>
</Card>
</div>
</TabsContent>

<TabsContent value="custom" className="space-y-4">
<CustomConnectorPage />
</TabsContent>

</Tabs>
</div>

Expand Down
29 changes: 10 additions & 19 deletions apps/client-ts/src/app/(Dashboard)/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
'use client'
import { Inter } from "next/font/google";
import "./../globals.css";
import { RootLayout } from "@/components/RootLayout";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import Cookies from 'js-cookie';
import useFetchUserMutation from "@/hooks/mutations/useFetchUserMutation";

const inter = Inter({ subsets: ["latin"] });
import useUser from "@/hooks/get/useUser";

export default function Layout({
children,
Expand All @@ -17,27 +14,21 @@ export default function Layout({

const [userInitialized,setUserInitialized] = useState(false)
const router = useRouter()
const {mutate: fetchUserMutate} = useFetchUserMutation()


const { mutate } = useUser()

useEffect(() => {
if(!Cookies.get('access_token'))
{
router.replace("/b2c/login")
}
else
{

fetchUserMutate(Cookies.get('access_token'),{
if(!Cookies.get('access_token')) {
router.replace("/b2c/login")
}else {
mutate(
Cookies.get('access_token'),
{
onError: () => router.replace("/b2c/login"),
onSuccess: () => setUserInitialized(true)
})
}
)
}
},[])




return (
<> {userInitialized ? (
Expand Down
8 changes: 3 additions & 5 deletions apps/client-ts/src/app/b2c/login/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,15 @@ import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import Cookies from 'js-cookie';
import useProfileStore from "@/state/profileStore";
import useFetchUserMutation from "@/hooks/mutations/useFetchUserMutation";
import useUser from "@/hooks/get/useUser";

export default function Page() {

const [userInitialized,setUserInitialized] = useState(true)
const {mutate : fetchUserMutate} = useFetchUserMutation()
const {mutate} = useUser()
const router = useRouter()
const {profile} = useProfileStore();

useEffect(() => {

if(profile)
{
router.replace('/connections');
Expand All @@ -38,7 +36,7 @@ export default function Page() {

if(Cookies.get('access_token') && !profile)
{
fetchUserMutate(Cookies.get('access_token'),{
mutate(Cookies.get('access_token'),{
onError: () => setUserInitialized(false)
})
}
Expand Down
Loading

0 comments on commit a41a610

Please sign in to comment.