|
|
@@ -1,4 +1,4 @@
|
|
|
-import React, { useState } from "react";
|
|
|
+import React, { useState, useContext } from "react";
|
|
|
import styled from "styled-components";
|
|
|
import { match } from "ts-pattern";
|
|
|
|
|
|
@@ -12,17 +12,22 @@ import PullRequestIcon from "assets/pull_request_icon.svg";
|
|
|
import DashboardHeader from "../../DashboardHeader";
|
|
|
import { ConfigurableAppList } from "./ConfigurableAppList";
|
|
|
import PreviewEnvGrid from "./PreviewEnvGrid";
|
|
|
+import { Context } from "shared/Context";
|
|
|
+import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
|
|
|
+import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
|
|
|
+import Text from "components/porter/Text";
|
|
|
|
|
|
const tabs = ["environments", "config"] as const;
|
|
|
export type ValidTab = (typeof tabs)[number];
|
|
|
|
|
|
const PreviewEnvs: React.FC = () => {
|
|
|
+ const { currentProject, currentCluster } = useContext(Context);
|
|
|
const [tab, setTab] = useState<ValidTab>("environments");
|
|
|
|
|
|
const { deploymentTargetList, isDeploymentTargetListLoading } =
|
|
|
useDeploymentTargetList({ preview: true });
|
|
|
|
|
|
- const renderContents = (): JSX.Element => {
|
|
|
+ const renderTab = (): JSX.Element => {
|
|
|
if (isDeploymentTargetListLoading) {
|
|
|
return <Loading offset="-150px" />;
|
|
|
}
|
|
|
@@ -38,30 +43,69 @@ const PreviewEnvs: React.FC = () => {
|
|
|
.exhaustive();
|
|
|
};
|
|
|
|
|
|
+ const renderContents = (): JSX.Element => {
|
|
|
+ if (currentCluster?.status === "UPDATING_UNAVAILABLE") {
|
|
|
+ return <ClusterProvisioningPlaceholder />;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (currentProject?.sandbox_enabled) {
|
|
|
+ return (
|
|
|
+ <DashboardPlaceholder>
|
|
|
+ <Text size={16}>Preview apps are not enabled for sandbox users</Text>
|
|
|
+ <Spacer y={0.5} />
|
|
|
+
|
|
|
+ <Text color={"helper"}>
|
|
|
+ Eject to your own cloud account to enable preview apps.
|
|
|
+ </Text>
|
|
|
+ </DashboardPlaceholder>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!currentProject?.db_enabled) {
|
|
|
+ return (
|
|
|
+ <DashboardPlaceholder>
|
|
|
+ <Text size={16}>Preview apps are not enabled for this project</Text>
|
|
|
+ <Spacer y={0.5} />
|
|
|
+
|
|
|
+ <Text color={"helper"}>
|
|
|
+ Reach out to support@porter.run to enable preview apps on your project.
|
|
|
+ </Text>
|
|
|
+ </DashboardPlaceholder>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <TabSelector
|
|
|
+ noBuffer
|
|
|
+ options={[
|
|
|
+ { label: "Existing Previews", value: "environments" },
|
|
|
+ { label: "Preview Templates", value: "config" },
|
|
|
+ ]}
|
|
|
+ currentTab={tab}
|
|
|
+ setCurrentTab={(tab: string) => {
|
|
|
+ if (tab === "environments") {
|
|
|
+ setTab("environments");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ setTab("config");
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Spacer y={1} />
|
|
|
+ {renderTab()}
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
return (
|
|
|
<StyledAppDashboard>
|
|
|
<DashboardHeader
|
|
|
image={PullRequestIcon}
|
|
|
- title="Preview Apps"
|
|
|
+ title="Preview apps"
|
|
|
+ capitalize={false}
|
|
|
description="Preview apps are created for each pull request. They are automatically deleted when the pull request is closed."
|
|
|
disableLineBreak
|
|
|
/>
|
|
|
- <TabSelector
|
|
|
- noBuffer
|
|
|
- options={[
|
|
|
- { label: "Existing Previews", value: "environments" },
|
|
|
- { label: "Preview Templates", value: "config" },
|
|
|
- ]}
|
|
|
- currentTab={tab}
|
|
|
- setCurrentTab={(tab: string) => {
|
|
|
- if (tab === "environments") {
|
|
|
- setTab("environments");
|
|
|
- return;
|
|
|
- }
|
|
|
- setTab("config");
|
|
|
- }}
|
|
|
- />
|
|
|
- <Spacer y={1} />
|
|
|
{renderContents()}
|
|
|
<Spacer y={5} />
|
|
|
</StyledAppDashboard>
|
jusrhee
