From 3e37a78ed1f7849ace4b9ac4316877ca5f4c45d8 Mon Sep 17 00:00:00 2001
From: Chuck Skelton <chskelt@microsoft.com>
Date: Thu, 29 Jun 2023 17:43:20 -0700
Subject: [PATCH] Added link to computed properties docs

---
 .../ComputedPropertiesComponent.tsx           | 13 +++++++-----
 .../ComputedPropertiesComponent.test.tsx.snap | 20 +++++++++++++++++++
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
index 9fb8aabc9..bbc9d2f16 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
@@ -1,7 +1,4 @@
-// CTODO: Render/edit CP in monaco
-// CTODO: Get CPs from RP
-// CTODO: Save CPs to RP
-import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { FontIcon, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react";
 import * as DataModels from "Contracts/DataModels";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "Explorer/Controls/Settings/SettingsRenderUtils";
 import { isDirty } from "Explorer/Controls/Settings/SettingsUtils";
@@ -88,7 +85,7 @@ export class ComputedPropertiesComponent extends React.Component<
     this.computedPropertiesEditor = monaco.editor.create(this.computedPropertiesDiv.current, {
       value: value,
       language: "json",
-      ariaLabel: "Indexing Policy",
+      ariaLabel: "Computed properties",
     });
     if (this.computedPropertiesEditor) {
       const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();
@@ -118,6 +115,12 @@ export class ComputedPropertiesComponent extends React.Component<
             {unsavedEditorWarningMessage("computedProperties")}
           </MessageBar>
         )}
+        <Text style={{ marginLeft: "30px", marginBottom: "10px" }}>
+          <Link target="_blank" href="https://aka.ms/computed-properties-preview/">
+            {"Learn more"} <FontIcon iconName="NavigateExternalInline" />
+          </Link>
+          &#160; about how to define computed properties and how to use them.
+        </Text>
         <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.computedPropertiesDiv}></div>
       </Stack>
     );
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap
index eab45e0ba..86a9bda74 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap
@@ -8,6 +8,26 @@ exports[`ComputedPropertiesComponent renders 1`] = `
     }
   }
 >
+  <Text
+    style={
+      Object {
+        "marginBottom": "10px",
+        "marginLeft": "30px",
+      }
+    }
+  >
+    <StyledLinkBase
+      href="https://aka.ms/computed-properties-preview/"
+      target="_blank"
+    >
+      Learn more
+       
+      <FontIcon
+        iconName="NavigateExternalInline"
+      />
+    </StyledLinkBase>
+      about how to define computed properties and how to use them.
+  </Text>
   <div
     className="settingsV2IndexingPolicyEditor"
     tabIndex={0}