From 2bccb7885f9dd81c96f1610006af8ad2f1b6223b Mon Sep 17 00:00:00 2001
From: victor-meng <56978073+victor-meng@users.noreply.github.com>
Date: Thu, 15 Apr 2021 16:51:59 -0700
Subject: [PATCH] Hide TTL in settings tab for Mongo API (#677)

* Hide ttl for mongo

* Fix typo

* Refine info message
---
 .../SubSettingsComponent.tsx                  | 93 +++++++++++--------
 1 file changed, 56 insertions(+), 37 deletions(-)

diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
index 124dcbbd2..fd0cb538e 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
@@ -1,4 +1,13 @@
-import { ChoiceGroup, IChoiceGroupOption, Label, MessageBar, Stack, Text, TextField } from "office-ui-fabric-react";
+import {
+  ChoiceGroup,
+  IChoiceGroupOption,
+  Label,
+  Link,
+  MessageBar,
+  Stack,
+  Text,
+  TextField,
+} from "office-ui-fabric-react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
@@ -61,17 +70,15 @@ export interface SubSettingsComponentProps {
 
 export class SubSettingsComponent extends React.Component<SubSettingsComponentProps> {
   private shouldCheckComponentIsDirty = true;
-  private ttlVisible: boolean;
   private geospatialVisible: boolean;
   private partitionKeyValue: string;
   private partitionKeyName: string;
 
   constructor(props: SubSettingsComponentProps) {
     super(props);
-    this.ttlVisible = (this.props.container && !this.props.container.isPreferredApiCassandra()) || false;
     this.geospatialVisible = userContext.apiType === "SQL";
     this.partitionKeyValue = "/" + this.props.collection.partitionKeyProperty;
-    this.partitionKeyName = this.props.container.isPreferredApiMongoDB() ? "Shard key" : "Partition key";
+    this.partitionKeyName = userContext.apiType === "Mongo" ? "Shard key" : "Partition key";
   }
 
   componentDidMount(): void {
@@ -171,39 +178,51 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   ): void =>
     this.props.onChangeFeedPolicyChange(ChangeFeedPolicyState[option.key as keyof typeof ChangeFeedPolicyState]);
 
-  private getTtlComponent = (): JSX.Element => (
-    <Stack {...titleAndInputStackProps}>
-      <ChoiceGroup
-        id="timeToLive"
-        label="Time to Live"
-        selectedKey={this.props.timeToLive}
-        options={this.ttlChoiceGroupOptions}
-        onChange={this.onTtlChange}
-        styles={getChoiceGroupStyles(this.props.timeToLive, this.props.timeToLiveBaseline)}
-      />
-      {isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) && this.props.timeToLive === TtlType.On && (
-        <MessageBar
-          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-          styles={messageBarStyles}
-        >
-          {ttlWarning}
-        </MessageBar>
-      )}
-      {this.props.timeToLive === TtlType.On && (
-        <TextField
-          id="timeToLiveSeconds"
-          styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
-          type="number"
-          required
-          min={1}
-          max={Int32.Max}
-          value={this.props.timeToLiveSeconds?.toString()}
-          onChange={this.onTimeToLiveSecondsChange}
-          suffix="second(s)"
+  private getTtlComponent = (): JSX.Element =>
+    userContext.apiType === "Mongo" ? (
+      <MessageBar
+        messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
+        styles={{ text: { fontSize: 14 } }}
+      >
+        To enable time-to-live (TTL) for your collection/documents,
+        <Link href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live" target="_blank">
+          create a TTL index
+        </Link>
+        .
+      </MessageBar>
+    ) : (
+      <Stack {...titleAndInputStackProps}>
+        <ChoiceGroup
+          id="timeToLive"
+          label="Time to Live"
+          selectedKey={this.props.timeToLive}
+          options={this.ttlChoiceGroupOptions}
+          onChange={this.onTtlChange}
+          styles={getChoiceGroupStyles(this.props.timeToLive, this.props.timeToLiveBaseline)}
         />
-      )}
-    </Stack>
-  );
+        {isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) && this.props.timeToLive === TtlType.On && (
+          <MessageBar
+            messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
+            styles={messageBarStyles}
+          >
+            {ttlWarning}
+          </MessageBar>
+        )}
+        {this.props.timeToLive === TtlType.On && (
+          <TextField
+            id="timeToLiveSeconds"
+            styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
+            type="number"
+            required
+            min={1}
+            max={Int32.Max}
+            value={this.props.timeToLiveSeconds?.toString()}
+            onChange={this.onTimeToLiveSecondsChange}
+            suffix="second(s)"
+          />
+        )}
+      </Stack>
+    );
 
   private analyticalTtlChoiceGroupOptions: IChoiceGroupOption[] = [
     { key: TtlType.Off, text: "Off", disabled: true },
@@ -316,7 +335,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   public render(): JSX.Element {
     return (
       <Stack {...subComponentStackProps}>
-        {this.ttlVisible && this.getTtlComponent()}
+        {userContext.apiType !== "Cassandra" && this.getTtlComponent()}
 
         {this.geospatialVisible && this.getGeoSpatialComponent()}