thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: error state for the issues widgets (#3934)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-03-11 21:12:28 +05:30 committed by GitHub
parent 8c9d328c24
commit e3ac075ee2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 256 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
web/components/dashboard/widgets/assigned-issues.tsx
View File

@ -7,6 +7,7 @@ import { useDashboard } from "hooks/store";
// components
import {
DurationFilterDropdown,
IssuesErrorState,
TabsList,
WidgetIssuesList,
WidgetLoader,
@ -26,10 +27,12 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
// states
const [fetching, setFetching] = useState(false);
// store hooks
const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard();
const { fetchWidgetStats, getWidgetDetails, getWidgetStats, getWidgetStatsError, updateDashboardWidgetFilters } =
useDashboard();
// derived values
const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
const widgetStats = getWidgetStats<TAssignedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
const widgetStatsError = getWidgetStatsError(workspaceSlug, dashboardId, WIDGET_KEY);
const selectedDurationFilter = widgetDetails?.widget_filters.duration ?? EDurationFilters.NONE;
const selectedTab = getTabKey(selectedDurationFilter, widgetDetails?.widget_filters.tab);
const selectedCustomDates = widgetDetails?.widget_filters.custom_dates ?? [];
@ -73,74 +76,91 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
const selectedTabIndex = tabsList.findIndex((tab) => tab.key === selectedTab);
if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
if ((!widgetDetails || !widgetStats) && !widgetStatsError) return <WidgetLoader widgetKey={WIDGET_KEY} />;
return (
<div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
<div className="flex items-center justify-between gap-2 p-6 pl-7">
<Link
href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Assigned to you
</Link>
<DurationFilterDropdown
customDates={selectedCustomDates}
value={selectedDurationFilter}
onChange={(val, customDates) => {
if (val === "custom" && customDates) {
handleUpdateFilters({
duration: val,
custom_dates: customDates,
});
return;
}
if (val === selectedDurationFilter) return;
let newTab = selectedTab;
// switch to pending tab if target date is changed to none
if (val === "none" && selectedTab !== "completed") newTab = "pending";
// switch to upcoming tab if target date is changed to other than none
if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") newTab = "upcoming";
{widgetStatsError ? (
<IssuesErrorState
isRefreshing={fetching}
onClick={() =>
handleUpdateFilters({
duration: val,
tab: newTab,
});
}}
duration: EDurationFilters.NONE,
tab: "pending",
})
}
/>
</div>
<Tab.Group
as="div"
selectedIndex={selectedTabIndex}
onChange={(i) => {
const newSelectedTab = tabsList[i];
handleUpdateFilters({ tab: newSelectedTab?.key ?? "completed" });
}}
className="h-full flex flex-col"
>
<div className="px-6">
<TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
</div>
<Tab.Panels as="div" className="h-full">
{tabsList.map((tab) => {
if (tab.key !== selectedTab) return null;
) : (
widgetStats && (
<>
<div className="flex items-center justify-between gap-2 p-6 pl-7">
<Link
href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Assigned to you
</Link>
<DurationFilterDropdown
customDates={selectedCustomDates}
value={selectedDurationFilter}
onChange={(val, customDates) => {
if (val === "custom" && customDates) {
handleUpdateFilters({
duration: val,
custom_dates: customDates,
});
return;
}
return (
<Tab.Panel key={tab.key} as="div" className="h-full flex flex-col" static>
<WidgetIssuesList
tab={tab.key}
type="assigned"
workspaceSlug={workspaceSlug}
widgetStats={widgetStats}
isLoading={fetching}
/>
</Tab.Panel>
);
})}
</Tab.Panels>
</Tab.Group>
if (val === selectedDurationFilter) return;
let newTab = selectedTab;
// switch to pending tab if target date is changed to none
if (val === "none" && selectedTab !== "completed") newTab = "pending";
// switch to upcoming tab if target date is changed to other than none
if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed")
newTab = "upcoming";
handleUpdateFilters({
duration: val,
tab: newTab,
});
}}
/>
</div>
<Tab.Group
as="div"
selectedIndex={selectedTabIndex}
onChange={(i) => {
const newSelectedTab = tabsList[i];
handleUpdateFilters({ tab: newSelectedTab?.key ?? "completed" });
}}
className="h-full flex flex-col"
>
<div className="px-6">
<TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
</div>
<Tab.Panels as="div" className="h-full">
{tabsList.map((tab) => {
if (tab.key !== selectedTab) return null;
return (
<Tab.Panel key={tab.key} as="div" className="h-full flex flex-col" static>
<WidgetIssuesList
tab={tab.key}
type="assigned"
workspaceSlug={workspaceSlug}
widgetStats={widgetStats}
isLoading={fetching}
/>
</Tab.Panel>
);
})}
</Tab.Panels>
</Tab.Group>
</>
)
)}
</div>
);
});

