From 090a977f722317c3d586c6b2eea8cf07c3ae00e4 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Fri, 26 Aug 2022 20:04:45 +0100
Subject: [PATCH] AppsTab UX + fixes warptext on horizontal tabs (#3966)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 .../components/v2/eventtype/EventAppsTab.tsx    | 17 +++++++++++++++--
 apps/web/pages/v2/event-types/[type]/index.tsx  |  8 --------
 packages/ui/v2/core/EmptyScreen.tsx             |  3 ++-
 .../core/navigation/tabs/HorizontalTabItem.tsx  |  2 +-
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/apps/web/components/v2/eventtype/EventAppsTab.tsx b/apps/web/components/v2/eventtype/EventAppsTab.tsx
index 3e2bcddd3d..7615ee379b 100644
--- a/apps/web/components/v2/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/v2/eventtype/EventAppsTab.tsx
@@ -6,7 +6,8 @@ import { FormattedNumber, IntlProvider } from "react-intl";
 
 import { SelectGifInput } from "@calcom/app-store/giphy/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, Select, Switch, TextField } from "@calcom/ui/v2";
+import { Icon } from "@calcom/ui";
+import { Alert, Button, EmptyScreen, Select, Switch, TextField } from "@calcom/ui/v2";
 
 const AppCard = ({
   logo,
@@ -70,8 +71,20 @@ export const EventAppsTab = ({
 
   const { t } = useLocale();
 
+  const installedApps = [hasPaymentIntegration, hasGiphyIntegration].filter(Boolean).length;
+
+  if (installedApps === 0) {
+    return (
+      <EmptyScreen
+        Icon={Icon.FiGrid}
+        headline={t("empty_installed_apps_headline")}
+        description={t("empty_installed_apps_description")}
+        buttonRaw={<Button href="/apps">{t("empty_installed_apps_button")} </Button>}
+      />
+    );
+  }
   return (
-    <div className="before:border-0">
+    <div className="pt-4 before:border-0">
       {/* TODO:Strip isnt fully setup yet  */}
       {hasPaymentIntegration && (
         <AppCard
diff --git a/apps/web/pages/v2/event-types/[type]/index.tsx b/apps/web/pages/v2/event-types/[type]/index.tsx
index 125133eb7f..c791614067 100644
--- a/apps/web/pages/v2/event-types/[type]/index.tsx
+++ b/apps/web/pages/v2/event-types/[type]/index.tsx
@@ -223,14 +223,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
         }}
         className="space-y-6">
         {tabMap[tabName]}
-        <div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
-          <Button href="/event-types" color="secondary" tabIndex={-1}>
-            {t("cancel")}
-          </Button>
-          <Button type="submit" data-testid="update-eventtype" disabled={updateMutation.isLoading}>
-            {t("update")}
-          </Button>
-        </div>
       </Form>
     </EventTypeSingleLayout>
   );
diff --git a/packages/ui/v2/core/EmptyScreen.tsx b/packages/ui/v2/core/EmptyScreen.tsx
index c04a0ba5e5..7d81274a44 100644
--- a/packages/ui/v2/core/EmptyScreen.tsx
+++ b/packages/ui/v2/core/EmptyScreen.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { Icon } from "react-feather";
+import { IconType } from "react-icons";
 
 import { SVGComponent } from "@calcom/types/SVGComponent";
 
@@ -13,7 +14,7 @@ export default function EmptyScreen({
   buttonOnClick,
   buttonRaw,
 }: {
-  Icon: SVGComponent | Icon;
+  Icon: SVGComponent | Icon | IconType;
   headline: string;
   description: string | React.ReactElement;
   buttonText?: string;
diff --git a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
index 76a7ce81f2..85634ac243 100644
--- a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
@@ -53,7 +53,7 @@ const HorizontalTabItem = ({ name, href, tabName, ...props }: HorizontalTabItemP
         onClick={onClick}
         className={classNames(
           isCurrent ? "bg-gray-200 text-gray-900" : " text-gray-600 hover:bg-gray-100 hover:text-gray-900 ",
-          "mb-2 inline-flex items-center justify-center rounded-md py-[10px] px-4 text-sm font-medium leading-4 md:mb-0",
+          "mb-2 inline-flex items-center justify-center whitespace-nowrap rounded-md py-[10px] px-4 text-sm font-medium leading-4 md:mb-0",
           props.disabled && "pointer-events-none !opacity-30"
         )}
         aria-current={isCurrent ? "page" : undefined}>