Skip to content

Commit

Permalink
added source node configuration logic
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonwcfan committed Aug 8, 2024
1 parent efcfc12 commit a17ce4e
Show file tree
Hide file tree
Showing 24 changed files with 509 additions and 311 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
import React, { useState, useCallback } from "react";
import { Select } from "@/subframe/components/Select";
import { PropertiesAccordion } from "@/subframe/components/PropertiesAccordion";
import { Button } from "@/subframe/components/Button";
import { TextField } from "@/subframe/components/TextField";
import { PropertiesRow } from "../../../subframe/components/PropertiesRow";
import { Switch } from "../../../subframe/components/Switch";
import { SourceConfigurationDrawerType } from "@/types";

// interface GCSConfigurationDrawer {

// }

export function GCSConfigurationDrawer() {
return (
<div>
<PropertiesAccordion title="Authentication">
<div className="flex flex-col items-start gap-4">
<span className="text-caption font-caption text-default-font">
In order to access your Google Cloud Storage, you&#39;ll need to set up
a service account and upload the credentials as a JSON file. Learn more
here.
</span>
<div className="flex flex-col items-start gap-2">
<Button
variant="neutral-secondary"
icon="FeatherUpload"
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
>
Upload
</Button>
<span className="text-caption font-caption text-subtext-color">
Upload your service account credentials as a JSON file.
</span>
</div>
</div>
</PropertiesAccordion>
<PropertiesAccordion title="File Location">
<div className="flex flex-col items-start gap-4">
<TextField
disabled={false}
error={false}
variant="outline"
label="Bucket Name"
helpText={
'The unique name of the GCS bucket to connect to, e.g. "project-data-storage".'
}
icon={null}
iconRight={null}
>
<TextField.Input
placeholder=""
value=""
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {}}
/>
</TextField>
<TextField
disabled={false}
error={false}
variant="outline"
label="File Name"
helpText="The filename or path of the document to retrieve."
icon={null}
iconRight={null}
>
<TextField.Input
placeholder=""
value=""
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {}}
/>
</TextField>
</div>
<div className="flex w-full items-center gap-2 pt-4">
<Button
variant="neutral-primary"
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
>
Test Connection
</Button>
</div>
</PropertiesAccordion>
<PropertiesAccordion title="Sample Data">
<div className="flex flex-col items-start gap-2">
<Button
variant="neutral-secondary"
icon="FeatherUpload"
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
>
Upload
</Button>
<span className="text-caption font-caption text-subtext-color">
Upload a CSV file to test this node with sample input data.
</span>
</div>
</PropertiesAccordion>
<PropertiesAccordion title="Run Schedule">
<div className="flex flex-col items-start gap-4">
<span className="text-caption font-caption text-default-font">
By default, a node will immediately run after all its input nodes have
completed running. Setting a schedule delays running until the specified
time.
</span>
<div className="flex w-full items-center gap-2">
<span className="grow shrink-0 basis-0 text-caption-bold font-caption-bold text-default-font">
Enable Schedule
</span>
<Switch checked={false} onCheckedChange={(checked: boolean) => {}} />
</div>
<div className="flex w-full items-center justify-end gap-2">
<Button
className="h-8 grow shrink-0 basis-0"
variant="neutral-secondary"
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
>
Crontab
</Button>
<Button
className="h-8 grow shrink-0 basis-0"
icon="FeatherCheck"
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
>
Basic
</Button>
</div>
<div className="flex w-full items-center gap-2">
<span className="grow shrink-0 basis-0 text-caption-bold font-caption-bold text-default-font">
Run Frequency
</span>
<Select
variant="filled"
label=""
placeholder="Weekly"
helpText=""
value=""
onValueChange={(value: string) => {}}
>
<Select.Item value="5 mins">5 mins</Select.Item>
<Select.Item value="30 mins">30 mins</Select.Item>
<Select.Item value="1 hour">1 hour</Select.Item>
</Select>
</div>
<div className="flex w-full items-center gap-2">
<span className="grow shrink-0 basis-0 text-caption-bold font-caption-bold text-default-font">
Day of Week
</span>
<Select
variant="filled"
label=""
placeholder="Thursday"
helpText=""
value=""
onValueChange={(value: string) => {}}
>
<Select.Item value="5 mins">5 mins</Select.Item>
<Select.Item value="30 mins">30 mins</Select.Item>
<Select.Item value="1 hour">1 hour</Select.Item>
</Select>
</div>
<div className="flex w-full items-center gap-2">
<span className="grow shrink-0 basis-0 text-caption-bold font-caption-bold text-default-font">
Hour of Day
</span>
<Select
variant="filled"
label=""
placeholder="12:00:00 UTC"
helpText=""
value=""
onValueChange={(value: string) => {}}
>
<Select.Item value="5 mins">5 mins</Select.Item>
<Select.Item value="30 mins">30 mins</Select.Item>
<Select.Item value="1 hour">1 hour</Select.Item>
</Select>
</div>
</div>
</PropertiesAccordion>
<PropertiesRow text="On Failure">
<Select
variant="filled"
label=""
placeholder="Retry"
helpText=""
value=""
onValueChange={(value: string) => {}}
>
<Select.Item value="5 mins">5 mins</Select.Item>
<Select.Item value="Notify">Notify</Select.Item>
<Select.Item value="Ignore">Ignore</Select.Item>
</Select>
</PropertiesRow>
</div>
);
}
30 changes: 17 additions & 13 deletions frontend/src/components/ConfigurationDrawer/index.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,34 @@
import { Button } from "../../../../frontend/src/subframe/components/Button";
import React from "react";
import { Button } from "@/subframe/components/Button";
import {
IconWithBackground,
type IconName,
} from "../../../../frontend/src/subframe/components/IconWithBackground";
import { Select } from "../../../../frontend/src/subframe/components/Select";
import { PropertiesAccordion } from "../../../../frontend/src/subframe/components/PropertiesAccordion";
import { TextArea } from "../../../../frontend/src/subframe/components/TextArea";
import { Alert } from "../../../../frontend/src/subframe/components/Alert";
import { PropertiesRow } from "../../../../frontend/src/subframe/components/PropertiesRow";
import { TextField } from "../../../../frontend/src/subframe/components/TextField";
import { ToggleGroup } from "../../../../frontend/src/subframe/components/ToggleGroup";
import { NodeTypeNames } from "@/types";
} from "@/subframe/components/IconWithBackground";
import { Select } from "@/subframe/components/Select";
import { PropertiesAccordion } from "@/subframe/components/PropertiesAccordion";
import { TextArea } from "@/subframe/components/TextArea";
import { Alert } from "@/subframe/components/Alert";
import { PropertiesRow } from "@/subframe/components/PropertiesRow";
import { TextField } from "@/subframe/components/TextField";
import { ToggleGroup } from "@/subframe/components/ToggleGroup";
import { NodeTypeNames, configurationDrawerTypes } from "@/types";

