When listing plugins with updates, add an indicator when the plugin i…

…s disabled (#122)
swar8080 · Oct 14, 2024 · 5f09ada · 5f09ada
1 parent eec5e0b
commit 5f09ada
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/src/components/PluginUpdateList.stories.tsx b/src/components/PluginUpdateList.stories.tsx
@@ -45,6 +45,7 @@ const PLUGIN_VIEW_MODEL_BASE: PluginViewModel = {
         },
     ],
     hasInstallableReleaseAssets: true,
+    isPluginEnabled: true,
 };
 
 export const MixOfPlugins: Story = () => {
@@ -68,9 +69,36 @@ export const MixOfPlugins: Story = () => {
         lastUpdatedTime: dayjs().subtract(48, 'hours'),
         name: 'Plugin 4',
     };
+    const pluginBeta = {
+        ...PLUGIN_VIEW_MODEL_BASE,
+        id: `Plugin ${pluginId++}`,
+        name: 'Plugin beta',
+        latestInstallableVersionIsBeta: true,
+    };
+    const pluginDisabled = {
+        ...PLUGIN_VIEW_MODEL_BASE,
+        id: `Plugin ${pluginId++}`,
+        name: 'Plugin disabled',
+        isPluginEnabled: false,
+    };
+    const pluginBetaAndDisabled = {
+        ...PLUGIN_VIEW_MODEL_BASE,
+        id: `Plugin ${pluginId++}`,
+        name: 'Plugin beta and disabled',
+        latestInstallableVersionIsBeta: true,
+        isPluginEnabled: false,
+    };
     return (
         <PluginUpdateList
-            plugins={[PLUGIN_VIEW_MODEL_BASE, noReleaseNotes, plugin3, plugin4]}
+            plugins={[
+                PLUGIN_VIEW_MODEL_BASE,
+                noReleaseNotes,
+                plugin3,
+                plugin4,
+                pluginBeta,
+                pluginDisabled,
+                pluginBetaAndDisabled,
+            ]}
             {...PLUGIN_UPDATE_LIST_BASE}
             actionBarLocation="bottom"
         />

diff --git a/src/components/PluginUpdateList.tsx b/src/components/PluginUpdateList.tsx
@@ -49,6 +49,7 @@ const PluginUpdateListConnected: React.FC<PluginUpdateListProps> = ({
 }) => {
     const allPluginReleases: InstalledPluginReleases[] = usePluginReleaseFilter();
     const isLoadingReleases = useAppSelector((state) => state.releases.isLoadingReleases);
+    const enabledPlugins = useAppSelector((state) => state.obsidian.enabledPlugins) || {};
     const selectedPluginsById = useAppSelector(getSelectedPluginIds);
     const selectedPluginCount = useAppSelector(countSelectedPlugins);
     const isUpdatingDismissedVersions = useAppSelector(
@@ -129,6 +130,9 @@ const PluginUpdateListConnected: React.FC<PluginUpdateListProps> = ({
                     isBetaVersion: release.isBetaVersion,
                 })),
                 hasInstallableReleaseAssets: !!pluginReleases.getLatestReleaseAssetIds(),
+                isPluginEnabled:
+                    pluginReleases.getPluginId() in enabledPlugins &&
+                    enabledPlugins[pluginReleases.getPluginId()],
             })),
         [allPluginReleases]
     );
@@ -295,6 +299,7 @@ export type PluginViewModel = {
         isBetaVersion: boolean;
     }[];
     hasInstallableReleaseAssets: boolean;
+    isPluginEnabled: boolean;
 };
 
 const PluginUpdates: React.FC<{
@@ -328,6 +333,15 @@ const PluginUpdates: React.FC<{
                             ⚠️ Beta Version
                         </SpanBetaVersionBadge>
                     )}
+                    {!plugin.isPluginEnabled && (
+                        <SpanDisabledPlugin
+                            aria-label="This plugin is disabled"
+                            aria-label-position="top"
+                            className="obsidian-plugin-update-tracker-disabled-plugin"
+                        >
+                            Disabled
+                        </SpanDisabledPlugin>
+                    )}
                 </H2PluginName>
                 <DivSelectPluginContainer>
                     <input
@@ -511,6 +525,24 @@ const SpanBetaVersionBadge = styled.span`
 
     padding: 0.25em 0.5em;
     margin-left: 0.4rem;
+    user-select: none;
+`;
+
+const SpanDisabledPlugin = styled.span`
+    font-size: 0.45em;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+
+    color: #212529;
+    background-color: #a0a0a0;
+    font-weight: 700;
+
+    border-radius: 10em;
+
+    padding: 0.25em 0.5em;
+    margin-left: 0.4rem;
+    user-select: none;
 `;
 
 const DivSelectPluginContainer = styled.div`