AppsTab UX + fixes warptext on horizontal tabs (#3966)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

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

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>
   );

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;

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}>