146
web/components/dashboard/widgets/created-issues.tsx
View File

@ -7,6 +7,7 @@ import { useDashboard } from "hooks/store";
// components
import {
DurationFilterDropdown,
IssuesErrorState,
TabsList,
WidgetIssuesList,
WidgetLoader,
@ -26,10 +27,12 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
// states
const [fetching, setFetching] = useState(false);
// store hooks
const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard();
const { fetchWidgetStats, getWidgetDetails, getWidgetStats, getWidgetStatsError, updateDashboardWidgetFilters } =
useDashboard();
// derived values
const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
const widgetStats = getWidgetStats<TCreatedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
const widgetStatsError = getWidgetStatsError(workspaceSlug, dashboardId, WIDGET_KEY);
const selectedDurationFilter = widgetDetails?.widget_filters.duration ?? EDurationFilters.NONE;
const selectedTab = getTabKey(selectedDurationFilter, widgetDetails?.widget_filters.tab);
const selectedCustomDates = widgetDetails?.widget_filters.custom_dates ?? [];
@ -70,74 +73,91 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
const selectedTabIndex = tabsList.findIndex((tab) => tab.key === selectedTab);
if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
if ((!widgetDetails || !widgetStats) && !widgetStatsError) return <WidgetLoader widgetKey={WIDGET_KEY} />;
return (
<div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
<div className="flex items-center justify-between gap-2 p-6 pl-7">
<Link
href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Created by you
</Link>
<DurationFilterDropdown
customDates={selectedCustomDates}
value={selectedDurationFilter}
onChange={(val, customDates) => {
if (val === "custom" && customDates) {
handleUpdateFilters({
duration: val,
custom_dates: customDates,
});
return;
}
if (val === selectedDurationFilter) return;
let newTab = selectedTab;
// switch to pending tab if target date is changed to none
if (val === "none" && selectedTab !== "completed") newTab = "pending";
// switch to upcoming tab if target date is changed to other than none
if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") newTab = "upcoming";
{widgetStatsError ? (
<IssuesErrorState
isRefreshing={fetching}
onClick={() =>
handleUpdateFilters({
duration: val,
tab: newTab,
});
}}
duration: EDurationFilters.NONE,
tab: "pending",
})
}
/>
</div>
<Tab.Group
as="div"
selectedIndex={selectedTabIndex}
onChange={(i) => {
const newSelectedTab = tabsList[i];
handleUpdateFilters({ tab: newSelectedTab.key ?? "completed" });
}}
className="h-full flex flex-col"
>
<div className="px-6">
<TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
</div>
<Tab.Panels as="div" className="h-full">
{tabsList.map((tab) => {
if (tab.key !== selectedTab) return null;
) : (
widgetStats && (
<>
<div className="flex items-center justify-between gap-2 p-6 pl-7">
<Link
href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Created by you
</Link>
<DurationFilterDropdown
customDates={selectedCustomDates}
value={selectedDurationFilter}
onChange={(val, customDates) => {
if (val === "custom" && customDates) {
handleUpdateFilters({
duration: val,
custom_dates: customDates,
});
return;
}
return (
<Tab.Panel key={tab.key} as="div" className="h-full flex flex-col" static>
<WidgetIssuesList
tab={tab.key}
type="created"
workspaceSlug={workspaceSlug}
widgetStats={widgetStats}
isLoading={fetching}
/>
</Tab.Panel>
);
})}
</Tab.Panels>
</Tab.Group>
if (val === selectedDurationFilter) return;
let newTab = selectedTab;
// switch to pending tab if target date is changed to none
if (val === "none" && selectedTab !== "completed") newTab = "pending";
// switch to upcoming tab if target date is changed to other than none
if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed")
newTab = "upcoming";
handleUpdateFilters({
duration: val,
tab: newTab,
});
}}
/>
</div>
<Tab.Group
as="div"
selectedIndex={selectedTabIndex}
onChange={(i) => {
const newSelectedTab = tabsList[i];
handleUpdateFilters({ tab: newSelectedTab.key ?? "completed" });
}}
className="h-full flex flex-col"
>
<div className="px-6">
<TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
</div>
<Tab.Panels as="div" className="h-full">
{tabsList.map((tab) => {
if (tab.key !== selectedTab) return null;
return (
<Tab.Panel key={tab.key} as="div" className="h-full flex flex-col" static>
<WidgetIssuesList
tab={tab.key}
type="created"
workspaceSlug={workspaceSlug}
widgetStats={widgetStats}
isLoading={fetching}
/>
</Tab.Panel>
);
})}
</Tab.Panels>
</Tab.Group>
</>
)
)}
</div>
);
});

