awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 22:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1302 from akhilmhdh/feat/banner

Browse Source 
feat: added main banner for migration
This commit is contained in:
Maidul Islam
2024-01-12 10:48:21 -05:00
committed by GitHub
parent cfa0a2044e e6068826f8
commit 0c94f77a6d
2 changed files with 51 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/Alert/Alert.tsx
+4 -1
View File
@@ -58,7 +58,10 @@ const Alert = forwardRef<
{typeof icon !== "undefined" ? ( {typeof icon !== "undefined" ? (
<>{icon} </> <>{icon} </>
) : ( ) : (
<FontAwesomeIcon className="text-lg" icon={variantIconMap[variant ?? "default"]} /> <FontAwesomeIcon
className="text-lg text-primary"
icon={variantIconMap[variant ?? "default"]}
/>
)} )}
</div> </div>
<div className="flex flex-col gap-y-1"> <div className="flex flex-col gap-y-1">
frontend/src/pages/org/[id]/overview/index.tsx
+46 -21
View File
@@ -23,7 +23,9 @@ import {
faNetworkWired, faNetworkWired,
faPlug, faPlug,
faPlus, faPlus,
faUserPlus faUserPlus,
faWarning,
faXmark
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { yupResolver } from "@hookform/resolvers/yup"; import { yupResolver } from "@hookform/resolvers/yup";
@@ -56,6 +58,7 @@ import {
fetchOrgUsers, fetchOrgUsers,
useAddUserToWs, useAddUserToWs,
useCreateWorkspace, useCreateWorkspace,
useGetUserAction,
useRegisterUserAction, useRegisterUserAction,
useUploadWsKey useUploadWsKey
} from "@app/hooks/api"; } from "@app/hooks/api";
@@ -75,8 +78,7 @@ const features = [
_id: 1, _id: 1,
name: "Infisical Agent", name: "Infisical Agent",
link: "https://infisical.com/docs/infisical-agent/overview", link: "https://infisical.com/docs/infisical-agent/overview",
description: description: "Inject secrets into your apps without modifying any application logic."
"Inject secrets into your apps without modifying any application logic."
} }
]; ];
@@ -122,13 +124,13 @@ const CodeItem = ({
}) => { }) => {
return ( return (
<> <>
<p className="mb-2 mt-4 text-bunker-300 text-sm leading-normal">{textExplanation}</p> <p className="mb-2 mt-4 text-sm leading-normal text-bunker-300">{textExplanation}</p>
<div className="font-mono text-sm px-3 py-2 bg-bunker rounded-md border border-mineshaft-600 flex flex-row items-center justify-between"> <div className="flex flex-row items-center justify-between rounded-md border border-mineshaft-600 bg-bunker px-3 py-2 font-mono text-sm">
<input disabled value={code} id={id} className="w-full bg-transparent text-bunker-200" /> <input disabled value={code} id={id} className="w-full bg-transparent text-bunker-200" />
<button <button
type="button" type="button"
onClick={() => copyToClipboard(id, setIsCopied)} onClick={() => copyToClipboard(id, setIsCopied)}
className="h-full pl-3.5 pr-2 text-bunker-300 hover:text-primary-200 duration-200" className="h-full pl-3.5 pr-2 text-bunker-300 duration-200 hover:text-primary-200"
> >
{isCopied ? ( {isCopied ? (
<FontAwesomeIcon icon={faCheck} className="pr-0.5" /> <FontAwesomeIcon icon={faCheck} className="pr-0.5" />
@@ -150,21 +152,21 @@ const TabsObject = () => {
return ( return (
<Tabs.Root <Tabs.Root
className="flex flex-col w-full cursor-default border border-mineshaft-600 rounded-md" className="flex w-full cursor-default flex-col rounded-md border border-mineshaft-600"
defaultValue="tab1" defaultValue="tab1"
> >
<Tabs.List <Tabs.List
className="shrink-0 flex border-b border-mineshaft-600" className="flex shrink-0 border-b border-mineshaft-600"
aria-label="Manage your account" aria-label="Manage your account"
> >
<Tabs.Trigger <Tabs.Trigger
className="bg-bunker-700 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default" className="flex h-10 flex-1 cursor-default select-none items-center justify-center bg-bunker-700 px-5 text-sm leading-none text-bunker-300 outline-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:font-medium data-[state=active]:text-primary data-[state=active]:focus:relative"
value="tab1" value="tab1"
> >
MacOS MacOS
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger <Tabs.Trigger
className="bg-bunker-700 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default" className="flex h-10 flex-1 cursor-default select-none items-center justify-center bg-bunker-700 px-5 text-sm leading-none text-bunker-300 outline-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:font-medium data-[state=active]:text-primary data-[state=active]:focus:relative"
value="tab2" value="tab2"
> >
Windows Windows
@@ -178,14 +180,14 @@ const TabsObject = () => {
<a <a
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="bg-bunker-700 hover:text-bunker-100 duration-200 px-5 h-10 flex-1 flex items-center justify-center text-sm leading-none text-bunker-300 select-none first:rounded-tl-md last:rounded-tr-md data-[state=active]:text-primary data-[state=active]:font-medium data-[state=active]:focus:relative data-[state=active]:border-b data-[state=active]:border-primary outline-none cursor-default" className="flex h-10 flex-1 cursor-default select-none items-center justify-center bg-bunker-700 px-5 text-sm leading-none text-bunker-300 outline-none duration-200 first:rounded-tl-md last:rounded-tr-md hover:text-bunker-100 data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:font-medium data-[state=active]:text-primary data-[state=active]:focus:relative"
href="https://infisical.com/docs/cli/overview" href="https://infisical.com/docs/cli/overview"
> >
Other Platforms <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-2" /> Other Platforms <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ml-2" />
</a> </a>
</Tabs.List> </Tabs.List>
<Tabs.Content <Tabs.Content
className="grow p-5 pt-0 bg-bunker-700 rounded-b-md outline-none cursor-default" className="grow cursor-default rounded-b-md bg-bunker-700 p-5 pt-0 outline-none"
value="tab1" value="tab1"
> >
<CodeItem <CodeItem
@@ -216,7 +218,7 @@ const TabsObject = () => {
code="infisical run -- [YOUR USUAL CODE START SCRIPT GOES HERE]" code="infisical run -- [YOUR USUAL CODE START SCRIPT GOES HERE]"
id="runCode" id="runCode"
/> />
<p className="text-bunker-300 text-sm mt-2"> <p className="mt-2 text-sm text-bunker-300">
You can find example of start commands for different frameworks{" "} You can find example of start commands for different frameworks{" "}
<a <a
className="text-primary underline underline-offset-2" className="text-primary underline underline-offset-2"
@@ -229,7 +231,7 @@ const TabsObject = () => {
.{" "} .{" "}
</p> </p>
</Tabs.Content> </Tabs.Content>
<Tabs.Content className="grow p-5 pt-0 bg-bunker-700 rounded-b-md outline-none" value="tab2"> <Tabs.Content className="grow rounded-b-md bg-bunker-700 p-5 pt-0 outline-none" value="tab2">
<CodeItem <CodeItem
isCopied={downloadCodeCopied} isCopied={downloadCodeCopied}
setIsCopied={setDownloadCodeCopied} setIsCopied={setDownloadCodeCopied}
@@ -237,7 +239,7 @@ const TabsObject = () => {
code="scoop bucket add org https://github.com/Infisical/scoop-infisical.git" code="scoop bucket add org https://github.com/Infisical/scoop-infisical.git"
id="downloadCodeW" id="downloadCodeW"
/> />
<div className="font-mono text-sm px-3 py-2 mt-2 bg-bunker rounded-md border border-mineshaft-600 flex flex-row items-center justify-between"> <div className="mt-2 flex flex-row items-center justify-between rounded-md border border-mineshaft-600 bg-bunker px-3 py-2 font-mono text-sm">
<input <input
disabled disabled
value="scoop install infisical" value="scoop install infisical"
@@ -247,7 +249,7 @@ const TabsObject = () => {
<button <button
type="button" type="button"
onClick={() => copyToClipboard("downloadCodeW2", setDownloadCode2Copied)} onClick={() => copyToClipboard("downloadCodeW2", setDownloadCode2Copied)}
className="h-full pl-3.5 pr-2 text-bunker-300 hover:text-primary-200 duration-200" className="h-full pl-3.5 pr-2 text-bunker-300 duration-200 hover:text-primary-200"
> >
{downloadCode2Copied ? ( {downloadCode2Copied ? (
<FontAwesomeIcon icon={faCheck} className="pr-0.5" /> <FontAwesomeIcon icon={faCheck} className="pr-0.5" />
@@ -277,7 +279,7 @@ const TabsObject = () => {
code="infisical run -- [YOUR USUAL CODE START SCRIPT GOES HERE]" code="infisical run -- [YOUR USUAL CODE START SCRIPT GOES HERE]"
id="runCodeW" id="runCodeW"
/> />
<p className="text-bunker-300 text-sm mt-2"> <p className="mt-2 text-sm text-bunker-300">
You can find example of start commands for different frameworks{" "} You can find example of start commands for different frameworks{" "}
<a <a
className="text-primary underline underline-offset-2" className="text-primary underline underline-offset-2"
@@ -481,6 +483,13 @@ const OrganizationPage = withPermission(
const { createNotification } = useNotificationContext(); const { createNotification } = useNotificationContext();
const addWsUser = useAddUserToWs(); const addWsUser = useAddUserToWs();
const { data: updateClosed } = useGetUserAction("jan_2023_db_update_closed");
const registerUserAction = useRegisterUserAction();
const closeUpdate = async () => {
await registerUserAction.mutateAsync("jan_2023_db_update_closed");
};
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([ const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"addNewWs", "addNewWs",
"upgradePlan" "upgradePlan"
@@ -586,10 +595,10 @@ const OrganizationPage = withPermission(
{!serverDetails?.redisConfigured && ( {!serverDetails?.redisConfigured && (
<div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl"> <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl">
<p className="mr-4 mb-4 font-semibold text-white">Announcements</p> <p className="mr-4 mb-4 font-semibold text-white">Announcements</p>
<div className="w-full border border-blue-400/70 rounded-md bg-blue-900/70 p-2 text-base text-mineshaft-100 flex items-center"> <div className="flex w-full items-center rounded-md border border-blue-400/70 bg-blue-900/70 p-2 text-base text-mineshaft-100">
<FontAwesomeIcon <FontAwesomeIcon
icon={faExclamationCircle} icon={faExclamationCircle}
className="text-2xl mr-4 p-4 text-mineshaft-50" className="mr-4 p-4 text-2xl text-mineshaft-50"
/> />
Attention: Updated versions of Infisical now require Redis for full functionality. Attention: Updated versions of Infisical now require Redis for full functionality.
Learn how to configure it Learn how to configure it
@@ -597,7 +606,7 @@ const OrganizationPage = withPermission(
href="https://infisical.com/docs/self-hosting/configuration/redis" href="https://infisical.com/docs/self-hosting/configuration/redis"
target="_blank" target="_blank"
> >
<span className="pl-1 text-white underline underline-offset-2 hover:decoration-blue-400 hover:text-blue-200 duration-100 cursor-pointer"> <span className="cursor-pointer pl-1 text-white underline underline-offset-2 duration-100 hover:text-blue-200 hover:decoration-blue-400">
here here
</span> </span>
</Link> </Link>
@@ -606,6 +615,22 @@ const OrganizationPage = withPermission(
</div> </div>
)} )}
<div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl"> <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl">
<div className={`${
!updateClosed ? "block" : "hidden"
} mb-4 w-full border rounded-md p-2 text-base border-primary-600 bg-primary/10 text-white flex flex-row items-center`}>
<FontAwesomeIcon icon={faWarning} className="text-primary text-4xl p-6"/>
<div className="text-sm">
<span className="text-lg font-semibold">Scheduled maintenance on January 20th</span> <br />
We&apos;ve planned a database upgrade and need to pause certain functionality for approximately 6 hours on Saturday, January 20th, 10am EST. Read operations will continue to function as normal but nothing will be editable. As a user you don&apos;t have to perform any action – your applications will not be affected.<br />
</div>
<button
type="button"
onClick={() => closeUpdate()}
className="text-mineshaft-100 duration-200 hover:text-red-400 h-full flex items-start"
>
<FontAwesomeIcon icon={faXmark} />
</button>
</div>
<p className="mr-4 font-semibold text-white">Projects</p> <p className="mr-4 font-semibold text-white">Projects</p>
<div className="mt-6 flex w-full flex-row"> <div className="mt-6 flex w-full flex-row">
<Input <Input
@@ -701,7 +726,7 @@ const OrganizationPage = withPermission(
</div> </div>
<div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-6 text-3xl"> <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-6 text-3xl">
<p className="mr-4 font-semibold text-white">Explore Infisical</p> <p className="mr-4 font-semibold text-white">Explore Infisical</p>
<div className="mt-4 grid grid-cols-3 w-full gap-4"> <div className="mt-4 grid w-full grid-cols-3 gap-4">
{features.map((feature) => ( {features.map((feature) => (
<div <div
key={feature._id} key={feature._id}