clarify copy in datastores tab (#4204)

dashboard/src/main/home/database-dashboard/DatabaseTabs.tsx

@@ -9,18 +9,18 @@ import { useDatastoreContext } from "./DatabaseContextProvider";
 import DatastoreProvisioningIndicator from "./DatastoreProvisioningIndicator";
 import ConfigurationTab from "./tabs/ConfigurationTab";
 import ConnectedAppsTab from "./tabs/ConnectedAppsTab";
-import CredentialsTab from "./tabs/CredentialsTab";
+import ConnectTab from "./tabs/ConnectTab";
 import MetricsTab from "./tabs/MetricsTab";
 import SettingsTab from "./tabs/SettingsTab";
 
 const validTabs = [
   "metrics",
-  "credentials",
+  "connect",
   "configuration",
   "settings",
   "connected-apps",
 ] as const;
-const DEFAULT_TAB = "credentials";
+const DEFAULT_TAB = "connect";
 type ValidTab = (typeof validTabs)[number];
 
 type DbTabProps = {
@@ -44,7 +44,7 @@ const DatabaseTabs: React.FC<DbTabProps> = ({ tabParam }) => {
 
   const tabs = useMemo(() => {
     return [
-      { label: "Credentials", value: "credentials" },
+      { label: "Connect", value: "connect" },
       { label: "Connected Apps", value: "connected-apps" },
       { label: "Configuration", value: "configuration" },
       { label: "Settings", value: "settings" },
@@ -67,7 +67,7 @@ const DatabaseTabs: React.FC<DbTabProps> = ({ tabParam }) => {
       />
       <Spacer y={1} />
       {match(currentTab)
-        .with("credentials", () => <CredentialsTab />)
+        .with("connect", () => <ConnectTab />)
         .with("settings", () => <SettingsTab />)
         .with("metrics", () => <MetricsTab />)
         .with("configuration", () => <ConfigurationTab />)

dashboard/src/main/home/database-dashboard/tabs/CredentialsTab.tsx → dashboard/src/main/home/database-dashboard/tabs/ConnectTab.tsx

@@ -12,7 +12,7 @@ import copy from "assets/copy-left.svg";
 
 import { useDatastoreContext } from "../DatabaseContextProvider";
 
-const CredentialsTab: React.FC = () => {
+const ConnectTab: React.FC = () => {
   const { datastore } = useDatastoreContext();
 
   const keyValues = useMemo(() => {
@@ -38,7 +38,7 @@ const CredentialsTab: React.FC = () => {
   return (
     <CredentialsTabContainer>
       <Container row>
-        <Text size={16}>Credentials</Text>
+        <Text size={16}>Application connection</Text>
       </Container>
       {keyValues.length !== 0 && (
         <>
@@ -85,21 +85,38 @@ const CredentialsTab: React.FC = () => {
               }
             )}
           </StyledInputArray>
+          <Spacer y={0.5} />
+          <Text color="helper">
+            The datastore client of your application should use these
+            environment variables to create a connection.
+          </Text>
+          {datastore.type === "ELASTICACHE" && (
+            <>
+              <Spacer y={0.5} />
+              <Text color="warner">
+                In order for connection to succeed, your datastore client must
+                connect via SSL.
+              </Text>
+            </>
+          )}
         </>
       )}
+      <Spacer y={1} />
+      <Text size={16}>Local connection</Text>
       <Spacer y={0.5} />
-      <Text size={16}>Connect</Text>
+      <Text color="warner">
+        The credentials above will only work for apps running on your cluster.
+      </Text>
       <Spacer y={0.5} />
       <Text color="helper">
-        If you have the{" "}
+        However, if you have authenticated via the{" "}
         <Link
           to="https://docs.porter.run/standard/cli/command-reference/porter-datastore-connect"
           target="_blank"
         >
           <Text>Porter CLI</Text>
         </Link>{" "}
-        installed, you can connect to this datastore locally by running the
-        following command:
+        , you can create a secure tunnel to this datastore to connect locally:
       </Text>
       <Spacer y={0.5} />
       <IdContainer>
@@ -114,7 +131,7 @@ const CredentialsTab: React.FC = () => {
   );
 };
 
-export default CredentialsTab;
+export default ConnectTab;
 
 const CredentialsTabContainer = styled.div`
   width: 100%;