1
web/components/dashboard/widgets/error-states/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./issues";

32
web/components/dashboard/widgets/error-states/issues.tsx Normal file
View File

@ -0,0 +1,32 @@
import { AlertTriangle, RefreshCcw } from "lucide-react";
// ui
import { Button } from "@plane/ui";
type Props = {
isRefreshing: boolean;
onClick: () => void;
};
export const IssuesErrorState: React.FC<Props> = (props) => {
const { isRefreshing, onClick } = props;
return (
<div className="h-full w-full grid place-items-center">
<div className="text-center">
<div className="h-24 w-24 bg-red-500/20 rounded-full grid place-items-center mx-auto">
<AlertTriangle className="h-12 w-12 text-red-500" />
</div>
<p className="mt-7 text-custom-text-300 text-sm font-medium">There was an error in fetching widget details</p>
<Button
variant="neutral-primary"
prependIcon={<RefreshCcw className="h-3 w-3" />}
className="mt-2 mx-auto"
onClick={onClick}
loading={isRefreshing}
>
{isRefreshing ? "Retrying" : "Retry"}
</Button>
</div>
</div>
);
};

1
web/components/dashboard/widgets/index.ts
View File

@ -1,5 +1,6 @@
export * from "./dropdowns";
export * from "./empty-states";
export * from "./error-states";
export * from "./issue-panels";
export * from "./loaders";
export * from "./assigned-issues";

86
web/store/dashboard.store.ts
View File

