Skip to content

Commit

Permalink
Merge pull request #415 from panoratech/frontend-improvements
Browse files Browse the repository at this point in the history 
💄 Adding references to docs in webapp
  • Loading branch information
@rflihxyz
rflihxyz authored May 5, 2024
2 parents 17430ca + 3c9b109 commit 6fbbf23
Show file tree
Hide file tree
Showing 15 changed files with 92 additions and 157 deletions.
Binary file added apps/client-ts/public/logo-panora-black.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.
Binary file added apps/client-ts/public/logo-panora-white-hq.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.
20 changes: 11 additions & 9 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 @@ -122,8 +122,13 @@ export default function Page() {
<div className="flex-1 space-y-4 p-8 pt-6">
<div className="flex flex-col items-start justify-between space-y-2">
<Heading
title="Api Keys"
description="Manage your api keys."
title="API Keys"
description={
<>
Create a key that unlocks full API access to this project.
<a href="https://docs.panora.dev/core-concepts/auth#learn-how-to-generate-your-api-keys-and-catch-connection-tokens" target="_blank" rel="noopener noreferrer"> More details in <strong>our documentation</strong></a>.
</>
}
/>
</div>
<div>
Expand Down Expand Up @@ -160,9 +165,9 @@ export default function Page() {
(
<>
<DialogHeader>
<DialogTitle>Add New Api Key</DialogTitle>
<DialogTitle>Create a new API key</DialogTitle>
<DialogDescription>
Never share this key, you must saved it it will be displayed once !
Keep your key safe. <br></br>Save and store this new key to a secure place, such as a password manager or secret store. You won't be able to see it again.
</DialogDescription>
</DialogHeader>

Expand All @@ -175,16 +180,13 @@ export default function Page() {
name="apiKeyIdentifier"
render={({ field }) => (
<FormItem>
<FormLabel>API Key Identifier</FormLabel>
<FormLabel>Name your API key</FormLabel>
<FormControl>
<Input
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
placeholder="My Best Key For Finance Data" {...field}
placeholder="Your awesome key name" {...field}
/>
</FormControl>
<FormDescription>
This is the API Key Identifier of system.
</FormDescription>
<FormMessage />
</FormItem>
)}
Expand Down
6 changes: 4 additions & 2 deletions apps/client-ts/src/app/(Dashboard)/configuration/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export default function Page() {
Webhooks
</TabsTrigger>
<TabsTrigger value="0auth">
0Auth Credentials
OAuth Credentials
</TabsTrigger>
</TabsList>
<TabsContent value="linked-accounts" className="space-y-4">
Expand Down Expand Up @@ -179,7 +179,8 @@ export default function Page() {
<CardHeader>
<CardTitle className="text-left">Your Fields Mapping</CardTitle>
<CardDescription className="text-left">
You built {mappings ? mappings.length : <Skeleton className="w-[20px] h-[12px] rounded-md" />} fields mapping.
You built {mappings ? mappings.length : <Skeleton className="w-[20px] h-[12px] rounded-md" />} fields mappings.
<a href="https://docs.panora.dev/core-concepts/custom-fields" target="_blank" rel="noopener noreferrer"><strong> Learn more about custom field mappings</strong></a>
</CardDescription>
</CardHeader>
<Separator className="mb-10"/>
Expand All @@ -198,6 +199,7 @@ export default function Page() {
<CardTitle className="text-left">Your Webhooks</CardTitle>
<CardDescription className="text-left">
You enabled {webhooks ? webhooks.length : <Skeleton className="w-[20px] h-[12px] rounded-md" />} webhooks.
<a href="https://docs.panora.dev/webhooks/overview" target="_blank" rel="noopener noreferrer"><strong> Read more about webhooks from our documentation</strong></a>
</CardDescription>
</CardHeader>
<Separator className="mb-10"/>
Expand Down
3 changes: 2 additions & 1 deletion apps/client-ts/src/app/(Dashboard)/connections/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ export default function ConnectionPage() {
title="Connections"
description="Connections between your product and your users’ accounts on third-party software."
/>
</div>
</div>
<></>
<ConnectionTable />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/client-ts/src/components/Configuration/AddAuthCredentials.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const AddAuthCredentials = () => {
}}
>
<PlusCircledIcon className=" h-5 w-5" />
Add 0Auth Credentials
Add Custom OAuth
</Button>
</DialogTrigger>
<DialogContent className="sm:w-[450px] lg:max-w-screen-lg overflow-y-scroll max-h-screen">
Expand Down
14 changes: 7 additions & 7 deletions apps/client-ts/src/components/Configuration/AddAuthCredentialsForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ const AddAuthCredentialsForm = (prop : propType) => {
attributes:["client_id","client_secret","scope"],
values:[client_id,client_secret,scope]
})
posthog?.capture("Connection_strategy_0Auth2_updated", {
posthog?.capture("Connection_strategy_OAuth2_updated", {
id_project: idProject,
mode: config.DISTRIBUTION
});
Expand All @@ -233,7 +233,7 @@ const AddAuthCredentialsForm = (prop : propType) => {
attributes:["client_id","client_secret","scope"],
values:[client_id,client_secret,scope]
});
posthog?.capture("Connection_strategy_0Auth2_created", {
posthog?.capture("Connection_strategy_OAuth2_created", {
id_project: idProject,
mode: config.DISTRIBUTION
});
Expand Down Expand Up @@ -352,9 +352,9 @@ const AddAuthCredentialsForm = (prop : propType) => {

<form onSubmit={form.handleSubmit(onSubmit)}>
<CardHeader>
<CardTitle>Add 0Auth Credentials</CardTitle>
<CardTitle>Add OAuth Credentials</CardTitle>
<CardDescription>
Add your provider&apos; credentials for connection.
In the event that you are using your own OAuth credentials, Panora gives you have the option to import them instead of using our pre-made OAuth apps.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-5">
Expand Down Expand Up @@ -461,7 +461,7 @@ const AddAuthCredentialsForm = (prop : propType) => {
<SelectValue placeholder="Select Authentication Method" />
</SelectTrigger>
<SelectContent>
<SelectItem value={AuthStrategy.oauth2}>0Auth2</SelectItem>
<SelectItem value={AuthStrategy.oauth2}>OAuth2</SelectItem>
<SelectItem value={AuthStrategy.api_key}>API</SelectItem>
<SelectItem value={AuthStrategy.basic}>Basic Auth</SelectItem>
</SelectContent>
Expand All @@ -474,7 +474,7 @@ const AddAuthCredentialsForm = (prop : propType) => {

</div>

{/* If Authentication Method is 0Auth2 */}
{/* If Authentication Method is OAuth2 */}

{Watch.auth_type===AuthStrategy.oauth2 ?
<>
Expand Down Expand Up @@ -607,7 +607,7 @@ const AddAuthCredentialsForm = (prop : propType) => {
<></>}
</CardContent>
<CardFooter className="justify-between space-x-2">
<Button type="submit">Submit</Button>
<Button type="submit">Save</Button>
</CardFooter>
</form>
</Form>
Expand Down
16 changes: 6 additions & 10 deletions apps/client-ts/src/components/Configuration/AddWebhook.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,9 +116,9 @@ const AddWebhook = () => {

<form onSubmit={form.handleSubmit(onSubmit)}>
<CardHeader>
<CardTitle>Define your webhook</CardTitle>
<CardTitle>Create a webhook</CardTitle>
<CardDescription>
React to specific events in your product.
Set up your webhook endpoint to receive live events from Panora.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-6">
Expand Down Expand Up @@ -160,15 +160,14 @@ const AddWebhook = () => {
name="url"
render={({ field }) => (
<FormItem>
<FormLabel>Destination URL</FormLabel>
<FormLabel>Endpoint URL</FormLabel>
<FormControl>
<Input
placeholder="https://localhost/my-endpoint/webhook" {...field}
placeholder="https://yourdomain/webhook_endpoint" {...field}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</FormControl>
<FormDescription>
This is the endpoint where the webhook will send requests to.
</FormDescription>
<FormMessage />
</FormItem>
Expand All @@ -184,21 +183,18 @@ const AddWebhook = () => {
<FormLabel>Description</FormLabel>
<FormControl>
<Input
placeholder="Please include a description of your endpoint." {...field}
placeholder="Give your endpoint a short, descriptive name." {...field}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</FormControl>
<FormDescription>
This is the description of your webhook.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
</CardContent>
<CardFooter className="justify-between space-x-2">
<Button type="submit">Submit</Button>
<Button type="submit">Add Endpoint</Button>
</CardFooter>
</form>
</Form>
Expand Down
48 changes: 17 additions & 31 deletions apps/client-ts/src/components/Configuration/FieldMappingModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,17 +155,18 @@ export function FModal({ onClose }: {onClose: () => void}) {
return (
<Tabs defaultValue="define" className="m-2" >
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="define">Define Field</TabsTrigger>
<TabsTrigger value="map">Map Fields</TabsTrigger>
<TabsTrigger value="define">Create Field</TabsTrigger>
<TabsTrigger value="map">Map Field</TabsTrigger>
</TabsList>
<TabsContent value="define">
<Card>
<Form {...defineForm}>
<form onSubmit={defineForm.handleSubmit(onDefineSubmit)}>
<CardHeader>
<CardTitle>Define Panora Field</CardTitle>
<CardTitle>Create a custom field</CardTitle>
<CardDescription>
Define a Panora custom field to extend a unified model. Once done, you can map it to an existing field in your end-user's software.
Create a custom field in Panora to extend our unified objects. Once done, you can map this field to existing fields in your end-user's software. Find details in
<a href="https://docs.panora.dev/core-concepts/custom-fields" target="_blank" rel="noopener noreferrer"><strong> documentation</strong></a>.
</CardDescription>
</CardHeader>
<CardContent className="space-y-2">
Expand All @@ -175,7 +176,7 @@ export function FModal({ onClose }: {onClose: () => void}) {
name="standardModel"
render={({ field }) => (
<FormItem>
<FormLabel>Standard Object</FormLabel>
<FormLabel>What object to you want to extend?</FormLabel>
<FormControl>
<Select onValueChange={field.onChange} defaultValue={field.value} >
<SelectTrigger className="w-[180px]">
Expand All @@ -192,9 +193,6 @@ export function FModal({ onClose }: {onClose: () => void}) {
</SelectContent>
</Select>
</FormControl>
<FormDescription>
This is the common unified model (Contact, Company, Ticket...)
</FormDescription>
<FormMessage />
</FormItem>
)}
Expand All @@ -206,16 +204,13 @@ export function FModal({ onClose }: {onClose: () => void}) {
name="fieldName"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormLabel>Give your Custom Field an identifier</FormLabel>
<FormControl>
<Input
placeholder="favorite_color" {...field}
placeholder="ex: hair_color, or lead_score" {...field}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</FormControl>
<FormDescription>
This will be the name of the field on Panora's side.
</FormDescription>
<FormMessage />
</FormItem>
)}
Expand All @@ -234,9 +229,6 @@ export function FModal({ onClose }: {onClose: () => void}) {
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</FormControl>
<FormDescription>
A quick description of the field to remind you its context.
</FormDescription>
<FormMessage />
</FormItem>
)}
Expand All @@ -248,7 +240,7 @@ export function FModal({ onClose }: {onClose: () => void}) {
name="fieldType"
render={({ field }) => (
<FormItem>
<FormLabel>Field Type</FormLabel>
<FormLabel>Data Type</FormLabel>
<FormControl>
<Select
onValueChange={field.onChange} defaultValue={field.value}
Expand All @@ -258,26 +250,23 @@ export function FModal({ onClose }: {onClose: () => void}) {
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="string">string</SelectItem>
<SelectItem value="int">int</SelectItem>
<SelectItem value="string[]">string[]</SelectItem>
<SelectItem value="int[]">int[]</SelectItem>
<SelectItem value="string">Text</SelectItem>
<SelectItem value="int">Number</SelectItem>
<SelectItem value="string[]">Text Array</SelectItem>
<SelectItem value="int[]">Number Array</SelectItem>
<SelectItem value="date">Date</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
<FormDescription>
This is the type of the field.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
</CardContent>
<CardFooter>
<Button className='w-full'>Define Field</Button>
<Button className='w-full'>Create Field</Button>
</CardFooter>
</form>
</Form>
Expand All @@ -289,9 +278,9 @@ export function FModal({ onClose }: {onClose: () => void}) {

<form onSubmit={mapForm.handleSubmit(onMapSubmit)}>
<CardHeader>
<CardTitle>Map</CardTitle>
<CardTitle>Map Field</CardTitle>
<CardDescription>
After you defined a Panora custom field, you can map it to an existent custom field on your end-user's software.
Field Mapping allows you to map data from your users' platforms to custom fields on your Panora Unified Models.
</CardDescription>
</CardHeader>
<CardContent className="space-y-2">
Expand All @@ -301,7 +290,7 @@ export function FModal({ onClose }: {onClose: () => void}) {
name="attributeId"
render={({ field }) => (
<FormItem>
<FormLabel>Panora Field</FormLabel>
<FormLabel>Panora Custom Field</FormLabel>
<FormControl>
<Select
onValueChange={field.onChange} defaultValue={field.value}
Expand All @@ -321,9 +310,6 @@ export function FModal({ onClose }: {onClose: () => void}) {
</SelectContent>
</Select>
</FormControl>
<FormDescription>
This is the field name that you defined.
</FormDescription>
<FormMessage />
</FormItem>
)}
Expand Down
Loading

0 comments on commit 6fbbf23

Please sign in to comment.