Fix missing sylaps icon in admin/apps (#8190)

* Fi missing sylaps icon in admin/apps and remove usage of imageSrc

* Remove imageSrc from googleCalendar and verify that logo is still shown

* Use logo in video apps location select:

* Remove imageSrc from templates

---------

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

apps/web/components/getting-started/components/CalendarItem.tsx

@@ -6,17 +6,17 @@ import { Button } from "@calcom/ui";
 interface ICalendarItem {
   title: string;
   description?: string;
-  imageSrc: string;
+  logo: string;
   type: App["type"];
 }
 
 const CalendarItem = (props: ICalendarItem) => {
-  const { title, imageSrc, type } = props;
+  const { title, logo, type } = props;
   const { t } = useLocale();
   return (
     <div className="flex flex-row items-center justify-between p-5">
       <div className="flex items-center space-x-3">
-        <img src={imageSrc} alt={title} className="h-8 w-8" />
+        <img src={logo} alt={title} className="h-8 w-8" />
         <p className="text-sm font-bold">{title}</p>
       </div>
       <InstallAppButtonWithoutPlanCheck

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

@@ -31,13 +31,13 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         firstCalendar &&
         firstCalendar.integration &&
         firstCalendar.integration.title &&
-        firstCalendar.integration.imageSrc && (
+        firstCalendar.integration.logo && (
           <>
             <List className="bg-default border-subtle rounded-md border p-0 dark:bg-black">
               <ConnectedCalendarItem
                 key={firstCalendar.integration.title}
                 name={firstCalendar.integration.title}
-                logo={firstCalendar.integration.imageSrc}
+                logo={firstCalendar.integration.logo}
                 externalId={
                   firstCalendar && firstCalendar.calendars && firstCalendar.calendars.length > 0
                     ? firstCalendar.calendars[0].externalId
@@ -59,12 +59,12 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
           {queryIntegrations.data &&
             queryIntegrations.data.items.map((item) => (
               <li key={item.title}>
-                {item.title && item.imageSrc && (
+                {item.title && item.logo && (
                   <CalendarItem
                     type={item.type}
                     title={item.title}
                     description={item.description}
-                    imageSrc={item.imageSrc}
+                    logo={item.logo}
                   />
                 )}
               </li>

packages/app-store/around/config.json

@@ -4,7 +4,6 @@
   "title": "Around",
   "slug": "around",
   "type": "around_video",
-  "imageSrc": "/api/app-store/around/icon.svg",
   "logo": "/api/app-store/around/icon.svg",
   "url": "https://cal.com/apps/around",
   "variant": "conferencing",

packages/app-store/googlecalendar/_metadata.ts

@@ -9,7 +9,6 @@ export const metadata = {
   installed: !!(process.env.GOOGLE_API_CREDENTIALS && validJson(process.env.GOOGLE_API_CREDENTIALS)),
   type: "google_calendar",
   title: "Google Calendar",
-  imageSrc: "/api/app-store/googlecalendar/icon.svg",
   variant: "calendar",
   category: "calendar",
   categories: ["calendar"],

packages/app-store/sylapsvideo/config.json

@@ -4,8 +4,8 @@
   "title": "Sylaps",
   "slug": "sylaps",
   "type": "sylaps_video",
-  "imageSrc": "/api/app-store/sylaps/icon.svg",
-  "logo": "/api/app-store/sylaps/icon.svg",
+  "imageSrc": "icon.svg",
+  "logo": "icon.svg",
   "url": "https://cal.com/apps/sylaps",
   "variant": "conferencing",
   "categories": ["video"],

packages/app-store/templates/basic/config.json

@@ -3,7 +3,6 @@
   "name": "Basic",
   "slug": "basic",
   "type": "basic_other",
-  "imageSrc": "icon.svg",
   "logo": "icon.svg",
   "url": "https://example.com/link",
   "variant": "other",

packages/app-store/templates/booking-pages-tag/config.json

@@ -2,7 +2,6 @@
   "name": "Booking Pages Tag",
   "slug": "booking-pages-tag",
   "type": "booking-pages-tag_analytics",
-  "imageSrc": "icon.svg",
   "logo": "icon.svg",
   "url": "https://example.com/link",
   "variant": "analytics",

packages/app-store/templates/event-type-app-card/config.json

@@ -2,7 +2,6 @@
   "name": "EventType AppCard",
   "slug": "event-type-app-card",
   "type": "event-type-app-card_other",
-  "imageSrc": "icon.svg",
   "logo": "icon.svg",
   "url": "https://example.com/link",
   "variant": "other",

packages/app-store/templates/event-type-location-video-static/config.json

@@ -3,7 +3,6 @@
   "name": "EventType Location Video - Static",
   "slug": "event-type-location-video-static",
   "type": "event-type-location-video-static_video",
-  "imageSrc": "icon.svg",
   "logo": "icon.svg",
   "url": "https://example.com/link",
   "variant": "conferencing",

packages/app-store/templates/general-app-settings/config.json

@@ -2,7 +2,6 @@
   "name": "General App Settings",
   "slug": "general-app-settings",
   "type": "general-app-settings_other",
-  "imageSrc": "icon.svg",
   "logo": "icon.svg",
   "url": "https://example.com/link",
   "variant": "other",

packages/app-store/templates/link-as-an-app/config.json

@@ -3,7 +3,6 @@
   "name": "Link as An App",
   "slug": "link-as-an-app",
   "type": "link-as-an-app_other",
-  "imageSrc": "icon.svg",
   "logo": "icon.svg",
   "url": "https://example.com/link",
   "variant": "other",

packages/app-store/utils.ts

@@ -60,7 +60,7 @@ export function getLocationGroupedOptions(integrations: ReturnType<typeof getApp
       let category =
         app.categories.length >= 2 ? app.categories.find((category) => category !== "video") : app.category;
       if (!category) category = "video";
-      const option = { ...app.locationOption, icon: app.imageSrc };
+      const option = { ...app.locationOption, icon: app.logo };
       if (apps[category]) {
         apps[category] = [...apps[category], option];
       } else {