fix: scorecard list

Fixed issues with sharing access not being accurate

packages/app/src/modules/ScorecardList/components/Cards/ScorecardListCard.tsx

@@ -1,33 +1,41 @@
 import { colors } from "@dhis2/ui";
-import { getOrgUnitIdsFromOrgUnitSelection, ScorecardCardImage as holderImage, truncateDescription } from "@scorecard/shared";
+import { getOrgUnitIdsFromOrgUnitSelection, getUserAuthority, ScorecardCardImage as holderImage, truncateDescription, UserState } from "@scorecard/shared";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { ScorecardListItem } from "../../types";
 import { ScorecardListCardActions } from "./ScorecardListCardActions";
 import { OrgUnitSelection } from "@hisptz/dhis2-utils";
+import { getSharingSettingsFromOldConfiguration } from "../../../../utils/sharing";
+import { useRecoilValue } from "recoil";
 
 export default function ScorecardListCard({
 											  scorecard,
 											  grid
 										  }: {
 	scorecard: ScorecardListItem;
-	grid: boolean;
+	grid?: boolean;
 }) {
+	const user = useRecoilValue(UserState);
 	const { title, description, id, orgUnitSelection, periodSelection } = scorecard ?? {};
 	const [showFullDescription, setShowFullDescription] = useState(false);
 	const navigate = useNavigate();
 
+	const accessConfig = getUserAuthority(user, scorecard.sharing ?? getSharingSettingsFromOldConfiguration(scorecard as any));
+	const { read } = accessConfig;
+
 	const onView = () => {
-		const orgUnitIds = getOrgUnitIdsFromOrgUnitSelection(orgUnitSelection as OrgUnitSelection).join(";");
-		const periodIds = periodSelection.periods.map(({ id }) => id).join(";");
-		navigate(`/view/${id}?ou=${orgUnitIds}&pe=${periodIds}`);
+		if (read) {
+			const orgUnitIds = getOrgUnitIdsFromOrgUnitSelection(orgUnitSelection as OrgUnitSelection).join(";");
+			const periodIds = periodSelection.periods.map(({ id }) => id).join(";");
+			navigate(`/view/${id}?ou=${orgUnitIds}&pe=${periodIds}`);
+		}
 	};
 
 	return grid ? (
 		<div
 			className="container-bordered p-16 "
 			data-test="scorecard-thumbnail-view"
-			style={{ margin: 16, background: "white" }}
+			style={{ margin: 16, background: "white", opacity: read ? 1 : 0.4, cursor: read ? "pointer" : "not-allowed" }}
 			onClick={onView}
 		>
 			<div className="column space-between h-100">

packages/app/src/modules/ScorecardList/components/Cards/ScorecardListCardActions.tsx

@@ -1,58 +1,38 @@
-import { Button, ButtonStrip, CircularLoader } from "@dhis2/ui";
+import { Button, ButtonStrip } from "@dhis2/ui";
 import i18n from "@dhis2/d2-i18n";
 import React from "react";
-import { useScorecardSharingSettings } from "../../hooks/authority";
 import { ScorecardListItem } from "../../types";
-import { useDeleteScorecard } from "@scorecard/shared";
+import { getUserAuthority, useDeleteScorecard, UserState } from "@scorecard/shared";
 import { useAlert } from "@dhis2/app-runtime";
 import { useDialog } from "@hisptz/dhis2-ui";
 import { useNavigate } from "react-router-dom";
+import { useRecoilValue } from "recoil";
+import { getSharingSettingsFromOldConfiguration } from "../../../../utils/sharing";
 
 export interface ScorecardListCardActionsProps {
 	scorecard: ScorecardListItem;
 }
 
 export function ScorecardListCardActions({
-	scorecard,
-}: ScorecardListCardActionsProps) {
-	const {
-		access: accessConfig,
-		loading,
-		error,
-	} = useScorecardSharingSettings({
-		id: scorecard.id,
-	});
+											 scorecard
+										 }: ScorecardListCardActionsProps) {
+	const user = useRecoilValue(UserState);
 	const navigate = useNavigate();
 
 	const { confirm } = useDialog();
 
 	const { show } = useAlert(
 		({ message }) => message,
-		({ type }) => ({ ...type, duration: 3000 }),
+		({ type }) => ({ ...type, duration: 3000 })
 	);
 	const { remove } = useDeleteScorecard(scorecard.id);
 
-	if (loading) {
-		return (
-			<div className="column w-100 center align-content-center">
-				<CircularLoader extrasmall />
-			</div>
-		);
-	}
-
-	if (error) {
-		const message = error.message;
-		return (
-			<div>
-				{i18n.t("Could not determine scorecard's access")}: {message}
-			</div>
-		);
-	}
-
 	const onView = () => {
 		navigate(`/view/${scorecard.id}`);
 	};
 
+	const accessConfig = getUserAuthority(user, scorecard.sharing ?? getSharingSettingsFromOldConfiguration(scorecard as any));
+
 	const { read, write } = accessConfig;
 
 	const deleteScorecard = async () => {
@@ -62,12 +42,12 @@ export function ScorecardListCardActions({
 			} catch (e: any) {
 				show({
 					message: e.message,
-					type: { info: true },
+					type: { info: true }
 				});
 			}
 			show({
 				message: i18n.t("Scorecard deleted successfully"),
-				type: { success: true },
+				type: { success: true }
 			});
 		}
 	};
@@ -86,10 +66,11 @@ export function ScorecardListCardActions({
 					<b>{scorecard.title}</b>
 				</p>
 			),
-			onCancel: () => {},
+			onCancel: () => {
+			},
 			onConfirm: async () => {
 				await deleteScorecard();
-			},
+			}
 		});
 	};
 
