From 5916d6e7499aa0235234d25a9c3130022c283379 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Thu, 18 May 2023 19:07:01 +0530 Subject: [PATCH] fix: bug and ui fix (#1073) * fix: cycle and module sidebar scroll * style: date picker theming * style: workspace slug spacing * fix: app sidebar z-index * fix: favorite cycle mutation * fix: cycle modal on error close * feat: cycle view context * style: active cycle stats scroll * fix: active cycle favorite mutation * feat: import export banner * feat: cycle sidebar date picker logic updated * fix: NaN in progress percentage fix * fix: tooltip fix * style: empty state for active cycle * style: cycle badge width fix , all cycle empty state fix and cycle icon size fix --- .../core/sidebar/single-progress-stats.tsx | 7 +- .../cycles/active-cycle-details.tsx | 63 +++-- .../components/cycles/all-cycles-board.tsx | 2 +- .../app/components/cycles/all-cycles-list.tsx | 2 +- apps/app/components/cycles/cycles-view.tsx | 19 +- apps/app/components/cycles/modal.tsx | 13 +- apps/app/components/cycles/sidebar.tsx | 260 +++++++++++++----- .../components/cycles/single-cycle-card.tsx | 55 ++-- .../components/cycles/single-cycle-list.tsx | 19 ++ apps/app/components/modules/sidebar.tsx | 2 +- apps/app/components/ui/index.ts | 2 + .../integration-and-import-export-banner.tsx | 19 ++ apps/app/components/ui/range-datepicker.tsx | 65 +++++ apps/app/components/ui/tooltip.tsx | 5 - .../workspace/create-workspace-form.tsx | 2 +- apps/app/layouts/app-layout/app-sidebar.tsx | 2 +- .../projects/[projectId]/cycles/index.tsx | 3 - .../[projectId]/settings/integrations.tsx | 24 +- .../settings/import-export.tsx | 4 +- .../[workspaceSlug]/settings/integrations.tsx | 16 +- apps/app/styles/react-datepicker.css | 11 +- 21 files changed, 436 insertions(+), 159 deletions(-) create mode 100644 apps/app/components/ui/integration-and-import-export-banner.tsx create mode 100644 apps/app/components/ui/range-datepicker.tsx diff --git a/apps/app/components/core/sidebar/single-progress-stats.tsx b/apps/app/components/core/sidebar/single-progress-stats.tsx index b2cea68c1..d8236de9b 100644 --- a/apps/app/components/core/sidebar/single-progress-stats.tsx +++ b/apps/app/components/core/sidebar/single-progress-stats.tsx @@ -29,7 +29,12 @@ export const SingleProgressStats: React.FC = ({ - {Math.floor((completed / total) * 100)}% + + {isNaN(Math.floor((completed / total) * 100)) + ? "0" + : Math.floor((completed / total) * 100)} + % + of {total} diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx index 403c10578..7bb357709 100644 --- a/apps/app/components/cycles/active-cycle-details.tsx +++ b/apps/app/components/cycles/active-cycle-details.tsx @@ -51,6 +51,7 @@ import { import { CYCLE_COMPLETE_LIST, CYCLE_CURRENT_AND_UPCOMING_LIST, + CYCLE_DETAILS, CYCLE_DRAFT_LIST, CYCLE_ISSUES, } from "constants/fetch-keys"; @@ -153,6 +154,15 @@ export const ActiveCycleDetails: React.FC = ({ cycle, isComple ); break; } + mutate( + CYCLE_DETAILS(projectId as string), + (prevData: any) => + (prevData ?? []).map((c: any) => ({ + ...c, + is_favorite: c.id === cycle.id ? true : c.is_favorite, + })), + false + ); cyclesService .addCycleToFavorites(workspaceSlug as string, projectId as string, { @@ -213,6 +223,15 @@ export const ActiveCycleDetails: React.FC = ({ cycle, isComple ); break; } + mutate( + CYCLE_DETAILS(projectId as string), + (prevData: any) => + (prevData ?? []).map((c: any) => ({ + ...c, + is_favorite: c.id === cycle.id ? false : c.is_favorite, + })), + false + ); cyclesService .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id) @@ -251,24 +270,26 @@ export const ActiveCycleDetails: React.FC = ({ cycle, isComple
- -
+ +
-
+
Progress @@ -428,7 +449,7 @@ export const ActiveCycleDetails: React.FC = ({ cycle, isComple
-
+
diff --git a/apps/app/components/cycles/all-cycles-board.tsx b/apps/app/components/cycles/all-cycles-board.tsx index 3aad828fd..259251fe6 100644 --- a/apps/app/components/cycles/all-cycles-board.tsx +++ b/apps/app/components/cycles/all-cycles-board.tsx @@ -61,7 +61,7 @@ export const AllCyclesBoard: React.FC = ({
) : type === "current" ? (
-

No current cycle is present.

+

No cycle is present.

) : ( = ({
) : type === "current" ? (
-

No current cycle is present.

+

No cycle is present.

) : ( >; setSelectedCycle: React.Dispatch>; setCreateUpdateCycleModal: React.Dispatch>; cyclesCompleteList: ICycle[] | undefined; @@ -35,8 +34,6 @@ type Props = { }; export const CyclesView: React.FC = ({ - cycleView, - setCycleView, setSelectedCycle, setCreateUpdateCycleModal, cyclesCompleteList, @@ -44,6 +41,7 @@ export const CyclesView: React.FC = ({ draftCycles, }) => { const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "All"); + const { storedValue: cycleView, setValue: setCycleView } = useLocalStorage("cycleView", "list"); const currentTabValue = (tab: string | null) => { switch (tab) { @@ -153,8 +151,15 @@ export const CyclesView: React.FC = ({ )} - {currentAndUpcomingCycles?.current_cycle?.[0] && ( + {currentAndUpcomingCycles?.current_cycle?.[0] ? ( + ) : ( + )} @@ -177,7 +182,7 @@ export const CyclesView: React.FC = ({ diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx index f96c680ca..b3baacd65 100644 --- a/apps/app/components/cycles/modal.tsx +++ b/apps/app/components/cycles/modal.tsx @@ -160,14 +160,10 @@ export const CreateUpdateCycleModal: React.FC = ({ title: "Error!", message: "Unable to create cycle in past date. Please enter a valid date.", }); + handleClose(); return; } - const isDateValid = await dateChecker({ - start_date: payload.start_date, - end_date: payload.end_date, - }); - if (data?.start_date && data?.end_date) { const isDateValidForExistingCycle = await dateChecker({ start_date: payload.start_date, @@ -185,10 +181,16 @@ export const CreateUpdateCycleModal: React.FC = ({ message: "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates", }); + handleClose(); return; } } + const isDateValid = await dateChecker({ + start_date: payload.start_date, + end_date: payload.end_date, + }); + if (isDateValid) { if (data) { await updateCycle(data.id, payload); @@ -202,6 +204,7 @@ export const CreateUpdateCycleModal: React.FC = ({ message: "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates", }); + handleClose(); } } else { if (data) { diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx index 86c8132b0..494383fc4 100644 --- a/apps/app/components/cycles/sidebar.tsx +++ b/apps/app/components/cycles/sidebar.tsx @@ -8,7 +8,6 @@ import useSWR, { mutate } from "swr"; // react-hook-form import { useForm } from "react-hook-form"; import { Disclosure, Popover, Transition } from "@headlessui/react"; -import DatePicker from "react-datepicker"; // icons import { CalendarDaysIcon, @@ -21,7 +20,7 @@ import { LinkIcon, } from "@heroicons/react/24/outline"; // ui -import { CustomMenu, Loader, ProgressBar } from "components/ui"; +import { CustomMenu, CustomRangeDatePicker, Loader, ProgressBar } from "components/ui"; // hooks import useToast from "hooks/use-toast"; // services @@ -34,7 +33,11 @@ import { DeleteCycleModal } from "components/cycles"; import { ExclamationIcon } from "components/icons"; // helpers import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper"; -import { isDateRangeValid, renderDateFormat, renderShortDate } from "helpers/date-time.helper"; +import { + isDateGreaterThanToday, + renderDateFormat, + renderShortDate, +} from "helpers/date-time.helper"; // types import { ICycle, IIssue } from "types"; // fetch-keys @@ -77,7 +80,7 @@ export const CycleDetailsSidebar: React.FC = ({ : null ); - const { reset, watch } = useForm({ + const { setValue, reset, watch } = useForm({ defaultValues, }); @@ -122,6 +125,166 @@ export const CycleDetailsSidebar: React.FC = ({ }); }, [cycle, reset]); + const dateChecker = async (payload: any) => { + try { + const res = await cyclesService.cycleDateCheck( + workspaceSlug as string, + projectId as string, + payload + ); + return res.status; + } catch (err) { + return false; + } + }; + + const handleStartDateChange = async (date: string) => { + setValue("start_date", date); + if ( + watch("start_date") && + watch("end_date") && + watch("start_date") !== "" && + watch("end_date") && + watch("start_date") !== "" + ) { + if (!isDateGreaterThanToday(`${watch("end_date")}`)) { + setToastAlert({ + type: "error", + title: "Error!", + message: "Unable to create cycle in past date. Please enter a valid date.", + }); + return; + } + + if (cycle?.start_date && cycle?.end_date) { + const isDateValidForExistingCycle = await dateChecker({ + start_date: `${watch("start_date")}`, + end_date: `${watch("end_date")}`, + cycle_id: cycle.id, + }); + + if (isDateValidForExistingCycle) { + await submitChanges({ + start_date: renderDateFormat(`${watch("start_date")}`), + end_date: renderDateFormat(`${watch("end_date")}`), + }); + setToastAlert({ + type: "success", + title: "Success!", + message: "Cycle updated successfully.", + }); + return; + } else { + setToastAlert({ + type: "error", + title: "Error!", + message: + "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates", + }); + return; + } + } + + const isDateValid = await dateChecker({ + start_date: `${watch("start_date")}`, + end_date: `${watch("end_date")}`, + }); + + if (isDateValid) { + submitChanges({ + start_date: renderDateFormat(`${watch("start_date")}`), + end_date: renderDateFormat(`${watch("end_date")}`), + }); + setToastAlert({ + type: "success", + title: "Success!", + message: "Cycle updated successfully.", + }); + } else { + setToastAlert({ + type: "error", + title: "Error!", + message: + "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates", + }); + } + } + }; + + const handleEndDateChange = async (date: string) => { + setValue("end_date", date); + + if ( + watch("start_date") && + watch("end_date") && + watch("start_date") !== "" && + watch("end_date") && + watch("start_date") !== "" + ) { + if (!isDateGreaterThanToday(`${watch("end_date")}`)) { + setToastAlert({ + type: "error", + title: "Error!", + message: "Unable to create cycle in past date. Please enter a valid date.", + }); + return; + } + + if (cycle?.start_date && cycle?.end_date) { + const isDateValidForExistingCycle = await dateChecker({ + start_date: `${watch("start_date")}`, + end_date: `${watch("end_date")}`, + cycle_id: cycle.id, + }); + + if (isDateValidForExistingCycle) { + await submitChanges({ + start_date: renderDateFormat(`${watch("start_date")}`), + end_date: renderDateFormat(`${watch("end_date")}`), + }); + setToastAlert({ + type: "success", + title: "Success!", + message: "Cycle updated successfully.", + }); + return; + } else { + setToastAlert({ + type: "error", + title: "Error!", + message: + "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates", + }); + return; + } + } + + const isDateValid = await dateChecker({ + start_date: `${watch("start_date")}`, + end_date: `${watch("end_date")}`, + }); + + if (isDateValid) { + submitChanges({ + start_date: renderDateFormat(`${watch("start_date")}`), + end_date: renderDateFormat(`${watch("end_date")}`), + }); + setToastAlert({ + type: "success", + title: "Success!", + message: "Cycle updated successfully.", + }); + } else { + setToastAlert({ + type: "error", + title: "Error!", + message: + "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates", + }); + } + } + }; + const isStartValid = new Date(`${cycle?.start_date}`) <= new Date(); const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`); @@ -135,7 +298,7 @@ export const CycleDetailsSidebar: React.FC = ({
{cycle ? ( <> @@ -158,7 +321,12 @@ export const CycleDetailsSidebar: React.FC = ({ > - {renderShortDate(new Date(`${cycle?.start_date}`), "Start date")} + {renderShortDate( + new Date( + `${watch("start_date") ? watch("start_date") : cycle?.start_date}` + ), + "Start date" + )} @@ -172,36 +340,17 @@ export const CycleDetailsSidebar: React.FC = ({ leaveTo="opacity-0 translate-y-1" > - { - if (date && watch("end_date")) { - if ( - isDateRangeValid(renderDateFormat(date), `${watch("end_date")}`) - ) { - submitChanges({ - start_date: renderDateFormat(date), - }); - } else { - setToastAlert({ - type: "error", - title: "Error!", - message: - "The date you have entered is invalid. Please check and enter a valid date.", - }); - } + { + if (val) { + handleStartDateChange(val); } }} - selectsStart - startDate={new Date(`${watch("start_date")}`)} - endDate={new Date(`${watch("end_date")}`)} + startDate={watch("start_date") ? `${watch("start_date")}` : null} + endDate={watch("end_date") ? `${watch("end_date")}` : null} maxDate={new Date(`${watch("end_date")}`)} - shouldCloseOnSelect - inline + selectsStart /> @@ -222,7 +371,14 @@ export const CycleDetailsSidebar: React.FC = ({ > - {renderShortDate(new Date(`${cycle?.end_date}`), "End date")} + + {renderShortDate( + new Date( + `${watch("end_date") ? watch("end_date") : cycle?.end_date}` + ), + "End date" + )} + = ({ leaveTo="opacity-0 translate-y-1" > - { - if (watch("start_date") && date) { - if ( - isDateRangeValid( - `${watch("start_date")}`, - renderDateFormat(date) - ) - ) { - submitChanges({ - end_date: renderDateFormat(date), - }); - } else { - setToastAlert({ - type: "error", - title: "Error!", - message: - "The date you have entered is invalid. Please check and enter a valid date.", - }); - } + { + if (val) { + handleEndDateChange(val); } }} - selectsEnd - startDate={new Date(`${watch("start_date")}`)} - endDate={new Date(`${watch("end_date")}`)} + startDate={watch("start_date") ? `${watch("start_date")}` : null} + endDate={watch("end_date") ? `${watch("end_date")}` : null} minDate={new Date(`${watch("start_date")}`)} - shouldCloseOnSelect - inline + selectsEnd /> diff --git a/apps/app/components/cycles/single-cycle-card.tsx b/apps/app/components/cycles/single-cycle-card.tsx index 8021ebdfe..a5f6e8110 100644 --- a/apps/app/components/cycles/single-cycle-card.tsx +++ b/apps/app/components/cycles/single-cycle-card.tsx @@ -51,6 +51,7 @@ import { import { CYCLE_COMPLETE_LIST, CYCLE_CURRENT_AND_UPCOMING_LIST, + CYCLE_DETAILS, CYCLE_DRAFT_LIST, } from "constants/fetch-keys"; @@ -150,6 +151,15 @@ export const SingleCycleCard: React.FC = ({ ); break; } + mutate( + CYCLE_DETAILS(projectId as string), + (prevData: any) => + (prevData ?? []).map((c: any) => ({ + ...c, + is_favorite: c.id === cycle.id ? true : c.is_favorite, + })), + false + ); cyclesService .addCycleToFavorites(workspaceSlug as string, projectId as string, { @@ -210,6 +220,15 @@ export const SingleCycleCard: React.FC = ({ ); break; } + mutate( + CYCLE_DETAILS(projectId as string), + (prevData: any) => + (prevData ?? []).map((c: any) => ({ + ...c, + is_favorite: c.id === cycle.id ? false : c.is_favorite, + })), + false + ); cyclesService .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id) @@ -263,20 +282,22 @@ export const SingleCycleCard: React.FC = ({
- + + +

{truncateText(cycle.name, 15)} @@ -299,17 +320,17 @@ export const SingleCycleCard: React.FC = ({ }`} > {cycleStatus === "current" ? ( - + {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left ) : cycleStatus === "upcoming" ? ( - + {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left ) : cycleStatus === "completed" ? ( - + {cycle.total_issues - cycle.completed_issues > 0 && ( = ({ ); break; } + mutate( + CYCLE_DETAILS(projectId as string), + (prevData: any) => + (prevData ?? []).map((c: any) => ({ + ...c, + is_favorite: c.id === cycle.id ? true : c.is_favorite, + })), + false + ); cyclesService .addCycleToFavorites(workspaceSlug as string, projectId as string, { @@ -244,6 +254,15 @@ export const SingleCycleList: React.FC = ({ ); break; } + mutate( + CYCLE_DETAILS(projectId as string), + (prevData: any) => + (prevData ?? []).map((c: any) => ({ + ...c, + is_favorite: c.id === cycle.id ? false : c.is_favorite, + })), + false + ); cyclesService .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id) diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx index 502675bef..c1b4674b7 100644 --- a/apps/app/components/modules/sidebar.tsx +++ b/apps/app/components/modules/sidebar.tsx @@ -185,7 +185,7 @@ export const ModuleDetailsSidebar: React.FC = ({ issues, module, isOpen,
{module ? ( <> diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts index 4557badd4..476f0af3e 100644 --- a/apps/app/components/ui/index.ts +++ b/apps/app/components/ui/index.ts @@ -23,3 +23,5 @@ export * from "./tooltip"; export * from "./toggle-switch"; export * from "./markdown-to-component"; export * from "./product-updates-modal"; +export * from "./integration-and-import-export-banner"; +export * from "./range-datepicker"; diff --git a/apps/app/components/ui/integration-and-import-export-banner.tsx b/apps/app/components/ui/integration-and-import-export-banner.tsx new file mode 100644 index 000000000..19bbc353d --- /dev/null +++ b/apps/app/components/ui/integration-and-import-export-banner.tsx @@ -0,0 +1,19 @@ +import { ExclamationIcon } from "components/icons"; + +type Props = { + bannerName: string; +}; + +export const IntegrationAndImportExportBanner: React.FC = ({ bannerName }) => ( +
+

{bannerName}

+
+ +

+ Integrations and importers are only available on the cloud version. We plan to open-source + our SDKs in the near future so that the community can request or contribute integrations as + needed. +

+
+
+); diff --git a/apps/app/components/ui/range-datepicker.tsx b/apps/app/components/ui/range-datepicker.tsx new file mode 100644 index 000000000..0dfda41ec --- /dev/null +++ b/apps/app/components/ui/range-datepicker.tsx @@ -0,0 +1,65 @@ +// react-datepicker +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; +// helpers +import { renderDateFormat } from "helpers/date-time.helper"; + +type Props = { + renderAs?: "input" | "button"; + value: Date | string | null | undefined; + onChange: (val: string | null) => void; + error?: boolean; + className?: string; + isClearable?: boolean; + disabled?: boolean; + startDate: string | null; + endDate: string | null; + selectsStart?: boolean; + selectsEnd?: boolean; + minDate?: Date | null | undefined; + maxDate?: Date | null | undefined; +}; + +export const CustomRangeDatePicker: React.FC = ({ + renderAs = "button", + value, + onChange, + error = false, + className = "", + disabled = false, + startDate, + endDate, + selectsStart = false, + selectsEnd = false, + minDate = null, + maxDate = null, +}) => ( + { + if (!val) onChange(null); + else onChange(renderDateFormat(val)); + }} + className={`${ + renderAs === "input" + ? "block px-3 py-2 text-sm focus:outline-none" + : renderAs === "button" + ? `px-3 py-1 text-xs shadow-sm ${ + disabled ? "" : "hover:bg-brand-surface-2" + } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent` + : "" + } ${error ? "border-red-500 bg-red-100" : ""} ${ + disabled ? "cursor-not-allowed" : "cursor-pointer" + } w-full rounded-md border border-brand-base bg-transparent caret-transparent ${className}`} + dateFormat="dd-MM-yyyy" + disabled={disabled} + selectsStart={selectsStart} + selectsEnd={selectsEnd} + startDate={startDate ? new Date(startDate) : new Date()} + endDate={endDate ? new Date(endDate) : new Date()} + minDate={minDate} + maxDate={maxDate} + shouldCloseOnSelect + inline + /> +); diff --git a/apps/app/components/ui/tooltip.tsx b/apps/app/components/ui/tooltip.tsx index 76f4b9762..11504facd 100644 --- a/apps/app/components/ui/tooltip.tsx +++ b/apps/app/components/ui/tooltip.tsx @@ -46,11 +46,6 @@ export const Tooltip: React.FC = ({ theme === "light" ? "text-brand-muted-1 bg-brand-surface-2" : "bg-black text-white" }`} > -
{tooltipHeading &&
{tooltipHeading}
} {tooltipContent}
diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx index 620e06c7d..0b2b7d984 100644 --- a/apps/app/components/workspace/create-workspace-form.tsx +++ b/apps/app/components/workspace/create-workspace-form.tsx @@ -137,7 +137,7 @@ export const CreateWorkspaceForm: React.FC = ({ autoComplete="off" name="slug" register={register} - className="block w-full rounded-md bg-transparent py-2 px-0 text-sm" + className="block w-full rounded-md bg-transparent py-2 !px-0 text-sm" validations={{ required: "Workspace URL is required", }} diff --git a/apps/app/layouts/app-layout/app-sidebar.tsx b/apps/app/layouts/app-layout/app-sidebar.tsx index a24c4e2d0..ccdc29ad3 100644 --- a/apps/app/layouts/app-layout/app-sidebar.tsx +++ b/apps/app/layouts/app-layout/app-sidebar.tsx @@ -19,7 +19,7 @@ const Sidebar: React.FC = ({ toggleSidebar, setToggleSidebar }) => return (
{ const [selectedCycle, setSelectedCycle] = useState(); const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false); - const [cycleView, setCycleView] = useState("list"); const router = useRouter(); const { workspaceSlug, projectId } = router.query; @@ -121,8 +120,6 @@ const ProjectCycles: NextPage = () => {

Cycles

{ {workspaceIntegrations ? ( workspaceIntegrations.length > 0 ? (
-
-

Integrations

-
- -

- Integrations and importers are only available on the cloud version. We plan to - open-source our SDKs in the near future so that the community can request or - contribute integrations as needed. -

-
-
+
{workspaceIntegrations.map((integration) => ( { const router = useRouter(); @@ -23,8 +24,9 @@ const ImportExport: NextPage = () => { } > -
+
+
diff --git a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx index 1aa5f19af..b94057bea 100644 --- a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx +++ b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx @@ -13,10 +13,8 @@ import { SettingsHeader } from "components/workspace"; // components import { SingleIntegrationCard } from "components/integration"; // ui -import { Loader } from "components/ui"; +import { IntegrationAndImportExportBanner, Loader } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; -// icons -import { ExclamationIcon } from "components/icons"; // types import type { NextPage } from "next"; // fetch-keys @@ -50,17 +48,7 @@ const WorkspaceIntegrations: NextPage = () => {
-
-

Integrations

-
- -

- Integrations and importers are only available on the cloud version. We plan to - open-source our SDKs in the near future so that the community can request or - contribute integrations as needed. -

-
-
+
{appIntegrations ? ( appIntegrations.map((integration) => ( diff --git a/apps/app/styles/react-datepicker.css b/apps/app/styles/react-datepicker.css index ed866f36d..ecf5bb9fb 100644 --- a/apps/app/styles/react-datepicker.css +++ b/apps/app/styles/react-datepicker.css @@ -117,6 +117,15 @@ color: white !important; } -.react-datepicker__day--in-range { +.react-datepicker__day--in-range-start, +.react-datepicker__day--in-range-end { + background-color: rgba(var(--color-bg-accent)) !important; + color: white !important; +} + +.react-datepicker__day--in-range:not(.react-datepicker__day--in-range-start):not( + .react-datepicker__day--in-range-end + ) { + background-color: rgba(var(--color-accent)) !important; color: white !important; }