fix: enhance PluginScorecardList actions and improve sharing logic

- Added loading state handling to `Button` and `useManagePluginConfig` for better feedback during actions.
- Improved sharing configuration logic to align `dashboardItem` sharing with the related scorecard.
- Updated `MenuItem` to include `key` property to resolve React warnings.
- Refined translation keys and updated corresponding `.pot` file.

Author: nnkogift

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-06-28T11:04:45.997Z\n"
-"PO-Revision-Date: 2025-06-28T11:04:45.997Z\n"
+"POT-Creation-Date: 2025-07-03T08:16:48.925Z\n"
+"PO-Revision-Date: 2025-07-03T08:16:48.927Z\n"
 
 msgid "Scorecard deleted successfully"
 msgstr "Scorecard deleted successfully"
@@ -508,6 +508,25 @@ msgstr "Show Data in Rows"
 msgid "Reset"
 msgstr "Reset"
 
+msgid "Welcome to the scorecard plugin"
+msgstr "Welcome to the scorecard plugin"
+
+msgid ""
+"It seems you do not have any scorecards configured. Create a scorecard "
+"first in the Interactive scorecard app first."
+msgstr ""
+"It seems you do not have any scorecards configured. Create a scorecard "
+"first in the Interactive scorecard app first."
+
+msgid "Go to scorecard app"
+msgstr "Go to scorecard app"
+
+msgid "Select a scorecard"
+msgstr "Select a scorecard"
+
+msgid "Select scorecard"
+msgstr "Select scorecard"
+
 msgid "Are you sure you want to delete this entity?"
 msgstr "Are you sure you want to delete this entity?"
 
@@ -940,25 +959,6 @@ msgstr "User Sub-x2-units"
 msgid "This group does not have any configured data sources"
 msgstr "This group does not have any configured data sources"
 
-msgid "Welcome to the scorecard plugin"
-msgstr "Welcome to the scorecard plugin"
-
-msgid ""
-"It seems you do not have any scorecards configured. Create a scorecard "
-"first in the Interactive scorecard app first."
-msgstr ""
-"It seems you do not have any scorecards configured. Create a scorecard "
-"first in the Interactive scorecard app first."
-
-msgid "Go to scorecard app"
-msgstr "Go to scorecard app"
-
-msgid "Select a scorecard"
-msgstr "Select a scorecard"
-
-msgid "Select scorecard"
-msgstr "Select scorecard"
-
 msgctxt "Application title"
 msgid "__MANIFEST_APP_TITLE"
 msgstr "Interactive Scorecard"

src/plugin/hooks/config.ts

@@ -1,6 +1,8 @@
 import { DATASTORE_WIDGET_NAMESPACE } from "../constants/scorecard";
 import { useDataEngine, useDataQuery } from "@dhis2/app-runtime";
 import { useCallback } from "react";
+import { DATASTORE_NAMESPACE } from "../../shared";
+import { useBoolean } from "usehooks-ts";
 
 export interface ScorecardPluginConfig {
 	dashboardItemId: string;
@@ -48,21 +50,66 @@ const deleteMutation = {
 
 export function useManagePluginConfig(dashboardItemId: string) {
 	const engine = useDataEngine();
+	const { value: loading, setTrue, setFalse } = useBoolean();
 	const addConfig = useCallback(
 		async (config: ScorecardPluginConfig) => {
 			try {
+				setTrue();
 				const mutation = getCreateMutation(dashboardItemId);
 				//@ts-expect-error app runtime mutation errors
-				return await engine.mutate(mutation, {
+				await engine.mutate(mutation, {
 					variables: {
 						data: config,
 					},
 				});
+				//Updating sharing settings to match the scorecard's
+				const sharingConfig = (await engine.query({
+					scorecardSharing: {
+						resource: `dataStore/${DATASTORE_NAMESPACE}/${config.scorecardId}/metaData`,
+					},
+					dashboardItemMeta: {
+						resource: `dataStore/${DATASTORE_WIDGET_NAMESPACE}/${dashboardItemId}/metaData`,
+					},
+				})) as {
+					scorecardSharing: {
+						sharing: {
+							users: Record<string, unknown>;
+							userGroups: Record<string, unknown>;
+							public: string;
+						};
+					};
+					dashboardItemMeta: {
+						sharing: {
+							users: Record<string, unknown>;
+							userGroups: Record<string, unknown>;
+							public: string;
+						};
+						id: string;
+					};
+				};
+				const newSharing = {
+					...sharingConfig.dashboardItemMeta.sharing,
+					users: sharingConfig.scorecardSharing.sharing.users,
+					userGroups:
+						sharingConfig.scorecardSharing.sharing.userGroups,
+					public: sharingConfig.scorecardSharing.sharing.public,
+				};
+				await engine.mutate({
+					type: "create",
+					resource: "sharing",
+					params: {
+						id: sharingConfig.dashboardItemMeta.id,
+						type: "dataStore",
+					},
+					data: newSharing,
+				});
 			} catch (error) {
 				console.error(
 					`Could not save configuration for dashboardItemId ${dashboardItemId}`
 				);
 				throw error;
+			} finally {
+				setFalse();
 			}
 		},
 		[engine]
@@ -79,6 +126,7 @@ export function useManagePluginConfig(dashboardItemId: string) {
 
 	return {
 		addConfig,
+		loading,
 		deleteConfig,
 	};
 }

src/plugin/modules/ScorecardList/components/PluginScorecardList.tsx

@@ -23,7 +23,8 @@ export function PluginScorecardList() {
 	const {
 		props: { dashboardItemId },
 	} = usePluginConfig();
-	const { addConfig } = useManagePluginConfig(dashboardItemId);
+	const { addConfig, loading: saving } =
+		useManagePluginConfig(dashboardItemId);
 	const navigate = useNavigate();
 	const [selectedScorecard, setSelectedScorecard] = useState<
 		string | undefined
@@ -87,6 +88,7 @@ export function PluginScorecardList() {
 				<Menu>
 					{scorecards.map((scorecard) => (
 						<MenuItem
+							key={scorecard.id}
 							active={isChecked(scorecard.id)}
 							icon={<IconVisualizationPivotTable24 />}
 							onClick={() => {
@@ -116,11 +118,12 @@ export function PluginScorecardList() {
 				</Menu>
 			</div>
 			<Button
+				loading={saving}
 				onClick={onSelect}
 				primary
 				disabled={selectedScorecard === undefined}
 			>
-				{i18n.t("Select scorecard")}
+				{saving ? i18n.t("Saving...") : i18n.t("Select scorecard")}
 			</Button>
 		</div>
 	);