From 7c804c8a8295e9ebbc64eb5410ddb92e5df00f1e Mon Sep 17 00:00:00 2001 From: Matthew Goodwin <49927862+m4ttheweric@users.noreply.github.com> Date: Thu, 9 Feb 2023 13:52:07 -0600 Subject: [PATCH] console: POC db connect select database draft design [GCU-107] PR-URL: https://github.com/hasura/graphql-engine-mono/pull/7897 GitOrigin-RevId: 4da175532c5422bd8985b9134f5aba7b190d05e0 --- frontend/.vscode/settings.json | 6 +- .../ConnectDatabase.stories.tsx | 37 ++++++ .../ConnectDBRedesign/ConnectDatabase.tsx | 23 ++++ .../SelectDatabase/SelectDatabase.stories.tsx | 40 +++++++ .../SelectDatabase/SelectDatabase.tsx | 87 ++++++++++++++ .../components/CopyableInputField.tsx | 67 +++++++++++ .../components/DatabaseLogo.tsx | 17 +++ .../components/EETrialActive.tsx | 103 ++++++++++++++++ .../components/EETrialExpired.tsx | 31 +++++ .../components/EETrialInactive.tsx | 35 ++++++ .../components/FancyRadioCards.tsx | 59 ++++++++++ .../components/InformationCard.tsx | 25 ++++ .../SelectDatabase/components/index.ts | 7 ++ .../components/SelectDatabase/databases.tsx | 66 +++++++++++ .../graphics/database-connect.svg | 106 +++++++++++++++++ .../graphics/db-logos/amazon.svg | 9 ++ .../graphics/db-logos/citus.svg | 9 ++ .../graphics/db-logos/cockroach.svg | 9 ++ .../graphics/db-logos/google.svg | 9 ++ .../graphics/db-logos/microsoft.svg | 9 ++ .../graphics/db-logos/placeholder.svg | 4 + .../graphics/db-logos/postgres.svg | 9 ++ .../graphics/db-logos/snowflake.svg | 9 ++ .../components/SelectDatabase/index.ts | 1 + .../components/SelectDatabase/styles.ts | 1 + .../components/SelectDatabase/utils.ts | 5 + .../lib/features/ConnectDBRedesign/index.ts | 2 + .../lib/features/ConnectDBRedesign/types.d.ts | 11 ++ .../gdc/introspection/getTablesListAsTree.tsx | 5 +- frontend/package-lock.json | 111 +++++++++++++++++- frontend/package.json | 1 + frontend/tailwind.config.js | 3 + 32 files changed, 912 insertions(+), 4 deletions(-) create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/ConnectDatabase.stories.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/ConnectDatabase.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.stories.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/CopyableInputField.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/DatabaseLogo.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialActive.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialExpired.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialInactive.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/FancyRadioCards.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/InformationCard.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/index.ts create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/databases.tsx create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/database-connect.svg create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/amazon.svg create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/citus.svg create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/cockroach.svg create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/google.svg create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/microsoft.svg create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/placeholder.svg create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/postgres.svg create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/snowflake.svg create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/index.ts create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/styles.ts create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/utils.ts create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/index.ts create mode 100644 frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/types.d.ts diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json index db370d25f38..0fbb9700266 100644 --- a/frontend/.vscode/settings.json +++ b/frontend/.vscode/settings.json @@ -2,8 +2,12 @@ "eslint.validate": ["json"], "cSpell.words": ["clsx", "hasura", "citus"], "tailwindCSS.experimental.classRegex": [ + // detects in simple variables like const twFoo = `pt-2`; "tw\\w+ ?= ?`([^`]*)`", - "tw\\w+: ?`([^`]*)`" + // detects tw strings in clsx function calls like: clsx('pt-2', 'relative'); + ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^`]*)(?:'|\"|`)"], + // detects strings in objects and nested objects. Just prefix variable name with tw like so: const twStyleObject = {}; + ["tw\\w+ = {\\s+([^;]+)\\s+};", "(?:'|\"|`)([^`]*)(?:'|\"|`)"] ], "tailwindCSS.rootFontSize": 14 } diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/ConnectDatabase.stories.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/ConnectDatabase.stories.tsx new file mode 100644 index 00000000000..ffbd3122fa0 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/ConnectDatabase.stories.tsx @@ -0,0 +1,37 @@ +import { hasuraToast } from '@/new-components/Toasts'; +import { useArgs } from '@storybook/client-api'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { ConnectDatabase } from './ConnectDatabase'; + +export default { + component: ConnectDatabase, + argTypes: { + onEnableEnterpriseTrial: { action: 'Enable Enterprise Clicked' }, + onContactSales: { action: 'Contact Sales Clicked' }, + }, +} as ComponentMeta; + +export const Primary: ComponentStory = args => { + const [, updateArgs] = useArgs(); + return ( + { + hasuraToast({ + message: + 'Missing EE Trial Forms here. Setting ee trial prop to active as a temporary measure.', + title: 'Sign Up Not Implemented', + toastOptions: { + duration: 3000, + }, + }); + updateArgs({ ...args, eeState: 'active' }); + }} + /> + ); +}; + +Primary.args = { + eeState: 'inactive', + initialDb: 'snowflake', +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/ConnectDatabase.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/ConnectDatabase.tsx new file mode 100644 index 00000000000..189fa909cec --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/ConnectDatabase.tsx @@ -0,0 +1,23 @@ +import { + SelectDatabase, + SelectDatabaseProps, +} from '@/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase'; + +export const ConnectDatabase = (props: SelectDatabaseProps) => { + return ( +
+
+
+
Connect Your First Database
+
+ Connect your first database to access your database objects in your + GraphQL API. +
+
+
+
+ +
+
+ ); +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.stories.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.stories.tsx new file mode 100644 index 00000000000..aa17bbb72be --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.stories.tsx @@ -0,0 +1,40 @@ +import { SelectDatabase } from '@/features/ConnectDBRedesign/components/SelectDatabase'; +import { hasuraToast } from '@/new-components/Toasts'; +import { useArgs } from '@storybook/client-api'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; + +export default { + component: SelectDatabase, + argTypes: { + onEnableEnterpriseTrial: { action: 'Enable Enterprise Clicked' }, + onContactSales: { action: 'Contact Sales Clicked' }, + }, +} as ComponentMeta; + +export const Primary: ComponentStory = args => { + const [, updateArgs] = useArgs(); + return ( +
+ Note: This container has a max width set. When rendering this component + keep width in mind to avoid it growing too large. + { + hasuraToast({ + message: + 'Missing EE Trial Forms here. Setting ee trial prop to active as a temporary measure.', + title: 'Sign Up Not Implemented', + toastOptions: { + duration: 3000, + }, + }); + updateArgs({ ...args, eeState: 'active' }); + }} + /> +
+ ); +}; +Primary.args = { + eeState: 'inactive', + initialDb: 'snowflake', +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.tsx new file mode 100644 index 00000000000..3fabec84d1f --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.tsx @@ -0,0 +1,87 @@ +import { NeonBanner } from '@/features/CloudOnboarding/OnboardingWizard/components/NeonConnectBanner/NeonBanner'; +import Globals from '@/Globals'; +import { Button } from '@/new-components/Button'; +import React from 'react'; +import { + EETrialActive, + EETrialExpired, + EETrialInactive, + FancyRadioCards, +} from './components'; +import { databases } from './databases'; +import DbConnectSVG from './graphics/database-connect.svg'; +import { DatabaseKind, EEState } from '../../types'; + +const enterpriseDbs: DatabaseKind[] = ['snowflake', 'athena']; + +export interface SelectDatabaseProps { + eeState: EEState; + initialDb?: DatabaseKind; + onEnableEnterpriseTrial: () => void; + onContactSales: () => void; +} + +export const SelectDatabase = ({ + eeState, + initialDb = 'postgres', + onEnableEnterpriseTrial, + onContactSales, +}: SelectDatabaseProps) => { + const [selectedDb, setSelectedDb] = React.useState( + initialDb || 'postgres' + ); + const displayNeonBanner = + Globals.consoleType === 'cloud' && !!Globals.hasuraCloudTenantId; + + const showConnectDbButton = + (enterpriseDbs.includes(selectedDb) && eeState === 'active') || + !enterpriseDbs.includes(selectedDb); + + return ( +
+ Database Connection Diagram + + { + setSelectedDb(val); + }} + /> + {selectedDb === 'postgres' && displayNeonBanner && ( +
+ + window.alert('todo: implement Neon integration') + } + status={{ status: 'default' }} + buttonText="Create a Neon Database" + setStepperIndex={() => {}} + /> +
+ )} + {enterpriseDbs.includes(selectedDb) && eeState === 'inactive' && ( + + )} + {enterpriseDbs.includes(selectedDb) && eeState === 'active' && ( + + )} + {enterpriseDbs.includes(selectedDb) && eeState === 'expired' && ( + + )} + {showConnectDbButton && ( + + )} +
+ ); +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/CopyableInputField.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/CopyableInputField.tsx new file mode 100644 index 00000000000..cb582cb6b91 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/CopyableInputField.tsx @@ -0,0 +1,67 @@ +import { Button } from '@/new-components/Button'; +import { InputField } from '@/new-components/Form'; +import clsx from 'clsx'; +import React from 'react'; +import { useFormContext } from 'react-hook-form'; +import { FaRegCopy } from 'react-icons/fa'; + +const twStyles = { + alignToTopOfInput: `top-[32px]`, + inputHeight: `h-[36px]`, + copyConfirm: { + base: `select-none transition-opacity duration-300 font-bold bg-slate-100/50 rounded backdrop-blur-sm absolute left-0 w-full flex items-center justify-center`, + invisible: `opacity-0 pointer-events-none`, + visible: `opacity-100 pointer-events-auto`, + }, + copyButton: `active:opacity-50 border-none bg-transparent absolute right-0 shadow-none bg-none`, +}; + +export const CopyableInputField: typeof InputField = props => { + const { watch } = useFormContext(); + const fieldValue = watch(props.name); + + // state to control visibility of copy confirmation + const [showCopiedConfirmation, setShowCopiedConfirmation] = + React.useState(false); + + const copyTimer = React.useRef(); + + const handleCopyButton = () => { + // clear timer if already going... + if (copyTimer.current) { + clearTimeout(copyTimer.current); + } + + // copy text to clipboard + navigator.clipboard.writeText(fieldValue); + + // show confirmation + setShowCopiedConfirmation(true); + + // hide after 1.5s + copyTimer.current = setTimeout(() => { + setShowCopiedConfirmation(false); + }, 1500); + }; + return ( +
+ +
+ ); +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/DatabaseLogo.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/DatabaseLogo.tsx new file mode 100644 index 00000000000..0ef3f164455 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/DatabaseLogo.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +export const DatabaseLogo: React.FC<{ title: string; image: string }> = ({ + title, + image, +}) => { + return ( +
+ {`${title} +
{title}
+
+ ); +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialActive.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialActive.tsx new file mode 100644 index 00000000000..972415e9f96 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialActive.tsx @@ -0,0 +1,103 @@ +import { + CopyableInputField, + InformationCard, +} from '@/features/ConnectDBRedesign/components/SelectDatabase/components'; +import { dbDisplayNames } from '@/features/ConnectDBRedesign/components/SelectDatabase/databases'; +import { indefiniteArticle } from '@/features/ConnectDBRedesign/components/SelectDatabase/utils'; +import { DatabaseKind } from '@/features/ConnectDBRedesign/types'; +import { Button } from '@/new-components/Button'; +import { InputField, SimpleForm } from '@/new-components/Form'; +import { hasuraToast } from '@/new-components/Toasts'; +import React from 'react'; +import { FaExternalLinkAlt } from 'react-icons/fa'; +import { GrDocker } from 'react-icons/gr'; +import { z } from 'zod'; + +export const EETrialActive: React.VFC<{ selectedDb: DatabaseKind }> = ({ + selectedDb, +}) => { + const dbWithArticle = `${indefiniteArticle(selectedDb)} ${ + dbDisplayNames[selectedDb] + }`; + return ( + +
+
+
+
+ {dbDisplayNames[selectedDb]} Connector Required +
+
+ {`The Hasura GraphQL Data Connector Service is required to connect to ${dbWithArticle} database.`} +
+
+
+ +
+
+
+
+ +
Docker Initialization
+
+ { + console.log(values); + }} + > + + +
+ +
+ +
+
+ + ); +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialExpired.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialExpired.tsx new file mode 100644 index 00000000000..5fa2fff477c --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialExpired.tsx @@ -0,0 +1,31 @@ +import { Button } from '@/new-components/Button'; +import React from 'react'; +import { FiAlertTriangle } from 'react-icons/fi'; +import { DatabaseKind } from '../../../types'; +import { InformationCard } from './InformationCard'; + +export const EETrialExpired: React.VFC<{ + onContactSales: () => void; + selectedDb: DatabaseKind; +}> = ({ onContactSales, selectedDb }) => { + return ( + +
+
+
+ Enterprise Trial Expired +
+
+ With an Enterprise Edition license you can add data sources such as + Snowflake, Amazon Athena, and more to your GraphQL API. +
+
+
+ +
+
+ + ); +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialInactive.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialInactive.tsx new file mode 100644 index 00000000000..d3e4c4c8715 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/EETrialInactive.tsx @@ -0,0 +1,35 @@ +import { Button } from '@/new-components/Button'; +import React from 'react'; +import { DatabaseKind } from '../../../types'; +import { dbDisplayNames } from '../databases'; +import { indefiniteArticle } from '../utils'; +import { InformationCard } from './InformationCard'; + +export const EETrialInactive: React.VFC<{ + onEnableEnterpriseTrial: () => void; + selectedDb: DatabaseKind; +}> = ({ onEnableEnterpriseTrial, selectedDb }) => { + const dbWithArticle = `${indefiniteArticle(selectedDb)} ${ + dbDisplayNames[selectedDb] + }`; + return ( + +
+
+
+ {`Looking to connect to ${dbWithArticle} database?`} +
+
+ Deploy data connectors to add data sources such as Snowflake, Amazon + Athena, and more to your GraphQL API. +
+
+
+ +
+
+ + ); +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/FancyRadioCards.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/FancyRadioCards.tsx new file mode 100644 index 00000000000..35e6a365753 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/FancyRadioCards.tsx @@ -0,0 +1,59 @@ +import * as RadioGroup from '@radix-ui/react-radio-group'; +import clsx from 'clsx'; +import React from 'react'; +import { DatabaseKind } from '../../../types'; + +const twRadioStyles = { + root: `grid grid-cols-4 gap-3`, + itemContainer: { + default: `flex items-center border bg-white shadow-sm rounded border-gray-300 cursor-pointer relative flex-[0_0_160px] h-[88px]`, + active: `ring-2 ring-blue-300 border-blue-400`, + disabled: ` cursor-not-allowed bg-gray-200`, + }, + radioButton: `bg-white w-[20px] h-[20px] rounded-full shadow-eq shadow-blue-900 hover:bg-blue-100 flex-[2] absolute top-0 left-0 m-3`, + indicator: `flex items-center justify-center w-full h-full relative after:content[''] after:block after:w-[10px] after:h-[10px] after:rounded-[50%] after:bg-blue-600`, + label: `text-base whitespace-nowrap cursor-pointer flex-[1] h-full w-full flex justify-center items-center`, +}; + +export const FancyRadioCards: React.VFC<{ + value: string; + items: { + value: string; + content: React.ReactNode | string; + }[]; + onChange: (value: DatabaseKind) => void; +}> = ({ value, items, onChange }) => { + return ( + + {items.map((item, i) => { + return ( +
+ + + + +
+ ); + })} + + ); +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/InformationCard.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/InformationCard.tsx new file mode 100644 index 00000000000..80d607f0a1e --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/InformationCard.tsx @@ -0,0 +1,25 @@ +import clsx from 'clsx'; +import React from 'react'; + +const twStyles = { + container: `border border-gray-300 mt-3 shadow-md rounded bg-white p-6`, + blueBorder: `border-l-4 border-l-[#297393]`, +}; + +export const InformationCard: React.FC<{ + blueLeftBorder?: boolean; + className?: string; + innerContainerClassName?: string; +}> = ({ children, blueLeftBorder, className, innerContainerClassName }) => { + return ( +
+ {children} +
+ ); +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/index.ts b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/index.ts new file mode 100644 index 00000000000..ea21fbe2840 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/components/index.ts @@ -0,0 +1,7 @@ +export { CopyableInputField } from './CopyableInputField'; +export { DatabaseLogo } from './DatabaseLogo'; +export { EETrialActive } from './EETrialActive'; +export { EETrialExpired } from './EETrialExpired'; +export { EETrialInactive } from './EETrialInactive'; +export { FancyRadioCards } from './FancyRadioCards'; +export { InformationCard } from './InformationCard'; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/databases.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/databases.tsx new file mode 100644 index 00000000000..b5101d5b2c8 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/databases.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { DatabaseLogo } from './components'; +import postgresLogo from './graphics/db-logos/postgres.svg'; +import googleLogo from './graphics/db-logos/google.svg'; +import microsoftLogo from './graphics/db-logos/microsoft.svg'; +import citusLogo from './graphics/db-logos/citus.svg'; +import cockroachLogo from './graphics/db-logos/cockroach.svg'; +import amazonLogo from './graphics/db-logos/amazon.svg'; +import snowflakeLogo from './graphics/db-logos/snowflake.svg'; +import { DatabaseKind } from '../../types'; + +export const dbDisplayNames: Record = { + postgres: 'PostgresSQL', + citus: 'Citus', + cockroach: 'CockroachDB', + alloydb: 'AlloyDB', + mssql: 'MSSQL', + bigquery: 'BigQuery', + snowflake: 'Snowflake', + athena: 'Amazon Athena', +}; + +export const databases: { value: DatabaseKind; content: React.ReactNode }[] = [ + { + value: 'postgres', + content: ( + + ), + }, + { + value: 'citus', + content: , + }, + { + value: 'cockroach', + content: ( + + ), + }, + { + value: 'alloydb', + content: , + }, + { + value: 'mssql', + content: ( + + ), + }, + { + value: 'bigquery', + content: ( + + ), + }, + { + value: 'snowflake', + content: ( + + ), + }, + { + value: 'athena', + content: , + }, +]; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/database-connect.svg b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/database-connect.svg new file mode 100644 index 00000000000..3270ed8bb8d --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/database-connect.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/amazon.svg b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/amazon.svg new file mode 100644 index 00000000000..17bf6086029 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/amazon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/citus.svg b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/citus.svg new file mode 100644 index 00000000000..392d31bf734 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/citus.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/cockroach.svg b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/cockroach.svg new file mode 100644 index 00000000000..4e1b95eda68 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/cockroach.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/google.svg b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/google.svg new file mode 100644 index 00000000000..5ac44180f5d --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/google.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/microsoft.svg b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/microsoft.svg new file mode 100644 index 00000000000..49806988d65 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/microsoft.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/placeholder.svg b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/placeholder.svg new file mode 100644 index 00000000000..1ddb9bc3324 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/placeholder.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/postgres.svg b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/postgres.svg new file mode 100644 index 00000000000..cc822350a3f --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/postgres.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/snowflake.svg b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/snowflake.svg new file mode 100644 index 00000000000..e0b98208118 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/graphics/db-logos/snowflake.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/index.ts b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/index.ts new file mode 100644 index 00000000000..a4292a5b3f1 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/index.ts @@ -0,0 +1 @@ +export { SelectDatabase } from './SelectDatabase'; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/styles.ts b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/styles.ts new file mode 100644 index 00000000000..d258446cef5 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/styles.ts @@ -0,0 +1 @@ +export const twLayoutWidth = `w-[672px]`; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/utils.ts b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/utils.ts new file mode 100644 index 00000000000..6dc99d08663 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/utils.ts @@ -0,0 +1,5 @@ +// returns the correct indefinite article based on the first character of the input string +export const indefiniteArticle = (word: string): string => { + const vowels = ['a', 'e', 'i', 'o', 'u']; + return vowels.includes(word.charAt(0)) ? 'an' : 'a'; +}; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/index.ts b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/index.ts new file mode 100644 index 00000000000..4affd6a0410 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/index.ts @@ -0,0 +1,2 @@ +export { SelectDatabase } from './components/SelectDatabase'; +export type { EEState } from './components/SelectDatabase'; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/types.d.ts b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/types.d.ts new file mode 100644 index 00000000000..3128c638d15 --- /dev/null +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/types.d.ts @@ -0,0 +1,11 @@ +export type DatabaseKind = + | 'postgres' + | 'mssql' + | 'bigquery' + | 'citus' + | 'alloydb' + | 'snowflake' + | 'athena' + | 'cockroach'; + +export type EEState = 'active' | 'inactive' | 'expired'; diff --git a/frontend/libs/console/legacy-ce/src/lib/features/DataSource/gdc/introspection/getTablesListAsTree.tsx b/frontend/libs/console/legacy-ce/src/lib/features/DataSource/gdc/introspection/getTablesListAsTree.tsx index 37da826c967..4697b2249d4 100644 --- a/frontend/libs/console/legacy-ce/src/lib/features/DataSource/gdc/introspection/getTablesListAsTree.tsx +++ b/frontend/libs/console/legacy-ce/src/lib/features/DataSource/gdc/introspection/getTablesListAsTree.tsx @@ -1,3 +1,4 @@ +import { Badge } from '@/new-components/Badge'; import React from 'react'; import { FaDatabase } from 'react-icons/fa'; import { GDCTable } from '..'; @@ -28,9 +29,9 @@ export const getTablesListAsTree = async ({ title: (
{source.name} - + Beta - +
), key: JSON.stringify({ database: source.name }), diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c0487e9ac3b..1daec7762b5 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -20,6 +20,7 @@ "@radix-ui/react-collapsible": "^1.0.0", "@radix-ui/react-dialog": "^1.0.0", "@radix-ui/react-dropdown-menu": "^1.0.0", + "@radix-ui/react-radio-group": "^1.1.1", "@radix-ui/react-switch": "^1.0.0", "@radix-ui/react-tabs": "^1.0.0", "@radix-ui/react-tooltip": "^1.0.0", @@ -12300,6 +12301,65 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-radio-group": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.1.tgz", + "integrity": "sha512-fmg1CuDKt3GAkL3YnHekmdOicyrXlbp/s/D0MrHa+YB2Un+umpJGheiRowlQtxSpb1eeehKNTINgNESi8WK5rA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-roving-focus": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-use-size": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-collection": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.1.tgz", + "integrity": "sha512-uuiFbs+YCKjn3X1DTSx9G7BHApu4GHbi3kgiwsnFUbOKCrwejAJv4eE4Vc8C0Oaxt9T0aV4ox0WCOdx+39Xo+g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-slot": "1.0.1" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-roving-focus": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.2.tgz", + "integrity": "sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-controllable-state": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@radix-ui/react-roving-focus": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.0.tgz", @@ -73121,6 +73181,55 @@ "@radix-ui/react-slot": "1.0.1" } }, + "@radix-ui/react-radio-group": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.1.tgz", + "integrity": "sha512-fmg1CuDKt3GAkL3YnHekmdOicyrXlbp/s/D0MrHa+YB2Un+umpJGheiRowlQtxSpb1eeehKNTINgNESi8WK5rA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-roving-focus": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-use-size": "1.0.0" + }, + "dependencies": { + "@radix-ui/react-collection": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.1.tgz", + "integrity": "sha512-uuiFbs+YCKjn3X1DTSx9G7BHApu4GHbi3kgiwsnFUbOKCrwejAJv4eE4Vc8C0Oaxt9T0aV4ox0WCOdx+39Xo+g==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-slot": "1.0.1" + } + }, + "@radix-ui/react-roving-focus": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.2.tgz", + "integrity": "sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-primitive": "1.0.1", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-controllable-state": "1.0.0" + } + } + } + }, "@radix-ui/react-roving-focus": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.0.tgz", @@ -95198,7 +95307,7 @@ "@emotion/core": "^10.0.22", "@mdx-js/react": "^1.5.2", "codemirror": "5.51.0", - "codemirror-graphql": "0.12.2", + "codemirror-graphql": "^0.12.0-alpha.0", "copy-to-clipboard": "^3.2.0", "entities": "^2.0.0", "markdown-it": "^10.0.0", diff --git a/frontend/package.json b/frontend/package.json index 006d77319bf..1147edeb48f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -55,6 +55,7 @@ "@radix-ui/react-collapsible": "^1.0.0", "@radix-ui/react-dialog": "^1.0.0", "@radix-ui/react-dropdown-menu": "^1.0.0", + "@radix-ui/react-radio-group": "^1.1.1", "@radix-ui/react-switch": "^1.0.0", "@radix-ui/react-tabs": "^1.0.0", "@radix-ui/react-tooltip": "^1.0.0", diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 4c50b0c9e3e..eab80b4366a 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -11,6 +11,9 @@ module.exports = { mono: ['"Overpass Mono"', 'ui-monospace', 'monospace'], }, extend: { + boxShadow: { + eq: 'rgb(0 0 0) 0px 0px 2px', + }, colors: { current: 'currentColor', yellow: colors.amber,