chore: add deprecation notice to settings

jamiebrynes7 · Apr 6, 2024 · a671b85 · a671b85
1 parent a57f4ab
commit a671b85
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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;
+  }
+}