diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b0317ff7c..ae2d22998 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -27,6 +27,7 @@ "@radix-ui/react-progress": "^1.0.1", "@radix-ui/react-select": "^1.2.0", "@radix-ui/react-switch": "^1.0.1", + "@radix-ui/react-tabs": "^1.0.2", "@radix-ui/react-toast": "^1.1.2", "@reduxjs/toolkit": "^1.8.3", "@stripe/react-stripe-js": "^1.10.0", @@ -4271,6 +4272,26 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-tabs": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.2.tgz", + "integrity": "sha512-gOUwh+HbjCuL0UCo8kZ+kdUEG8QtpdO4sMQduJ34ZEz0r4922g9REOBM+vIsfwtGxSug4Yb1msJMJYN2Bk8TpQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "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-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" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@radix-ui/react-toast": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.2.tgz", @@ -25552,6 +25573,22 @@ "@radix-ui/react-use-size": "1.0.0" } }, + "@radix-ui/react-tabs": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.2.tgz", + "integrity": "sha512-gOUwh+HbjCuL0UCo8kZ+kdUEG8QtpdO4sMQduJ34ZEz0r4922g9REOBM+vIsfwtGxSug4Yb1msJMJYN2Bk8TpQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "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-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-toast": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 4e2e3e585..28f45a5d6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -34,6 +34,7 @@ "@radix-ui/react-progress": "^1.0.1", "@radix-ui/react-select": "^1.2.0", "@radix-ui/react-switch": "^1.0.1", + "@radix-ui/react-tabs": "^1.0.2", "@radix-ui/react-toast": "^1.1.2", "@reduxjs/toolkit": "^1.8.3", "@stripe/react-stripe-js": "^1.10.0", diff --git a/frontend/public/images/dragon-book.svg b/frontend/public/images/dragon-book.svg new file mode 100644 index 000000000..31f51eb8d --- /dev/null +++ b/frontend/public/images/dragon-book.svg @@ -0,0 +1,235 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/components/basic/dialog/AddUserDialog.tsx b/frontend/src/components/basic/dialog/AddUserDialog.tsx index 100ed3025..68ce24696 100644 --- a/frontend/src/components/basic/dialog/AddUserDialog.tsx +++ b/frontend/src/components/basic/dialog/AddUserDialog.tsx @@ -1,7 +1,5 @@ import { Fragment } from 'react'; -import { useRouter } from 'next/router'; import { Dialog, Transition } from '@headlessui/react'; -import { plans } from 'public/data/frequentConstants'; import Button from '../buttons/Button'; import InputField from '../InputField'; @@ -12,7 +10,6 @@ type Props = { submitModal: (email: string) => void; email: string; setEmail: (email: string) => void; - currentPlan: string; orgName: string; }; @@ -22,13 +19,11 @@ const AddUserDialog = ({ submitModal, email, setEmail, - currentPlan, orgName, }: Props) => { const submit = () => { submitModal(email); }; - const router = useRouter(); return (
@@ -81,28 +76,6 @@ const AddUserDialog = ({ isRequired />
- {currentPlan === plans.starter && ( -
- - -
- )}
+
+ +} + +export const TabsObject = () => { + const [downloadCodeCopied, setDownloadCodeCopied] = useState(false); + const [downloadCode2Copied, setDownloadCode2Copied] = useState(false); + const [loginCodeCopied, setLoginCodeCopied] = useState(false); + const [initCodeCopied, setInitCodeCopied] = useState(false); + const [runCodeCopied, setRunCodeCopied] = useState(false); + + return + + + MacOS + + + Windows + + + Arch Linux + + + Other Platforms + + + + + + + +

You can find example of start commands for different frameworks + here + .

+ + + +
+ + +
+ + + +

You can find example of start commands for different frameworks + here + .

+ + + + + + +

You can find example of start commands for different frameworks + here + .

+ + +}; \ No newline at end of file diff --git a/frontend/src/components/v2/Tabs/index.tsx b/frontend/src/components/v2/Tabs/index.tsx new file mode 100644 index 000000000..57f78a430 --- /dev/null +++ b/frontend/src/components/v2/Tabs/index.tsx @@ -0,0 +1,4 @@ +export type { + TabsProps +} from './Tabs'; +export { TabsObject } from './Tabs'; diff --git a/frontend/src/pages/home/[id].tsx b/frontend/src/pages/home/[id].tsx index 44427084e..84862f91d 100644 --- a/frontend/src/pages/home/[id].tsx +++ b/frontend/src/pages/home/[id].tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react'; import Head from 'next/head'; +import Image from 'next/image'; import { useRouter } from 'next/router'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { faSlack } from '@fortawesome/free-brands-svg-icons'; @@ -16,6 +17,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import onboardingCheck from '@app/components/utilities/checks/OnboardingCheck'; import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps'; +import { TabsObject } from '@app/components/v2/Tabs'; import registerUserAction from '../api/userActions/registerUserAction'; @@ -43,7 +45,7 @@ const learningItem = ({
{complete && ( -
- +
+
)}
@@ -72,11 +74,11 @@ const learningItem = ({
{complete ? 'Complete!' : `About ${time}`}
- {complete &&
} + {complete &&
}
); @@ -101,7 +103,7 @@ const learningItem = ({
)} @@ -110,10 +112,10 @@ const learningItem = ({
{subText}
-
+
{complete ? 'Complete!' : `About ${time}`}
- {complete &&
} + {complete &&
}
); }; @@ -142,16 +144,17 @@ export default function Home() { }, []); return ( -
+
Infisical Guide -
-
Your quick start guide
-
+
+
Your quick start guide
+
Click on the items below and follow the instructions.
+
start guise dragon illustration
{learningItem({ text: 'Get to know Infisical', subText: '', @@ -170,14 +173,29 @@ export default function Home() { userAction: 'first_time_secrets_pushed', link: `/dashboard/${router.query.id}` })} - {learningItem({ - text: 'Inject secrets locally', - subText: 'Replace .env files with a more secure and efficient alternative.', - complete: false, - icon: faNetworkWired, - time: '8 min', - link: 'https://infisical.com/docs/getting-started/quickstart' - })} +
+
+
+ + {false && ( +
+ +
+ )} +
+
Inject secrets locally
+
Replace .env files with a more secure and efficient alternative.
+
+
+
+ About 2 min +
+
+ + {false &&
} +
{learningItem({ text: 'Integrate Infisical with your infrastructure', subText: 'Only a few integrations are currently available. Many more coming soon!', diff --git a/frontend/src/pages/requestnewinvite.tsx b/frontend/src/pages/requestnewinvite.tsx index be345d7e7..40f4b0c27 100644 --- a/frontend/src/pages/requestnewinvite.tsx +++ b/frontend/src/pages/requestnewinvite.tsx @@ -20,7 +20,7 @@ export default function RequestNewInvite() { doesn't work, please reach out to us at support@infisical.com

- google logo + invitation expired illustration
diff --git a/frontend/src/pages/settings/org/[id].tsx b/frontend/src/pages/settings/org/[id].tsx index e0d970c91..562c45c9b 100644 --- a/frontend/src/pages/settings/org/[id].tsx +++ b/frontend/src/pages/settings/org/[id].tsx @@ -222,7 +222,6 @@ export default function SettingsOrg() { submitModal={submitAddUserModal} email={emailUser} setEmail={setEmailUser} - currentPlan={currentPlan} orgName={orgName} />