feat(apps): frontend apps #9831

mariusandra · 2022-05-18T08:27:54Z

Changes

Last step in making frontend apps a reality
Builds upon
Serves the transpiled frontend code to be used in the frontend.
Adds an "edit source" button next to the apps in the sidebar

How did you test this code?

WIP

…plete

mariusandra · 2022-05-20T08:43:41Z

Definitely ready for a review now.

yakkomajuri · 2022-05-20T11:42:39Z

frontend/src/layout/navigation/SideBar/SideBar.tsx

+                                    to={urls.plugins()}
+                                />
+                            )}
+                            <SideBarApps />


non-blocker: just leaving this here based on our sync discussion - when (under our current setup) do I see apps but can't use the apps browser/config page?

👍 , bug fixed

The apps themselves should remain accessible for all users, even if they can't see the "browse apps" page for whatever reason (all I know is the API can say you have no access to the page 🤷). In this restricted case, an admin sets up the apps, and you as a user can then use them.

We'll need to go granular than that eventually, but not in this feature flagged v0.1.

yakkomajuri · 2022-05-20T11:45:41Z

frontend/src/layout/navigation/SideBar/SideBarApps.tsx

+                    key={id}
+                    icon={<IconExtension />}
+                    title={title || `App #${id}`}
+                    identifier={currentLocation.pathname === urls.frontendApp(id) ? Scene.FrontendAppScene : 'nope'}


worth a comment, by your own admission @mariusandra this is "dodgy"

yakkomajuri · 2022-05-20T11:56:30Z

posthog/api/plugin.py

+
+        obj: Dict[str, Any] = {}
+        if not plugin_source:
+            obj = {"no_frontend": True}


nit: I personally would pass a "status" e.g. status: no_frontend

obj = {"no_frontend": True}

if ('no_frontend' in app || 'transpiling' in app) { ... }

vs

obj = {"status": "no_frontend"}

if (obj.status === 'no_frontend' || obj.status === 'transpiling') { ... }

Dunno... 🤷 😆

posthog/api/test/test_plugin.py

Twixes

A few minor comments but overall this is looking good!

As for the open questions:

I would say for now @posthog/apps-common is good enough. We should make it clear that this is a beta feature and the APIs may change, but this part definitely can be rearchitected easily.
As for local development, we do already have a local filesystem installation option - perhaps we could just make this work well with frontend apps? It'd actually make it easy to use things like AdHocInsight, as opposed to a separate create-react-app-like env.
I concur we need to expose some type definitions:
Showing the header automatically is definitely safer. If it turns out it needs to be disabled in some situation, we can make that configurable in plugin.json.

frontend/src/layout/navigation/SideBar/SideBarApps.tsx

Twixes · 2022-05-20T11:21:45Z

frontend/src/layout/navigation/SideBar/SideBarApps.tsx

