Fixing app details disconnect button and number of apps #4305

leog · 2022-09-08T16:31:16Z

What does this PR do?

Trying to fix #4269 and #4257

Environment: Staging(main branch) / Production

Type of change

Bug fix (non-breaking change which fixes an issue)

How should this be tested?

Go to an installed app details page and see the Disconnect button to remove it. Also, trying to fix number of apps in categories in v2 where it should show more apps under certain categories.

vercel · 2022-09-08T16:31:19Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
cal	❌ Failed (Inspect)		Sep 13, 2022 at 6:45PM (UTC)

zlwaterfield · 2022-09-09T13:54:59Z

Tried locally, and I'm not seeing the installed button at all on the app detail page. I do not have this app installed. I do see the button on main.

leog · 2022-09-09T15:44:46Z

apps/web/components/App.tsx

@@ -66,7 +77,7 @@ const Component = ({
        });
        if (result.status === 200) {
          const res = await result.json();
-          setInstalledAppCount(res.count);
+          setExistingCredentials(res.credentials);


We now return credentials, not just the count, in order to pass down the credential ID to the DIsconnect button.

leog · 2022-09-09T15:46:20Z

apps/web/pages/api/apps/installed.ts

@@ -14,24 +14,24 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)



Had to rename the file as /api/app-store was being used to get static resources under /public/app-store so there was a clash resulting in 404s.

leog · 2022-09-09T15:47:26Z

apps/web/pages/v2/apps/index.tsx

-    select: {
-      categories: true,
-    },
-  });


Removed getting all categories from the database in favor of filtering down the categories existent in the available apps returned by the App Registry.

leog · 2022-09-09T15:49:47Z

apps/web/playwright/app-store.e2e.ts

