Skip to content

Commit

Permalink
clarify copy in datastores tab (#4204)
Browse files Browse the repository at this point in the history
  • Loading branch information
Feroze Mohideen authored Jan 26, 2024
1 parent 5438783 commit 02035d8
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 12 deletions.
10 changes: 5 additions & 5 deletions dashboard/src/main/home/database-dashboard/DatabaseTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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" },
Expand All @@ -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 />)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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 && (
<>
Expand Down Expand Up @@ -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>
Expand All @@ -114,7 +131,7 @@ const CredentialsTab: React.FC = () => {
);
};

export default CredentialsTab;
export default ConnectTab;

const CredentialsTabContainer = styled.div`
width: 100%;
Expand Down

0 comments on commit 02035d8

Please sign in to comment.