+                            ? {
+                                  identifier: 'app-menu',
+                                  onClick: () => setOpenAppMenu(openAppMenu === id ? null : id),
+                                  popup: {


Do we plan to put any other options in this menu? If, not I guess it could be just an "Edit" icon

I think yes. I also think having a lot of edit icons below one another makes for a very strong visual "look at me" signal that we want to avoid. A subtle menu is better.

Some things we can add in the menu:

Unpin from sidebar (and move to a "browse apps" dropdown menu, similar to "pinned" dashboards now)

Uninstall

Configure

frontend/src/layout/navigation/SideBar/SideBarApps.tsx

frontend/src/scenes/apps/types.ts

frontend/src/scenes/plugins/source/formatSource.ts

frontend/src/scenes/plugins/source/PluginSource.tsx

mariusandra · 2022-05-20T14:15:57Z

Most things addressed. Ready for another look!

I also added a "kill-switch". Now if the flag is turned off, no apps are loaded at all. Previously they just weren't shown in the sidebar, but we did still import and load the code. Now no longer. You'll need to reload after enabling the flag, but it's worth the safety guarantees.

As for local development, we do already have a local filesystem installation option - perhaps we could just make this work well with frontend apps? It'd actually make it easy to use things like AdHocInsight, as opposed to a separate create-react-app-like env.

Worth thinking about, and it could definitely help us... but I think "apps" should serve as an entrypoint to contributing to posthog without actually running the whole stack on your local dev box. Hence we still need some CRA-like setup.

I concur we need to expose some type definitions:

Absolutely. Beta stuff, this is.

Showing the header automatically is definitely safer. If it turns out it needs to be disabled in some situation, we can make that configurable in plugin.json.

Yup.

…lugin-frontend-complete

Twixes

Green check mark goes here

mariusandra · 2022-05-20T16:14:55Z

* master: chore: start stack once in cloud tests (#9879) feat(apps): frontend apps (#9831) chore: Fix snapshots on master (#9885) chore(apps): rename plugins to apps (#9755) refactor: Remove constance library dependency, use json-encoded model (#9852) chore(clickhouse): avoid creating kafka_events, events_mv (#9863) fix(insights): Fix timezone date issues (#9678) refactor(plugin-server): refactor the event pipeline (#9829) feat(object storage): add unused object storage (#9846) fix: make kafka health check timeout test reliable (#9857) fix: query elements from start of day (#9827)

* create plugin source model * edit source via plugin_source model * deprecate "source" * test plugin source updates * add support for index.ts and index.js * refactor plugin loading, support plugin sources from db * fix source code in tests * remove transpilation code * reload plugin after saving * store defaults in the db instead of persisting in form * remove fields that don't exist * feat(apps): transpile frontend.tsx * update timestamp even if no local fields changed * yarn.lock * feat(apps): load apps with frontend.tsx in the frontend * fix import * reload apps, show if transpiling * remove unused fields * commit suggestion * rename to PluginSourceFile * rename to PluginSourceFile * remove dead code * cleaner types * PluginSourceFile * fix nag * fix types * one more merge conflict * transpile when adding frontend * fix test * edit app from sidebar * sneaky edit button * fix code feedback * add comments * make it safer to call * convert to upsert * convert to upsert * comment on the null * revert plugin server changes * get source from new model behind the scenes * simplify * revert accidental changes * revert accidental changes * remove defaults * sync the old source field * use the source model in the plugin server * cache the source from pluginsourcefile * test that getPluginSource gets data from the database * safer null check that doesn't override `{}` in the db with `null` * clarify origins * use enum * fix error from migration 0233 ([] is falsy in python!) * fix merge * error as null * use the explicit "source__index_ts" field * cache transpiled code * remove unused type * cleaner query * remove extra line * fix test * improved error handling and run code through prettier * new packages * loading state in source editor * kinder error * sync plugin state if pluginsLogic, retry loading * update snapshot after kea-forms update * remove "updateAppConfig" * add a query * add examples to editor * refactor sidebar * add more lemons * simplify app config * rename action and add todo * some helpful comments * create appConfig if enabling a plugin and none was yet provided in django's app context * re-enable app only if enabled * fix last bug * add back onInit and move types around * show apps section header only if any link in the list * remove dead code * fix few errors, only allow editing of source apps * stringify json * completely bail out of apps if the flag is off * Update snapshots * fix broken link * Update snapshots * use new icon for "apps" now that it's not "plugins" any longer * Update snapshots * Update snapshots Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

mariusandra added 17 commits May 17, 2022 14:00

create plugin source model

33ab6d2

edit source via plugin_source model

cd41f1f

deprecate "source"

3792778

test plugin source updates

cdfdd18

add support for index.ts and index.js

87e418c

refactor plugin loading, support plugin sources from db

3d3f7c4

fix source code in tests

c6112de

remove transpilation code

22f893a

reload plugin after saving

5e3036e

store defaults in the db instead of persisting in form

b20e318

remove fields that don't exist

0c06e25

feat(apps): transpile frontend.tsx

a792307

update timestamp even if no local fields changed

8d50aa5

Merge branch 'master' into plugin-frontend-transpilation

7276939

yarn.lock

7584e1d

feat(apps): load apps with frontend.tsx in the frontend

6c952ff

fix import

d801ca8

mariusandra requested review from Twixes and removed request for Twixes May 18, 2022 08:27

mariusandra added 11 commits May 18, 2022 13:11

reload apps, show if transpiling

2ed689c

Merge branch 'master' into plugin-source-db-model

16ed033

Merge branch 'plugin-source-db-model' into plugin-frontend-transpilation

d2fa914

remove unused fields

ef0b545

commit suggestion

67da1d2

Merge branch 'plugin-source-db-model' into plugin-frontend-transpilation

48f4207

rename to PluginSourceFile

e1d4801

Merge branch 'plugin-source-db-model' into plugin-frontend-transpilation

551382a

rename to PluginSourceFile

e28f500

remove dead code

cc98829

Merge branch 'plugin-frontend-transpilation' into plugin-frontend-com…

4d592d1

…plete

mariusandra added 2 commits May 20, 2022 11:33

fix last bug

62623c1

add back onInit and move types around

e04b200

yakkomajuri reviewed May 20, 2022

View reviewed changes

posthog/api/test/test_plugin.py Outdated Show resolved Hide resolved

Twixes reviewed May 20, 2022

View reviewed changes

mariusandra added 6 commits May 20, 2022 15:43

show apps section header only if any link in the list

999d320

remove dead code

2810e76

fix few errors, only allow editing of source apps

7e6fad0

stringify json

512588d

completely bail out of apps if the flag is off

c07447f

Merge branch 'master' into plugin-frontend-complete

1e00ce7

mariusandra and others added 9 commits May 20, 2022 16:17

Merge branch 'master' into plugin-frontend-complete

3f4f4e7

Update snapshots

0a60c55

fix broken link

6cebe4a

Merge remote-tracking branch 'origin/plugin-frontend-complete' into p…

b16c54d

…lugin-frontend-complete

Update snapshots

3603761

use new icon for "apps" now that it's not "plugins" any longer

3d506e0

Merge remote-tracking branch 'origin/plugin-frontend-complete' into p…

d973ac0

…lugin-frontend-complete

Update snapshots

20b04f7

Update snapshots

f89b489

Twixes approved these changes May 20, 2022

View reviewed changes

mariusandra merged commit 6bb8a6a into master May 20, 2022

mariusandra deleted the plugin-frontend-complete branch May 20, 2022 16:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(apps): frontend apps #9831

feat(apps): frontend apps #9831

mariusandra commented May 18, 2022 •

edited

Loading

mariusandra commented May 20, 2022

yakkomajuri May 20, 2022

mariusandra May 20, 2022

yakkomajuri May 20, 2022

yakkomajuri May 20, 2022

mariusandra May 20, 2022

Twixes left a comment

Twixes May 20, 2022

mariusandra May 20, 2022

mariusandra commented May 20, 2022 •

edited

Loading

Twixes left a comment

mariusandra commented May 20, 2022

feat(apps): frontend apps #9831

feat(apps): frontend apps #9831

Conversation

mariusandra commented May 18, 2022 • edited Loading

Changes

How did you test this code?

mariusandra commented May 20, 2022

yakkomajuri May 20, 2022

Choose a reason for hiding this comment

mariusandra May 20, 2022

Choose a reason for hiding this comment

yakkomajuri May 20, 2022

Choose a reason for hiding this comment

yakkomajuri May 20, 2022

Choose a reason for hiding this comment

mariusandra May 20, 2022

Choose a reason for hiding this comment

Twixes left a comment

Choose a reason for hiding this comment

Twixes May 20, 2022

Choose a reason for hiding this comment

mariusandra May 20, 2022

Choose a reason for hiding this comment

mariusandra commented May 20, 2022 • edited Loading

Twixes left a comment

Choose a reason for hiding this comment

mariusandra commented May 20, 2022

mariusandra commented May 18, 2022 •

edited

Loading

mariusandra commented May 20, 2022 •

edited

Loading