Rework app info to use components

[amcaplan]

WHY are these changes introduced?

1. Replaces messy string generation code with orderly use of UI-kit.
2. Hides the web section for extension-only apps.

WHAT is this pull request doing?

Instead of the mess of string generation, we reorganize the code to generate headers and data tables, then do the actual rendering in UI kit.

To make this work nicely, I added a new TabularData concept to UI kit, which does seem useful in general. It even has a parameter to dim the leftmost column, which I think creates a pleasant effect.

App with many extensions, before:

And after:

Extension-only app, before:

And after:

App with many errors, before:

And after:

How to test your changes?

Run shopify app info on various apps.

Measuring impact

How do we know this change was effective? Please choose one:

• n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	75% (-0.14% 🔻)	8849/11799
🟡	Branches	70.11% (-0.2% 🔻)	4322/6165
🟡	Functions	74.94% (-0.12% 🔻)	2318/3093
🟡	Lines	75.55% (-0.14% 🔻)	8366/11073

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / TabularData.tsx	12.5%	0%	0%	12.5%

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / info.ts	81.44% (-6.74% 🔻)	60.94% (-2.52% 🔻)	90.32%	83.15% (-7.85% 🔻)
🟢	... / app-event-watcher.ts	93.83% (-1.23% 🔻)	86.49% (-2.7% 🔻)	90.48%	98.61%
🟢	... / Alert.tsx	100%	92% (-3.24% 🔻)	100%	100%
🟢	... / FatalError.tsx	100%	86.11% (-1.39% 🔻)	100%	100%

Test suite run success

1998 tests passing in 904 suites.

Report generated by 🧪jest coverage report action from 413f784

[graygilmore]

I won't speak to the introduction of a new component but this is such a massive improvement for apps – thank you!

[graygilmore]

Just flagging that the filePath token gets rendered pretty differently depending on your terminal colors. I don't mind that it's different but I wanted to point it out!

[amcaplan]

This is very surprising! It's supposed to be italicized, I wonder what your settings are such that colors are inverted instead.

[github-actions]

Differences in type declarations

We detected differences in the type declarations generated by Typescript for this branch compared to the baseline ('main' branch). Please, review them to ensure they are backward-compatible. Here are some important things to keep in mind:

• Some seemingly private modules might be re-exported through public modules.
• If the branch is behind main you might see odd diffs, rebase main into this branch.

New type declarations

packages/cli-kit/dist/private/node/ui/components/TabularData.d.ts

import { InlineToken } from './TokenizedText.js';
import { FunctionComponent } from 'react';
export interface TabularDataProps {
    tabularData: InlineToken[][];
    firstColumnSubdued?: boolean;
}
declare const TabularData: FunctionComponent<TabularDataProps>;
export { TabularData };

Existing type declarations

packages/cli-kit/dist/private/node/ui/components/Alert.d.ts

@@ -1,9 +1,10 @@
 import { BannerType } from './Banner.js';
 import { BoldToken, InlineToken, LinkToken, TokenItem } from './TokenizedText.js';
+import { TabularDataProps } from './TabularData.js';
 import { FunctionComponent } from 'react';
 export interface CustomSection {
     title?: string;
-    body: TokenItem;
+    body: TabularDataProps | TokenItem;
 }
 export interface AlertProps {
     type: Exclude<BannerType, 'external_error'>;