graasp · spaenleh · Oct 3, 2024 · Oct 3, 2024 · Oct 3, 2024 · Oct 7, 2024
diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml
@@ -40,6 +40,7 @@ jobs:
  # VITE_GA_MEASUREMENT_ID: ${{ secrets.VITE_GA_MEASUREMENT_ID }}
  VITE_SHOW_NOTIFICATIONS: ${{ vars.VITE_SHOW_NOTIFICATIONS }}
  VITE_GRAASP_REDIRECTION_HOST: ${{ vars.VITE_GRAASP_REDIRECTION_HOST }}
+ VITE_UMAMI_WEBSITE_ID: ${{ vars.VITE_UMAMI_WEBSITE_ID }}
  run: yarn build
  shell: bash
 

diff --git a/cypress/e2e/header.cy.ts b/cypress/e2e/header.cy.ts
@@ -13,7 +13,7 @@ describe('Header', () => {
  cy.visit(HOME_PATH);
  // check navigation and display and interface doesn't crash
  // todo: this is less robust than using the Platform contant from ui, but it was making cypress compile ui which is unnecessary.
- cy.get(`#${APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS.Builder}`).click();
+ cy.get(`#${APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS.builder}`).click();
  cy.get(`#${APP_NAVIGATION_PLATFORM_SWITCH_ID}`).should('exist');
  });
 

diff --git a/index.html b/index.html
@@ -18,6 +18,18 @@
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
  />
+
+ <!-- Umami tracking code -->
+
+ <!--
+ The integrity can not be checked when using cross origin
+ integrity="sha384-JyQQf9XxkMfVx/h+OQ+SxUZqLbL3p3KmWfnZ4LpQWzksmzHXESgXCk1/5AYxT9nR"
+ -->
+ <script
+ defer
+ src="https://cloud.umami.is/script.js"
+ data-website-id="%VITE_UMAMI_WEBSITE_ID%"
+ ></script>
  <title>Graasp Builder</title>
  </head>
  <body>

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
  "@graasp/sdk": "4.31.0",
  "@graasp/stylis-plugin-rtl": "2.2.0",
  "@graasp/translations": "1.39.0",
- "@graasp/ui": "5.2.0",
+ "@graasp/ui": "github:graasp/graasp-ui#main-umami",
  "@mui/icons-material": "5.16.7",
  "@mui/lab": "5.0.0-alpha.173",
  "@mui/material": "5.16.7",

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -27,7 +27,7 @@ import {
  buildItemPath,
 } from '../config/paths';
 import { hooks, mutations } from '../config/queryClient';
-import Main from './main/Main';
+import { Main } from './main/Main';
 import Redirect from './main/Redirect';
 import BookmarkedItemsScreen from './pages/BookmarkedItemsScreen';
 import MapItemsScreen from './pages/MapItemsScreen';

