fix: app

Fixed issues with scorecard sharing settings in the scorecard listing
hisptz · Aug 8, 2024 · 6306395 · 6306395
1 parent d132760
commit 6306395
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 42 deletions.
diff --git a/...ages/app/src/modules/Main/components/ScorecardList/components/Cards/ScorecardListCard.tsx b/...ages/app/src/modules/Main/components/ScorecardList/components/Cards/ScorecardListCard.tsx
@@ -1,14 +1,13 @@
-import i18n from "@dhis2/d2-i18n";
-import { Button, ButtonStrip, colors } from "@dhis2/ui";
+import { colors } from "@dhis2/ui";
 import {
 	ScorecardCardImage as holderImage,
 	truncateDescription,
-	UserAuthorityOnScorecard,
 } from "@scorecard/shared";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useRecoilValue } from "recoil";
 import { ScorecardListItem } from "../../types";
+import { useScorecardSharingSettings } from "../../hooks/authority";
+import { ScorecardListCardActions } from "./ScorecardListCardActions";
 
 export default function ScorecardListCard({
 	scorecard,
@@ -17,16 +16,16 @@ export default function ScorecardListCard({
 	scorecard: ScorecardListItem;
 	grid: boolean;
 }) {
-	const { write, delete: deletePermission } = useRecoilValue(
-		UserAuthorityOnScorecard(scorecard?.id),
-	);
+	const { write, read } = useScorecardSharingSettings(scorecard);
+
 	const { title, description, id } = scorecard ?? {};
 	const [showFullDescription, setShowFullDescription] = useState(false);
 	const navigate = useNavigate();
 
 	const onView = () => {
 		navigate(`/view/${id}`);
 	};
+
 	return grid ? (
 		<div
 			className="container-bordered p-16 "
@@ -68,28 +67,7 @@ export default function ScorecardListCard({
 					</p>
 				</div>
 				<div style={{ margin: "0 8px" }}>
-					<ButtonStrip middle>
-						<Button onClick={onView}>{i18n.t("View")}</Button>
-						{write && (
-							<Button
-								dataTest={"edit-scorecard-button"}
-								onClick={function (_: any, e: any) {
-									e.stopPropagation();
-									onEdit();
-								}}
-							>
-								{i18n.t("Edit")}
-							</Button>
-						)}
-						{deletePermission && (
-							<Button
-								dataTest="scorecard-delete-button"
-								onClick={onDelete}
-							>
-								{i18n.t("Delete")}
-							</Button>
-						)}
-					</ButtonStrip>
+					<ScorecardListCardActions scorecard={scorecard} />
 				</div>
 			</div>
 		</div>

diff --git a/...p/src/modules/Main/components/ScorecardList/components/Cards/ScorecardListCardActions.tsx b/...p/src/modules/Main/components/ScorecardList/components/Cards/ScorecardListCardActions.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonStrip } from "@dhis2/ui";
+import { Button, ButtonStrip, CircularLoader } from "@dhis2/ui";
 import i18n from "@dhis2/d2-i18n";
 import React from "react";
 import { useScorecardSharingSettings } from "../../hooks/authority";
@@ -15,7 +15,11 @@ export interface ScorecardListCardActionsProps {
 export function ScorecardListCardActions({
 	scorecard,
 }: ScorecardListCardActionsProps) {
-	const accessConfig = useScorecardSharingSettings({
+	const {
+		access: accessConfig,
+		loading,
+		error,
+	} = useScorecardSharingSettings({
 		id: scorecard.id,
 	});
 	const navigate = useNavigate();
@@ -28,8 +32,21 @@ export function ScorecardListCardActions({
 	);
 	const { remove } = useDeleteScorecard(scorecard.id);
 
-	if (!accessConfig) {
-		return null;
+	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 = () => {
@@ -42,7 +59,7 @@ export function ScorecardListCardActions({
 		if (write) {
 			try {
 				await remove();
-			} catch (e) {
+			} catch (e: any) {
 				show({
 					message: e.message,
 					type: { info: true },
@@ -59,7 +76,6 @@ export function ScorecardListCardActions({
 			navigate(`/edit/${scorecard.id}`);
 		}
 	};
-
 	const onDelete = (value: any, event: any) => {
 		event.stopPropagation();
 		confirm({
@@ -79,7 +95,7 @@ export function ScorecardListCardActions({
 
 	return (
 		<ButtonStrip middle>
-			<Button onClick={onView}>{i18n.t("View")}</Button>
+			{read && <Button onClick={onView}>{i18n.t("View")}</Button>}
 			{write && (
 				<Button
 					dataTest={"edit-scorecard-button"}

diff --git a/packages/app/src/modules/Main/components/ScorecardList/components/GridScorecardDisplay.tsx b/packages/app/src/modules/Main/components/ScorecardList/components/GridScorecardDisplay.tsx
@@ -9,7 +9,7 @@ export default function GridScorecardDisplay({
 }) {
 	return (
 		<div className="scorecard-list-container grid p-32">
-			{scorecards?.map((scorecard: any) => (
+			{scorecards?.map((scorecard) => (
 				<ScorecardListCard
 					grid
 					key={scorecard.id}

diff --git a/packages/app/src/modules/Main/components/ScorecardList/hooks/authority.ts b/packages/app/src/modules/Main/components/ScorecardList/hooks/authority.ts
@@ -49,12 +49,22 @@ export function useScorecardSharingSettings({ id }: { id: string }) {
 			},
 		},
 	);
-	return useMemo(() => {
+	const access = useMemo(() => {
 		if (!data) {
-			return;
+			return {
+				write: false,
+				read: false,
+				delete: false,
+			};
 		} else {
 			const sharing = data.meta.sharing;
 			return getUserAuthority(user, sharing);
 		}
 	}, [data, user]);
+
+	return {
+		access,
+		loading,
+		error,
+	};
 }
diff --git a/packages/shared/src/utils/utils.ts b/packages/shared/src/utils/utils.ts
@@ -299,7 +299,10 @@ export function sortDataSourcesBasedOnNames({ sort, dataSources }: any) {
 	return filteredDataSources;
 }
 
-function translateAccess(access = "") {
+function translateAccess(access: string = ""): {
+	read: boolean;
+	write: boolean;
+} {
 	const translatedAccess = {
 		read: false,
 		write: false,
@@ -313,15 +316,18 @@ function translateAccess(access = "") {
 	return translatedAccess;
 }
 
-export function getUserAuthority(user: D2User, sharing: Sharing) {
+export function getUserAuthority(
+	user: D2User,
+	sharing: Sharing,
+): { read: boolean; write: boolean } {
 	const {
 		users,
 		userGroups,
 		public: publicAccess,
 		owner: userId,
 	} = sharing ?? {};
 	if (user.id === userId) {
-		return { ...translateAccess("rw-----"), delete: true };
+		return { ...translateAccess("rw-----") };
 	}
 
 	if (!isEmpty(users)) {