@@ -99,7 +80,7 @@ export function ScorecardListCardActions({
 			{write && (
 				<Button
 					dataTest={"edit-scorecard-button"}
-					onClick={function (_: any, e: any) {
+					onClick={function(_: any, e: any) {
 						e.stopPropagation();
 						onEdit();
 					}}

packages/app/src/modules/ScorecardList/hooks/data.ts

@@ -27,7 +27,7 @@ const query: any = {
 				rootJunction: "or",
 				page,
 				pageSize,
-				fields: ["id", "title", "description", "additionalLabels", "orgUnitSelection", "periodSelection"]
+				fields: ["id", "title", "description", "additionalLabels", "orgUnitSelection", "periodSelection", "sharing", "user", "userAccesses", "userGroupAccesses", "publicAccess"]
 			};
 		}
 	},

packages/app/src/modules/ScorecardList/types/index.ts

@@ -2,5 +2,5 @@ import { ScorecardConfig } from "@hisptz/dhis2-analytics";
 
 export type ScorecardListItem = Pick<
 	ScorecardConfig,
-	"id" | "title" | "additionalLabels" | "description" | "orgUnitSelection" | "periodSelection"
+	"id" | "title" | "additionalLabels" | "description" | "orgUnitSelection" | "periodSelection" | "sharing"
 >;

packages/app/src/utils/sharing.ts

@@ -5,11 +5,11 @@ import { fromPairs } from "lodash";
 export function getSharingSettingsFromOldConfiguration({ user, publicAccess, userGroupAccesses, userAccesses }: ScorecardConfig & { user: { id: string }, publicAccess: { access: string; }; userAccesses: Array<{ id: string; access: string; }>; userGroupAccesses: Array<{ id: string; access: string; }> }): ScorecardSharing {
 
 	return {
-		owner: user.id,
-		public: publicAccess.access ?? "------",
+		owner: user?.id ?? "",
+		public: publicAccess?.access ?? "------",
 		external: false,
-		users: fromPairs(userAccesses.map(({ id, ...rest }) => ([id, { ...rest, id }]))),
-		userGroups: fromPairs(userGroupAccesses.map(({ id, ...rest }) => ([id, { ...rest, id }])))
+		users: fromPairs(userAccesses?.map(({ id, ...rest }) => ([id, { ...rest, id }])) ?? []),
+		userGroups: fromPairs(userGroupAccesses?.map(({ id, ...rest }) => ([id, { ...rest, id }])) ?? [])
 	};