diff --git a/src/components/common/SelectTypes.tsx b/src/components/common/SelectTypes.tsx
@@ -68,7 +68,12 @@ export const SelectTypes = (): JSX.Element => {
  multiple
  value={itemTypes}
  onChange={handleChange}
- input={<OutlinedInput label={label} />}
+ input={
+ <OutlinedInput
+ label={label}
+ inputProps={{ 'data-umami-event': 'filter-item-type' }}
+ />
+ }
  renderValue={renderValues}
  MenuProps={MenuProps}
  sx={{

diff --git a/src/components/common/UserSwitchWrapper.tsx b/src/components/common/UserSwitchWrapper.tsx
@@ -49,6 +49,7 @@ const UserSwitchWrapper = ({ ButtonContent }: Props): JSX.Element => {
  seeProfileButtonId={HEADER_MEMBER_MENU_SEE_PROFILE_BUTTON_ID}
  buildMemberMenuItemId={buildMemberMenuItemId}
  avatar={<MemberAvatar id={member?.id} />}
+ dataUmami="header-avatar"
  />
  );
 };

diff --git a/src/components/item/ItemSearch.tsx b/src/components/item/ItemSearch.tsx
@@ -51,6 +51,7 @@ export const useItemSearch = ({
  inputBaseId={ITEM_SEARCH_INPUT_ID}
  placeholder={translateBuilder(BUILDER.ITEM_SEARCH_PLACEHOLDER)}
  size="small"
+ dataUmami="item-search"
  />
  );
  return { text: searchText, input: itemSearchInput };

diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { Link, useParams } from 'react-router-dom';
 
 import { Stack, styled, useTheme } from '@mui/material';
@@ -35,8 +36,14 @@ const StyledLink = styled(Link)(() => ({
  display: 'flex',
  alignItems: 'center',
 }));
-const LinkComponent = ({ children }: { children: JSX.Element }) => (
- <StyledLink to={HOME_PATH}>{children}</StyledLink>
+const LinkComponent = ({ children }: { children: ReactNode }) => (
+ <StyledLink
+ data-umami-event="header-home-link"
+ data-umami-event-context={Context.Builder}
+ to={HOME_PATH}
+ >
+ {children}
+ </StyledLink>
 );
 
 // small converter for HOST_MAP into a usePlatformNavigation mapper
@@ -46,9 +53,9 @@ export const platformsHostsMap = defaultHostsMapper({
  [Platform.Analytics]: HOST_MAP.analytics,
 });
 
-type Props = { children: JSX.Element | (JSX.Element & string) };
+type Props = { children: ReactNode };
 
-const Main = ({ children }: Props): JSX.Element => {
+export const Main = ({ children }: Props): JSX.Element => {
  const { t } = useBuilderTranslation();
  const theme = useTheme();
  const { isMobile } = useMobileView();

diff --git a/src/components/main/MainMenu.tsx b/src/components/main/MainMenu.tsx
@@ -36,7 +36,11 @@ const ResourceLinks = () => {
  const { t } = useBuilderTranslation();
  return (
  <ListItem disablePadding>
- <ListItemButton href={TUTORIALS_LINK} target="_blank">
+ <ListItemButton
+ href={TUTORIALS_LINK}
+ target="_blank"
+ data-umami-event="sidebar-tutorials"
+ >
  <ListItemIcon>
  <BookOpenTextIcon />
  </ListItemIcon>
@@ -64,18 +68,21 @@ const MainMenu = (): JSX.Element | null => {
  member.type === AccountType.Individual ? (
  <>
  <MenuItem
+ dataUmami="sidebar-bookmarks"
  onClick={() => goTo(BOOKMARKED_ITEMS_PATH)}
  selected={pathname === BOOKMARKED_ITEMS_PATH}
  text={t(BUILDER.BOOKMARKED_ITEMS_TITLE)}
  icon={<BookmarkIcon />}
  />
  <MenuItem
+ dataUmami="sidebar-published"
  onClick={() => goTo(PUBLISHED_ITEMS_PATH)}
  selected={pathname === PUBLISHED_ITEMS_PATH}
  text={t(BUILDER.NAVIGATION_PUBLISHED_ITEMS_TITLE)}
  icon={<LibraryBigIcon />}
  />
  <MenuItem
+ dataUmami="sidebar-trash"
  onClick={() => goTo(RECYCLE_BIN_PATH)}
  selected={pathname === RECYCLE_BIN_PATH}
  text={t(BUILDER.RECYCLE_BIN_TITLE)}
@@ -89,6 +96,7 @@ const MainMenu = (): JSX.Element | null => {
  <Stack direction="column" height="100%" justifyContent="space-between">
  <Box>
  <MenuItem
+ dataUmami="sidebar-home"
  onClick={() => goTo(HOME_PATH)}
  selected={pathname === HOME_PATH}
  icon={<HomeIcon />}

diff --git a/src/components/main/NewItemButton.tsx b/src/components/main/NewItemButton.tsx
@@ -45,6 +45,7 @@ const NewItemButton = ({
  background: theme.palette.primary.main,
  '&:hover': { background: 'grey' },
  }}
+ data-umami-event="new-item-icon-button"
  >
  <PlusIcon />
  </IconButton>
@@ -56,6 +57,7 @@ const NewItemButton = ({
  aria-label="add"
  startIcon={<PlusIcon />}
  size={size}
+ data-umami-event="new-item-button"
  >
  {translateBuilder(BUILDER.NEW_ITEM_BUTTON)}
  </Button>

diff --git a/src/components/table/ShowOnlyMeButton.tsx b/src/components/table/ShowOnlyMeButton.tsx
@@ -23,6 +23,9 @@ const ShowOnlyMeButton = ({
  sx={{ fontSize: '1rem', maxWidth: 'max-content' }}
  id={ACCESSIBLE_ITEMS_ONLY_ME_ID}
  label={translateBuilder(BUILDER.HOME_SHOW_ONLY_CREATED_BY_ME)}
+ // We need to have a button component so the onclick triggers an event in umami
+ component="button"
+ data-umami-event="filter-created-by-me"
  />
  );
 };

diff --git a/src/config/selectors.ts b/src/config/selectors.ts
@@ -217,10 +217,10 @@ export const ITEM_PUBLISH_SECTION_TITLE_ID = 'itemPublishSectionTitle';
 export const APP_NAVIGATION_PLATFORM_SWITCH_ID = 'appNavigationPlatformSwitch';
 // cannot use graasp ui because it slows down a lot cypress
 export const APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS = {
- Builder: 'appNavigationPlatformSwitchButtonBuilder',
- Player: 'appNavigationPlatformSwitchButtonPlayer',
- Library: 'appNavigationPlatformSwitchButtonLibrary',
- Analytics: 'appNavigationPlatformSwitchButtonAnalytics',
+ builder: 'appNavigationPlatformSwitchButtonBuilder',
+ player: 'appNavigationPlatformSwitchButtonPlayer',
+ library: 'appNavigationPlatformSwitchButtonLibrary',
+ analytics: 'appNavigationPlatformSwitchButtonAnalytics',
 };
 
 export const buildItemPublicationButton = (status: PublicationStatus): string =>

diff --git a/yarn.lock b/yarn.lock
@@ -1688,9 +1688,9 @@ __metadata:
  languageName: node
  linkType: hard
 
-"@graasp/ui@npm:5.2.0":
- version: 5.2.0
- resolution: "@graasp/ui@npm:5.2.0"
+"@graasp/ui@github:graasp/graasp-ui#main-umami":
+ version: 5.2.1
+ resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=7c018f62fba7b92fc3142f35f02b19003342ebb2"
  dependencies:
  http-status-codes: "npm:2.3.0"
  interweave: "npm:13.1.0"
@@ -1699,7 +1699,7 @@ __metadata:
  react-dnd: "npm:16.0.1"
  react-dnd-html5-backend: "npm:16.0.1"
  react-quill: "npm:2.0.0"
- react-rnd: "npm:10.4.12"
+ react-rnd: "npm:10.4.13"
  uuid: "npm:10.0.0"
  peerDependencies:
  "@emotion/cache": ~11.10.7 || ~11.11.0 || ~11.13.0
@@ -1713,13 +1713,13 @@ __metadata:
  "@mui/material": ~5.14.0 || ~5.15.0 || ~5.16.0
  i18next: ^22.4.15 || ^23.0.0
  katex: 0.16.11
- lucide-react: ^0.417.0 || ^0.429.0 || ^0.436.0 || ^0.439.0 || ^0.441.0
+ lucide-react: ^0.417.0 || ^0.429.0 || ^0.436.0 || ^0.439.0 || ^0.441.0 || ^0.446.0 || ^0.447.0
  react: ^18.0.0
  react-dom: ^18.0.0
  react-i18next: ^13.0.0 || ^14.0.0 || ^15.0.0
  react-router-dom: ^6.11.0
  stylis: ^4.1.3
- checksum: 10/b98fc515f4f2bc7d2d1b800404cbfb480485e178db8e79c5681d10c5d152669bbffcbd0cdcf044d04b7b39856c64a10d0478f40d072213a23eb8d1fef0120853
+ checksum: 10/9528b58de35f898bd1b94d0875992aea92950d64c79a448bf220676f258074f604012a691664e3ea2c5e7ba4687220c3808188eadfea115acbfdf0126930cc0e
  languageName: node
  linkType: hard
 
@@ -6476,7 +6476,7 @@ __metadata:
  "@graasp/sdk": "npm:4.31.0"
  "@graasp/stylis-plugin-rtl": "npm:2.2.0"
  "@graasp/translations": "npm:1.39.0"
- "@graasp/ui": "npm:5.2.0"
+ "@graasp/ui": "github:graasp/graasp-ui#main-umami"
  "@mui/icons-material": "npm:5.16.7"
  "@mui/lab": "npm:5.0.0-alpha.173"
  "@mui/material": "npm:5.16.7"
@@ -9735,13 +9735,13 @@ __metadata:
  languageName: node
  linkType: hard
 
-"re-resizable@npm:6.9.17":
- version: 6.9.17
- resolution: "re-resizable@npm:6.9.17"
+"re-resizable@npm:6.10.0":
+ version: 6.10.0
+ resolution: "re-resizable@npm:6.10.0"
  peerDependencies:
  react: ^16.13.1 || ^17.0.0 || ^18.0.0
  react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0
- checksum: 10/768c3a0fe39d6916caf4e003240d326d62c4d7512c7d3115cc2a98085416fdba80097afdbb93df57b69543c41ce56b33589f2fea6987cd5149faa83cf11c8ba1
+ checksum: 10/303e582feffdfd3e491e2b51dc75c8641c726882e2d8e3ec249b2bc1d23bfffa73bd4a982ed5456bcab9ec25f52b5430e8c632f32647295ed773679691a961a2
  languageName: node
  linkType: hard
 
@@ -10057,17 +10057,17 @@ __metadata:
  languageName: node
  linkType: hard
 
-"react-rnd@npm:10.4.12":
- version: 10.4.12
- resolution: "react-rnd@npm:10.4.12"
+"react-rnd@npm:10.4.13":
+ version: 10.4.13
+ resolution: "react-rnd@npm:10.4.13"
  dependencies:
- re-resizable: "npm:6.9.17"
+ re-resizable: "npm:6.10.0"
  react-draggable: "npm:4.4.6"
  tslib: "npm:2.6.2"
  peerDependencies:
  react: ">=16.3.0"
  react-dom: ">=16.3.0"
- checksum: 10/f29429a9ceafdf19c3b50571882c36eee29430a22d526fe2aaf641e38146e1bf5a1337639e0c9eba7c6ddaa85721cff9f390cf8d807a62634a27a77e49e2653c
+ checksum: 10/3a343d71117c37e105286eeee38e244d9dc62e0e4b2efa929128995056408cf7fda15f5100f66b8548370ae63f886b94c7851e862fd90dd0b543ec382f43c4f1
  languageName: node
  linkType: hard