@ -15,6 +15,8 @@ import {
} from "@plane/types";
export interface IDashboardStore {
// error states
widgetStatsError: { [workspaceSlug: string]: Record<string, Record<TWidgetKeys, any | null>> };
// observables
homeDashboardId: string | null;
widgetDetails: { [workspaceSlug: string]: Record<string, TWidget[]> };
@ -36,6 +38,7 @@ export interface IDashboardStore {
// computed actions
getWidgetDetails: (workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => TWidget | undefined;
getWidgetStats: <T>(workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => T | undefined;
getWidgetStatsError: (workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => any | null;
// actions
fetchHomeDashboardWidgets: (workspaceSlug: string) => Promise<THomeDashboardResponse>;
fetchWidgetStats: (
@ -58,6 +61,8 @@ export interface IDashboardStore {
}
export class DashboardStore implements IDashboardStore {
// error states
widgetStatsError: { [workspaceSlug: string]: Record<string, Record<TWidgetKeys, any>> } = {};
// observables
homeDashboardId: string | null = null;
widgetDetails: { [workspaceSlug: string]: Record<string, TWidget[]> } = {};
@ -70,6 +75,8 @@ export class DashboardStore implements IDashboardStore {
constructor(_rootStore: RootStore) {
makeObservable(this, {
// error states
widgetStatsError: observable,
// observables
homeDashboardId: observable.ref,
widgetDetails: observable,
@ -93,7 +100,7 @@ export class DashboardStore implements IDashboardStore {
/**
* @description get home dashboard widgets
* @returns home dashboard widgets
* @returns {TWidget[] | undefined}
*/
get homeDashboardWidgets() {
const workspaceSlug = this.routerStore.workspaceSlug;
@ -104,10 +111,10 @@ export class DashboardStore implements IDashboardStore {
/**
* @description get widget details
* @param workspaceSlug
* @param dashboardId
* @param widgetId
* @returns widget details
* @param {string} workspaceSlug
* @param {string} dashboardId
* @param {TWidgetKeys} widgetKey
* @returns {TWidget | undefined}
*/
getWidgetDetails = computedFn((workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => {
const widgets = this.widgetDetails?.[workspaceSlug]?.[dashboardId];
@ -117,20 +124,30 @@ export class DashboardStore implements IDashboardStore {
/**
* @description get widget stats
* @param workspaceSlug
* @param dashboardId
* @param widgetKey
* @returns widget stats
* @param {string} workspaceSlug
* @param {string} dashboardId
* @param {TWidgetKeys} widgetKey
* @returns {T | undefined}
*/
getWidgetStats = <T>(workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys): T | undefined =>
(this.widgetStats?.[workspaceSlug]?.[dashboardId]?.[widgetKey] as unknown as T) ?? undefined;
/**
* @description fetch home dashboard details and widgets
* @param workspaceSlug
* @returns home dashboard response
* @description get widget stats error
* @param {string} workspaceSlug
* @param {string} dashboardId
* @param {TWidgetKeys} widgetKey
* @returns {any | null}
*/
fetchHomeDashboardWidgets = async (workspaceSlug: string) => {
getWidgetStatsError = (workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) =>
this.widgetStatsError?.[workspaceSlug]?.[dashboardId]?.[widgetKey] ?? null;
/**
* @description fetch home dashboard details and widgets
* @param {string} workspaceSlug
* @returns {Promise<THomeDashboardResponse>}
*/
fetchHomeDashboardWidgets = async (workspaceSlug: string): Promise<THomeDashboardResponse> => {
try {
const response = await this.dashboardService.getHomeDashboardWidgets(workspaceSlug);
@ -151,27 +168,36 @@ export class DashboardStore implements IDashboardStore {
/**
* @description fetch widget stats
* @param workspaceSlug
* @param dashboardId
* @param widgetKey
* @param {string} workspaceSlug
* @param {string} dashboardId
* @param {TWidgetStatsRequestParams} widgetKey
* @returns widget stats
*/
fetchWidgetStats = async (workspaceSlug: string, dashboardId: string, params: TWidgetStatsRequestParams) =>
this.dashboardService.getWidgetStats(workspaceSlug, dashboardId, params).then((res) => {
runInAction(() => {
// @ts-ignore
if (res.issues) this.issueStore.addIssue(res.issues);
set(this.widgetStats, [workspaceSlug, dashboardId, params.widget_key], res);
});
this.dashboardService
.getWidgetStats(workspaceSlug, dashboardId, params)
.then((res) => {
runInAction(() => {
// @ts-ignore
if (res.issues) this.issueStore.addIssue(res.issues);
set(this.widgetStats, [workspaceSlug, dashboardId, params.widget_key], res);
set(this.widgetStatsError, [workspaceSlug, dashboardId, params.widget_key], null);
});
return res;
})
.catch((error) => {
runInAction(() => {
set(this.widgetStatsError, [workspaceSlug, dashboardId, params.widget_key], error);
});
return res;
});
throw error;
});
/**
* @description update dashboard widget
* @param dashboardId
* @param widgetId
* @param data
* @param {string} dashboardId
* @param {string} widgetId
* @param {Partial<TWidget>} data
* @returns updated widget
*/
updateDashboardWidget = async (
@ -209,9 +235,9 @@ export class DashboardStore implements IDashboardStore {
/**
* @description update dashboard widget filters
* @param dashboardId
* @param widgetId
* @param data
* @param {string} dashboardId
* @param {string} widgetId
* @param {TWidgetFiltersFormData} data
* @returns updated widget
*/
updateDashboardWidgetFilters = async (