interface ConfigurationDrawerProps {
children?: React.ReactNode;
className?: string;
title: string;
description?: string;
nodeType: string;
nodeData?: any;
iconName: IconName;
closeDrawer: () => void;
}

export function ConfigurationDrawer({
children,
className,
title,
description,
nodeType,
nodeData,
iconName,
closeDrawer,
}: ConfigurationDrawerProps) {
Expand Down Expand Up @@ -70,7 +71,10 @@ export function ConfigurationDrawer({
/>
</TextArea>
</PropertiesAccordion>
{children}
{React.createElement(
configurationDrawerTypes[nodeType as keyof typeof configurationDrawerTypes],
{ nodeData }
)}
</div>
<div className="flex w-full items-center justify-end gap-2 pt-4 pr-2 pb-2 pl-2">
<Button
Expand Down
24 changes: 12 additions & 12 deletions frontend/src/components/nodes/ConditionalNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@ import {
} from "@xyflow/react";
import * as SubframeCore from "@subframe/core";
import { ToggleGroup } from "@/subframe/components/ToggleGroup";
import { RadioGroup } from "../../../../frontend/src/subframe/components/RadioGroup";
import { Button } from "../../../../frontend/src/subframe/components/Button";
import { Table } from "../../../../frontend/src/subframe/components/Table";
import { Select } from "../../../../frontend/src/subframe/components/Select";
import { TextField } from "../../../../frontend/src/subframe/components/TextField";
import { PropertiesAccordion } from "../../../../frontend/src/subframe/components/PropertiesAccordion";
import { TextArea } from "../../../../frontend/src/subframe/components/TextArea";
import { Alert } from "../../../../frontend/src/subframe/components/Alert";
import { PropertiesRow } from "../../../../frontend/src/subframe/components/PropertiesRow";
import { RadioGroup } from "@/subframe/components/RadioGroup";
import { Button } from "@/subframe/components/Button";
import { Table } from "@/subframe/components/Table";
import { Select } from "@/subframe/components/Select";
import { TextField } from "@/subframe/components/TextField";
import { PropertiesAccordion } from "@/subframe/components/PropertiesAccordion";
import { TextArea } from "@/subframe/components/TextArea";
import { Alert } from "@/subframe/components/Alert";
import { PropertiesRow } from "@/subframe/components/PropertiesRow";
import { Switch } from "@/subframe/components/Switch";
import { type NodeResults } from "../../types";
import { NodeLayout } from "../../components/nodes";
import { NodeLayout } from "../../components/Nodes";

type ConditionalNode = Node<
{
Expand Down Expand Up @@ -319,10 +319,10 @@ export default function ConditionalNode(props: NodeProps<ConditionalNode>) {
}

interface ConditionalNodeConfigurationDrawerProps {
closeDrawer: () => void;
nodeData?: any;
}

export function ConditionalNodeConfigurationDrawer() {
export function ConditionalNodeConfigurationDrawer({}: ConditionalNodeConfigurationDrawerProps) {
return (
<div>
<PropertiesAccordion title="Python Version">
Expand Down
22 changes: 11 additions & 11 deletions frontend/src/components/nodes/DestinationNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ import {
type NodeProps,
} from "@xyflow/react";
import * as SubframeCore from "@subframe/core";
import { ToggleGroup } from "../../../../frontend/src/subframe/components/ToggleGroup";
import { Button } from "../../../../frontend/src/subframe/components/Button";
import { Table } from "../../../../frontend/src/subframe/components/Table";
import { Select } from "../../../../frontend/src/subframe/components/Select";
import { PropertiesAccordion } from "../../../../frontend/src/subframe/components/PropertiesAccordion";
import { TextArea } from "../../../../frontend/src/subframe/components/TextArea";
import { Alert } from "../../../../frontend/src/subframe/components/Alert";
import { ToggleGroup } from "@/subframe/components/ToggleGroup";
import { Button } from "@/subframe/components/Button";
import { Table } from "@/subframe/components/Table";
import { Select } from "@/subframe/components/Select";
import { PropertiesAccordion } from "@/subframe/components/PropertiesAccordion";
import { TextArea } from "@/subframe/components/TextArea";
import { Alert } from "@/subframe/components/Alert";
import { PropertiesRow } from "@/subframe/components/PropertiesRow";
import { Switch } from "../../../../frontend/src/subframe/components/Switch";
import { Switch } from "@/subframe/components/Switch";
import { type NodeResults } from "@/types/index";
import { NodeLayout } from "@/components/nodes/index";
import { NodeLayout } from "@/components/Nodes/index";

type DestinationNode = Node<
{
Expand Down Expand Up @@ -69,10 +69,10 @@ export default function DestinationNode(props: NodeProps<DestinationNode>) {
}

interface DestinationNodeConfigurationDrawerProps {
closeDrawer: () => void;
nodeData?: any;
}

export function DestinationNodeConfigurationDrawer() {
export function DestinationNodeConfigurationDrawer({}: DestinationNodeConfigurationDrawerProps) {
return (
<div>
<PropertiesAccordion title="Python Version">
Expand Down
26 changes: 13 additions & 13 deletions frontend/src/components/nodes/FilterNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@ import {
type NodeProps,
} from "@xyflow/react";
import * as SubframeCore from "@subframe/core";
import { ToggleGroup } from "../../../../frontend/src/subframe/components/ToggleGroup";
import { Button } from "../../../../frontend/src/subframe/components/Button";
import { Table } from "../../../../frontend/src/subframe/components/Table";
import { Select } from "../../../../frontend/src/subframe/components/Select";
import { TextField } from "../../../../frontend/src/subframe/components/TextField";
import { PropertiesAccordion } from "../../../../frontend/src/subframe/components/PropertiesAccordion";
import { TextArea } from "../../../../frontend/src/subframe/components/TextArea";
import { Alert } from "../../../../frontend/src/subframe/components/Alert";
import { PropertiesRow } from "../../../../frontend/src/subframe/components/PropertiesRow";
import { Switch } from "../../../../frontend/src/subframe/components/Switch";
import { ToggleGroup } from "@/subframe/components/ToggleGroup";
import { Button } from "@/subframe/components/Button";
import { Table } from "@/subframe/components/Table";
import { Select } from "@/subframe/components/Select";
import { TextField } from "@/subframe/components/TextField";
import { PropertiesAccordion } from "@/subframe/components/PropertiesAccordion";
import { TextArea } from "@/subframe/components/TextArea";
import { Alert } from "@/subframe/components/Alert";
import { PropertiesRow } from "@/subframe/components/PropertiesRow";
import { Switch } from "@/subframe/components/Switch";
import { type NodeResults } from "@/types/index";
import { NodeLayout } from "@/components/nodes/index";
import { NodeLayout } from "@/components/Nodes/index";

type FilterNode = Node<
{
Expand Down Expand Up @@ -181,10 +181,10 @@ export default function FilterNode(props: NodeProps<FilterNode>) {
}

interface FilterNodeConfigurationDrawerProps {
closeDrawer: () => void;
nodeData?: any;
}

export function FilterNodeConfigurationDrawer() {
export function FilterNodeConfigurationDrawer({}: FilterNodeConfigurationDrawerProps) {
return (
<div>
<PropertiesAccordion title="Python Version">
Expand Down
Loading

0 comments on commit a17ce4e

Please sign in to comment.