@@ -11,6 +11,7 @@ test.describe("App Store - Authed", () => {
    await page.goto("/apps");
    await page.click('[data-testid="app-store-category-calendar"]');
    await page.click('[data-testid="app-store-app-card-apple-calendar"]');
+    await page.waitForResponse((resp) => resp.url().includes("/api/apps") && resp.status() === 200);


Test was not failing in the past as the API call to get credentials count was throwing a 404, resulting in the Install button shown either way, to have the test find it and continue with the flow. Not we explicitly wait for the now working API to continue, otherwise no button will be available to be clicked.

leog · 2022-09-09T15:49:55Z

apps/web/playwright/app-store.e2e.ts

@@ -23,6 +24,7 @@ test.describe("App Store - Unauthed", () => {
    await page.waitForSelector("[data-testid=dashboard-shell]");
    await page.click('[data-testid="app-store-category-calendar"]');
    await page.click('[data-testid="app-store-app-card-apple-calendar"]');
+    await page.waitForResponse((resp) => resp.url().includes("/api/apps") && resp.status() === 200);


Same as before.

leog · 2022-09-09T15:50:20Z

packages/ui/v2/core/apps/AllApps.tsx

-              selectedCategory === null ? "bg-gray-200" : "bg-gray-50",
-              "rounded-md px-4 py-2.5 text-sm font-medium text-gray-900 hover:cursor-pointer hover:bg-gray-200"
+              selectedCategory === null ? "bg-gray-900 text-gray-50" : "bg-gray-50 text-gray-900",
+              "rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer hover:bg-gray-900 hover:text-gray-50"


Some tweaks to the categories strip in the App Store, to have a black background on selected or hover.

leog · 2022-09-09T15:50:30Z

packages/ui/v2/core/apps/AllApps.tsx

@@ -104,8 +104,8 @@ export default function AllApps({ apps }: AllAppsPropsType) {
                }
              }}
              className={classNames(
-                selectedCategory === cat ? "bg-gray-200" : "bg-gray-50",
-                "rounded-md px-4 py-2.5 text-sm font-medium text-gray-900 hover:cursor-pointer hover:bg-gray-200"
+                selectedCategory === cat ? "bg-gray-900 text-gray-50" : "bg-gray-50 text-gray-900",


Same as before.

leog · 2022-09-09T15:51:33Z

packages/ui/v2/core/apps/AllApps.tsx

+            selectedCategory !== null
+              ? app.categories
+                ? app.categories.includes(selectedCategory)
+                : app.category === selectedCategory


Just in case there are apps with category and not a list of categories. But the main issue regarding app count not correct was fixed by filtering existent apps from app registry, not taking into consideration all categories in the database.

leog · 2022-09-09T15:53:00Z

packages/ui/v2/modules/integrations/DisconnectIntegration.tsx

 }: {
  credentialId: number;
  label: string;
  trashIcon?: boolean;
  isGlobal?: boolean;
+  onSuccess?: () => void;


Had to add this because in some cases, the disconnect action should for example, redirect the user somewhere else. See https://github.com/calcom/cal.com/pull/4305/files#diff-ca24dc6387663c3bf0b33e52827cb05585264596d8f9b65b02c56565b403dca2R160

* fix event types skeleton loader * fix margin in event types * fix skeleton loader in bookings * add skeleton loader for workflow list * add skeleton loader for editing page * fix border radius of skeleton loader * fix mobile view workflow list * add mobile view for skeleton list * make multi select full with in mobile view * mobile view for edit skeleton loader Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

zomars

Adding to my review I would suggest taking this opportunity to convert /api/apps/installed to a tRPC query.

apps/web/pages/api/apps/installed.ts

apps/web/components/v2/apps/App.tsx

* add team profile * first version for team members page * finish up design of member list item * fix dialog buttons * add missing seats and upgrading information * add v2 dialog for changing role * finish basic version of member's schedule * remove modalContainer * design fixes team profile page * show only team info to non admins * allow all member to check availabilities * make time available heading sticky * add dropdown for mobile view * create team appearance view * finish appearance page * use settings layout and add danger zone for member * add fallback logo * Add teams to sidebar and fix UI * add team invitations * Clean up * code clean up * add impersontation and disable autofocus on calendar * improve team info * refactor teaminvitelist code and fix leaving a team * add team pages to settings shell * add link to create new team * small fixes * clean up comments * V2 Multi-select (Team Select) (#4324) * --init * design improved * further fine tuning * more fixes * removed extra JSX tag * added story * NIT * revert to use of CheckedTeamSelect * Removes comments Co-authored-by: Peer Richelsen <peeroke@gmail.com> * fix: toggle alligment (#4361) * fix: add checked tranform for switch (#4357) * fixed input size on mobile, fixed settings (#4360) * fix image uploader button in safari * code clean up * fixing type errors * Moved v2 team components to features Adds deprecation notices * Update SettingsLayout.tsx * Migrated to features and build fixes Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Joe Au-Yeung <j.auyeung419@gmail.com> Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>

Co-authored-by: Omar López <zomars@me.com>

* added styles from external stylesheet * fixed a border color * codacy improvements * more codacy fix * codacy why u be so dumb

leog · 2022-09-13T18:43:31Z

Let's continue review in the main branch, which is why I can merge without explicit approval 😅

* First commit * Additional changes to meet designs * Fixing app details disconnect button App Store category filtering fixed * Further changes for the fix * Progress on various fronts * Fixing e2e tests * second try fixing e2e tests * Yet again trying to fix e2e tests * Missing action for non-credential flow * Adding missing Add button * Final tweaks and fixes * Missing button in empty screen * fix border radius * EmptyScreen for calendar * Dynamic installed app return page with highlights + other fixes * Removing unneeded code * App Store V2 Improvements over feat/v2-installed-apps (#4379) * Removing unneeded text * Fixing app details disconnect button and number of apps (#4305) * V2 Settings Shell - Add Teams Section & UI fixes (#4347) * Add teams to sidebar and fix UI * Clean up * V2 Multi-select (Team Select) (#4324) * --init * design improved * further fine tuning * more fixes * removed extra JSX tag * added story * NIT * revert to use of CheckedTeamSelect * Removes comments Co-authored-by: Peer Richelsen <peeroke@gmail.com> * fix: toggle alligment (#4361) * fix: add checked tranform for switch (#4357) * fixed input size on mobile, fixed settings (#4360) * fixing type errors * Mobile fixes * Tests fixes Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: zomars <zomars@me.com> * Feat/team owner booking (#3999) * WIP: testing queries * feat: add badge * fix: get only id * refactor: get bookings query * WIP: display attendees added * fix: add type * Adds skeleton loader to workflows (#4402) * fix event types skeleton loader * fix margin in event types * fix skeleton loader in bookings * add skeleton loader for workflow list * add skeleton loader for editing page * fix border radius of skeleton loader * fix mobile view workflow list * add mobile view for skeleton list * make multi select full with in mobile view * mobile view for edit skeleton loader Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * V2 settings teams (Profil, Members, Appearance View) (#4350) * add team profile * first version for team members page * finish up design of member list item * fix dialog buttons * add missing seats and upgrading information * add v2 dialog for changing role * finish basic version of member's schedule * remove modalContainer * design fixes team profile page * show only team info to non admins * allow all member to check availabilities * make time available heading sticky * add dropdown for mobile view * create team appearance view * finish appearance page * use settings layout and add danger zone for member * add fallback logo * Add teams to sidebar and fix UI * add team invitations * Clean up * code clean up * add impersontation and disable autofocus on calendar * improve team info * refactor teaminvitelist code and fix leaving a team * add team pages to settings shell * add link to create new team * small fixes * clean up comments * V2 Multi-select (Team Select) (#4324) * --init * design improved * further fine tuning * more fixes * removed extra JSX tag * added story * NIT * revert to use of CheckedTeamSelect * Removes comments Co-authored-by: Peer Richelsen <peeroke@gmail.com> * fix: toggle alligment (#4361) * fix: add checked tranform for switch (#4357) * fixed input size on mobile, fixed settings (#4360) * fix image uploader button in safari * code clean up * fixing type errors * Moved v2 team components to features Adds deprecation notices * Update SettingsLayout.tsx * Migrated to features and build fixes Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Joe Au-Yeung <j.auyeung419@gmail.com> Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com> * add rainbowkit form to v2 event-types (#4349) Co-authored-by: Omar López <zomars@me.com> * v1.9.5 * Fix/daterangepicker css (#4418) * added styles from external stylesheet * fixed a border color * codacy improvements * more codacy fix * codacy why u be so dumb * dynamic import rainbow (only if installed) (#4409) * Tidyup app cards (#4428) * Moving API to trpc query Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: Joe Au-Yeung <j.auyeung419@gmail.com> Co-authored-by: hexcowboy <accounts@cowboy.dev> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Abstracting one level the redirectUrl for apps * Moving enum to a better/working place * Another try * Missing code * Correcting categories look in apps page * ui tweaks * Breadcrumb wrong font-weight * Toast is v1 component and copy updated * Fix TS error * Fix TS error * Update AppsLayout.tsx * Update InstalledAppsLayout.tsx * translations and disconnect button with icon * Reverting file * Test e2e fix on app-store * Missing testid in button * Fix to click categories that are visible * Going directly to category page as a patch * Fixing stripe e2e test * Disconnect is now empty with icon * Disabled stripe test for now as the navigation is completely changed Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: Joe Au-Yeung <j.auyeung419@gmail.com> Co-authored-by: hexcowboy <accounts@cowboy.dev> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>

leog added this to the v.2.0 milestone Sep 8, 2022

leog requested a review from a team September 8, 2022 16:31

leog self-assigned this Sep 8, 2022

leog linked an issue Sep 8, 2022 that may be closed by this pull request

"Remove" button in app store when app is already installed #4257

Closed

vercel bot deployed to Preview September 8, 2022 16:36 View deployment

vercel bot deployed to Preview September 8, 2022 17:33 View deployment

vercel bot had a problem deploying to Preview September 8, 2022 17:58 Failure

vercel bot had a problem deploying to Preview September 8, 2022 18:15 Failure

vercel bot deployed to Preview September 8, 2022 22:08 View deployment

vercel bot deployed to Preview September 9, 2022 01:10 View deployment

vercel bot deployed to Preview September 9, 2022 14:04 View deployment

vercel bot deployed to Preview September 9, 2022 14:47 View deployment

vercel bot deployed to Preview September 9, 2022 15:17 View deployment

leog commented Sep 9, 2022

View reviewed changes

leog added the ♻️ autoupdate tells kodiak to keep this branch up-to-date label Sep 9, 2022

leog mentioned this pull request Sep 9, 2022

Feat: v2 App Store / Installed Apps #4220

Merged

1 task

vercel bot deployed to Preview September 9, 2022 19:11 View deployment

vercel bot deployed to Preview September 10, 2022 10:08 View deployment

vercel bot deployed to Preview September 10, 2022 17:45 View deployment

vercel bot deployed to Preview September 10, 2022 18:03 View deployment

CarinaWolli and others added 2 commits September 12, 2022 16:51

Merge branch 'main' into fix/app-disconnect-filtering

729d511

vercel bot deployed to Preview September 12, 2022 22:00 View deployment

zomars requested changes Sep 12, 2022

View reviewed changes

apps/web/pages/api/apps/installed.ts Outdated Show resolved Hide resolved

apps/web/components/v2/apps/App.tsx Outdated Show resolved Hide resolved

CarinaWolli and others added 6 commits September 12, 2022 17:04

Merge branch 'main' into fix/app-disconnect-filtering

06ec19c

add rainbowkit form to v2 event-types (#4349)

6b2d675

Co-authored-by: Omar López <zomars@me.com>

Merge branch 'main' into fix/app-disconnect-filtering

5f159d6

v1.9.5

140bb38

Merge branch 'main' into fix/app-disconnect-filtering

3c65f6b

vercel bot deployed to Preview September 12, 2022 22:22 View deployment

alishaz-polymath and others added 2 commits September 13, 2022 09:32

Fix/daterangepicker css (#4418)

b2d3432

* added styles from external stylesheet * fixed a border color * codacy improvements * more codacy fix * codacy why u be so dumb

Merge branch 'main' into fix/app-disconnect-filtering

fd1031e

vercel bot had a problem deploying to Preview September 13, 2022 09:39 Failure

hexcowboy and others added 2 commits September 13, 2022 12:59

dynamic import rainbow (only if installed) (#4409)

5db525a

Merge branch 'main' into fix/app-disconnect-filtering

8132f80

vercel bot had a problem deploying to Preview September 13, 2022 11:06 Failure

sean-brydon and others added 2 commits September 13, 2022 14:14

Tidyup app cards (#4428)

2292343

Merge branch 'main' into fix/app-disconnect-filtering

6c68605

leog changed the base branch from main to feat/v2-installed-apps September 13, 2022 14:19

vercel bot had a problem deploying to Preview September 13, 2022 14:22 Failure

Moving API to trpc query

72e3a0c

leog requested a review from zomars September 13, 2022 18:40

Merge branch 'feat/v2-installed-apps' into fix/app-disconnect-filtering

3e8867c

leog merged commit 8688c10 into feat/v2-installed-apps Sep 13, 2022

leog deleted the fix/app-disconnect-filtering branch September 13, 2022 18:43

vercel bot had a problem deploying to Preview September 13, 2022 18:47 Failure

leog linked an issue Sep 13, 2022 that may be closed by this pull request

/app-store - 2 small ui changes #4416

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixing app details disconnect button and number of apps #4305

Fixing app details disconnect button and number of apps #4305

leog commented Sep 8, 2022

vercel bot commented Sep 8, 2022 •

edited

Loading

zlwaterfield commented Sep 9, 2022

leog Sep 9, 2022

leog Sep 9, 2022

leog Sep 9, 2022

leog Sep 9, 2022

leog Sep 9, 2022

leog Sep 9, 2022

leog Sep 9, 2022

leog Sep 9, 2022

leog Sep 9, 2022

zomars left a comment •

edited

Loading

leog commented Sep 13, 2022

		@@ -14,24 +14,24 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)

Fixing app details disconnect button and number of apps #4305

Fixing app details disconnect button and number of apps #4305

Conversation

leog commented Sep 8, 2022

What does this PR do?

Type of change

How should this be tested?

vercel bot commented Sep 8, 2022 • edited Loading

zlwaterfield commented Sep 9, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zomars left a comment • edited Loading

Choose a reason for hiding this comment

leog commented Sep 13, 2022

vercel bot commented Sep 8, 2022 •

edited

Loading

zomars left a comment •

edited

Loading