From a671b853f50701b109150a2e957c96a9de0dfdc0 Mon Sep 17 00:00:00 2001
From: Jamie Brynes <jamiebrynes7@gmail.com>
Date: Sat, 6 Apr 2024 20:42:12 +0100
Subject: [PATCH] chore: add deprecation notice to settings

---
 plugin/src/ui/settings/SettingItem.tsx | 29 ++++++++++++++++++++++++--
 plugin/src/ui/settings/index.tsx       | 14 +++++++++++--
 plugin/src/ui/settings/styles.scss     | 12 +++++++++++
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/plugin/src/ui/settings/SettingItem.tsx b/plugin/src/ui/settings/SettingItem.tsx
index 25630a5..6f2b2e2 100644
--- a/plugin/src/ui/settings/SettingItem.tsx
+++ b/plugin/src/ui/settings/SettingItem.tsx
@@ -6,20 +6,45 @@ import { ObsidianIcon } from "../components/obsidian-icon";
 type RootProps = {
   name: string;
   description: string;
+  deprecationMessage?: string;
 };
 
-const Root: React.FC<PropsWithChildren<RootProps>> = ({ children, name, description }) => {
+const Root: React.FC<PropsWithChildren<RootProps>> = ({
+  children,
+  name,
+  description,
+  deprecationMessage,
+}) => {
+  const renderDeprecationNotice = deprecationMessage !== undefined;
   return (
     <div className="setting-item">
       <div className="setting-item-info">
         <div className="setting-item-name">{name}</div>
-        <div className="setting-item-description">{description}</div>
+        <div className="setting-item-description">
+          {description}
+          {renderDeprecationNotice && <DeprecationNotice message={deprecationMessage} />}
+        </div>
       </div>
       <div className="setting-item-control">{children}</div>
     </div>
   );
 };
 
+type DeprecationNoticeProps = {
+  message: string;
+};
+
+const DeprecationNotice: React.FC<DeprecationNoticeProps> = ({ message }) => {
+  return (
+    <div className="setting-item-deprecation-notice">
+      <ObsidianIcon size={24} id="lucide-alert-triangle" />
+      <div className="setting-item-deprecation-notice-message">
+        This setting is deprecated and will be removed in a future release. {message}
+      </div>
+    </div>
+  );
+};
+
 type ButtonProps = {
   label: string;
   icon?: string;
diff --git a/plugin/src/ui/settings/index.tsx b/plugin/src/ui/settings/index.tsx
index 0350003..bee3414 100644
--- a/plugin/src/ui/settings/index.tsx
+++ b/plugin/src/ui/settings/index.tsx
@@ -121,11 +121,16 @@ const SettingsRoot: React.FC<Props> = ({ plugin }) => {
       <Setting.Root
         name="Enable descriptions"
         description="Whether descriptions should be rendered with tasks"
+        deprecationMessage="Please use the show property in the query block instead."
       >
         <Setting.ToggleControl {...toggleProps("renderDescription")} />
       </Setting.Root>
 
-      <Setting.Root name="Enable dates" description="Whether dates should be rendered with tasks">
+      <Setting.Root
+        name="Enable dates"
+        description="Whether dates should be rendered with tasks"
+        deprecationMessage="Please use the show property in the query block instead."
+      >
         <Setting.ToggleControl {...toggleProps("renderDate")} />
       </Setting.Root>
       <Setting.Root
@@ -138,6 +143,7 @@ const SettingsRoot: React.FC<Props> = ({ plugin }) => {
       <Setting.Root
         name="Enable project & section"
         description="Whether the project & section should be rendered with tasks"
+        deprecationMessage="Please use the show property in the query block instead."
       >
         <Setting.ToggleControl {...toggleProps("renderProject")} />
       </Setting.Root>
@@ -148,7 +154,11 @@ const SettingsRoot: React.FC<Props> = ({ plugin }) => {
         <Setting.ToggleControl {...toggleProps("renderProjectIcon")} />
       </Setting.Root>
 
-      <Setting.Root name="Enable labels" description="Whether labels should be rendered with tasks">
+      <Setting.Root
+        name="Enable labels"
+        description="Whether labels should be rendered with tasks"
+        deprecationMessage="Please use the show property in the query block instead."
+      >
         <Setting.ToggleControl {...toggleProps("renderLabels")} />
       </Setting.Root>
       <Setting.Root
diff --git a/plugin/src/ui/settings/styles.scss b/plugin/src/ui/settings/styles.scss
index 7688aed..d48acd4 100644
--- a/plugin/src/ui/settings/styles.scss
+++ b/plugin/src/ui/settings/styles.scss
@@ -23,3 +23,15 @@
     }
   }
 }
+
+.setting-item-deprecation-notice {
+  display: flex;
+  background-color: rgba(var(--color-yellow-rgb), 0.2);
+  padding: 4px 12px;
+  border-radius: 8px;
+  margin-top: 0.5em;
+
+  .setting-item-deprecation-notice-message {
+    margin-left: 0.5em;
+  }
+}