consolidate conditional tab rendering logic + feature preview (#3098)

dashboard/src/components/repo-selector/DetectContentsList.tsx

@@ -19,6 +19,7 @@ import Modal from "components/porter/Modal";
 import Input from "components/porter/Input";
 import Text from "components/porter/Text";
 import { set } from "lodash";
+import Link from "../porter/Link";
 
 interface AutoBuildpack {
   name?: string;
@@ -310,19 +311,17 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
       <Spacer y={1} />
       <span>
         <Text color="helper">
-          We were unable to find porter.yaml in your root directory. We
-          recommend that you
-        </Text>{" "}
-        <a
-          href="https://docs.porter.run/deploying-applications/application-porter-yaml-reference"
+          We were unable to find <Code>porter.yaml</Code> in your root directory. We
+          recommend that you add a <Code>porter.yaml</Code> file to your root directory
+          or specify the path here.
+        </Text>
+        <Link
+          to="https://docs.porter.run/standard/deploying-applications/writing-porter-yaml"
           target="_blank"
-          rel="noopener noreferrer"
+          hasunderline
         >
-          add porter.yaml
-        </a>{" "}
-        <Text color="helper">
-          to your root directory or specify the subdirectory path here.
-        </Text>
+          Using porter.yaml
+        </Link>
       </span>
     </div>
   );
@@ -409,6 +408,10 @@ const DetectContentsList: React.FC<PropsType> = (props) => {
 
 export default DetectContentsList;
 
+const Code = styled.span`
+  font-family: monospace;
+`;
+
 const FlexWrapper = styled.div`
   position: absolute;
   bottom: 28px;

dashboard/src/main/home/app-dashboard/AppDashboard.tsx

@@ -51,7 +51,7 @@ const namespaceBlacklist = [
 ];
 
 const AppDashboard: React.FC<Props> = ({ }) => {
-  const { currentProject, currentCluster } = useContext(Context);
+  const { currentProject, currentCluster, setFeaturePreview } = useContext(Context);
   const [apps, setApps] = useState([]);
   const [charts, setCharts] = useState([]);
   const [error, setError] = useState(null);
@@ -209,7 +209,12 @@ const AppDashboard: React.FC<Props> = ({ }) => {
           <Container row spaced>
             <SearchBar
               value={searchValue}
-              setValue={setSearchValue}
+              setValue={(x) => {
+                if (x === "open_sesame") {
+                  setFeaturePreview(true);
+                }
+                setSearchValue(x);
+              }}
               placeholder="Search applications . . ."
               width="100%"
             />

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -67,7 +67,7 @@ const icons = [
 ];
 
 const ExpandedApp: React.FC<Props> = ({ ...props }) => {
-  const { currentCluster, currentProject, setCurrentError } = useContext(
+  const { currentCluster, currentProject, setCurrentError, featurePreview } = useContext(
     Context
   );
   const [isLoading, setIsLoading] = useState(true);
@@ -994,47 +994,21 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
               <Spacer y={1} />
               <TabSelector
                 options={
-                  appData.app.git_repo_id
-                    ? hasBuiltImage
-                      ? [
-                        { label: "Overview", value: "overview" },
-                        // { label: "Activity", value: "activity" },
-                        { label: "Events", value: "events" },
-                        { label: "Logs", value: "logs" },
-                        { label: "Metrics", value: "metrics" },
-                        { label: "Debug", value: "status" },
-                        { label: "Pre-deploy logs", value: "pre-deploy" },
-                        {
-                          label: "Environment",
-                          value: "environment-variables",
-                        },
-                        { label: "Build settings", value: "build-settings" },
-                        { label: "Settings", value: "settings" },
-                      ]
-                      : [
-                        { label: "Overview", value: "overview" },
-                        // { label: "Activity", value: "activity" },
-                        { label: "Pre-deploy logs", value: "pre-deploy" },
-                        {
-                          label: "Environment",
-                          value: "environment-variables",
-                        },
-                        { label: "Build settings", value: "build-settings" },
-                        { label: "Settings", value: "settings" },
-                      ]
-                    : [
-                      { label: "Overview", value: "overview" },
-                      // { label: "Activity", value: "activity" },
-                      { label: "Events", value: "events" },
-                      { label: "Logs", value: "logs" },
-                      { label: "Metrics", value: "metrics" },
-                      { label: "Debug", value: "status" },
-                      {
-                        label: "Environment",
-                        value: "environment-variables",
-                      },
-                      { label: "Settings", value: "settings" },
-                    ]
+                  [
+                    { label: "Overview", value: "overview" },
+                    featurePreview && { label: "Activity", value: "activity" },
+                    hasBuiltImage && { label: "Events", value: "events" },
+                    hasBuiltImage && { label: "Logs", value: "logs" },
+                    hasBuiltImage && { label: "Metrics", value: "metrics" },
+                    hasBuiltImage && { label: "Debug", value: "status" },
+                    appData.app.git_repo_id && { label: "Pre-deploy logs", value: "pre-deploy" },
+                    {
+                      label: "Environment",
+                      value: "environment-variables",
+                    },
+                    appData.app.git_repo_id && { label: "Build settings", value: "build-settings" },
+                    { label: "Settings", value: "settings" },
+                  ].filter(x => x)
                 }
                 currentTab={tab}
                 setCurrentTab={(tab: string) => {

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -612,7 +612,7 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
               >
                 Deploy app
               </Button>,
-            ]}
+            ].filter((x) => x)}
           />
           <Spacer y={3} />
         </StyledConfigureTemplate>

dashboard/src/main/home/modals/AccountSettingsModal.tsx

@@ -11,6 +11,7 @@ import Helper from "components/form-components/Helper";
 
 import TabSelector from "components/TabSelector";
 import Link from "components/porter/Link";
+import Spacer from "components/porter/Spacer";
 
 interface GithubAppAccessData {
   username?: string;
@@ -62,9 +63,10 @@ const AccountSettingsModal = () => {
             <ListWrapper>
               <Helper>
                 No connected repositories found.
-                <A href={"/api/integrations/github-app/oauth"}>
-                  Authorize Porter to view your repositories.
-                </A>
+                <Spacer inline width="5px" />
+                <Link target="_blank" to={"/api/integrations/github-app/oauth"} hasunderline>
+                  Authorize Porter to view your repositories
+                </Link>
               </Helper>
             </ListWrapper>
           )}
@@ -80,9 +82,14 @@ const AccountSettingsModal = () => {
                 <ListWrapper>
                   <Helper>
                     No connected repositories found.
-                    <A href={"/api/integrations/github-app/install"}>
+                    <Spacer inline width="5px" />
+                    <Link 
+                      target="_blank"
+                      to={"/api/integrations/github-app/install"}
+                      hasunderline
+                    >
                       Install Porter in your repositories
-                    </A>
+                    </Link>
                   </Helper>
                 </ListWrapper>
               ) : (

dashboard/src/main/home/navbar/Navbar.tsx

@@ -27,8 +27,6 @@ class Navbar extends Component<PropsType, StateType> {
     if (this.state.showDropdown) {
       let version = this.context?.capabilities?.version;
       let userEmail = this.context.user && this.context.user.email;
-      let isLongEmail = userEmail && userEmail.length > 25;
-      userEmail = "sarntdenadtendearnetdne@gmail.com"
       return (
         <>
           <CloseOverlay

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -11,6 +11,9 @@ import infra from "assets/infra.png";
 
 import { Context } from "shared/Context";
 
+import Text from "components/porter/Text";
+import Container from "components/porter/Container";
+import Spacer from "components/porter/Spacer";
 import Clusters from "./Clusters";
 import ProjectSectionContainer from "./ProjectSectionContainer";
 import { RouteComponentProps, withRouter } from "react-router";
@@ -265,6 +268,12 @@ class Sidebar extends Component<PropsType, StateType> {
           <br />
 
           {this.renderProjectContents()}
+          {this.context.featurePreview && (
+            <Container row>
+              <Spacer inline width="25px" />
+              <Text color="helper">(Feature preview enabled)</Text>
+            </Container>
+          )}
         </StyledSidebar>
       </>
     );