Merge pull request #11543 from strapi/v4/tracking

[V4] Tracking
2025-08-04 23:03:00 +00:00 · 2021-11-15 14:06:38 +01:00 · 2021-11-15 14:06:38 +01:00 · b356766f1c
commit b356766f1c
parent 27b2f2de7a 672f5276b0
18 changed files with 187 additions and 85 deletions
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/TableRows/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/TableRows/index.js
@ -51,7 +51,7 @@ const TableRows = ({
            key={data.id}
            {...onRowClick({
              fn: () => {
-                trackUsage('willEditEntryFromButton');
+                trackUsage('willEditEntryFromList');
                push({
                  pathname: `${pathname}/${data.id}`,
                  state: { from: pathname },
@ -141,7 +141,11 @@ const TableRows = ({
                  {canDelete && (
                    <Box paddingLeft={1}>
                      <IconButton
-                        onClick={() => onClickDelete(data.id)}
+                        onClick={() => {
+                          trackUsage('willDeleteEntryFromList');
+
+                          onClickDelete(data.id);
+                        }}
                        label={formatMessage(
                          { id: 'app.component.table.delete', defaultMessage: 'Delete {target}' },
                          { target: itemLineText }
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js
@ -81,6 +81,7 @@ const DynamicTable = ({
      headers={tableHeaders}
      onConfirmDelete={onConfirmDelete}
      onConfirmDeleteAll={onConfirmDeleteAll}
+      onOpenDeleteAllModalTrackedEvent="willBulkDeleteEntries"
      rows={rows}
      withBulkActions
      withMainAction={canDelete && isBulkable}
--- a/packages/core/admin/admin/src/content-manager/pages/ListView/FieldPicker/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/ListView/FieldPicker/index.js
@ -26,6 +26,8 @@ const FieldPicker = ({ layout }) => {
  const values = displayedHeaders.map(({ name }) => name);

  const handleChange = updatedValues => {
+    trackUsage('didChangeDisplayedFields');
+
    // removing a header
    if (updatedValues.length < values.length) {
      const removedHeader = values.filter(value => {
@ -34,7 +36,6 @@ const FieldPicker = ({ layout }) => {

      dispatch(onChangeListHeaders({ name: removedHeader[0], value: true }));
    } else {
-      trackUsage('didChangeDisplayedFields');
      const addedHeader = updatedValues.filter(value => {
        return values.indexOf(value) === -1;
      });
--- a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js
@ -7,7 +7,6 @@ import { bindActionCreators, compose } from 'redux';
 import { useIntl } from 'react-intl';
 import { useHistory, useLocation } from 'react-router-dom';
 import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
 import { stringify } from 'qs';
 import {
  NoPermissions,
@ -171,18 +170,6 @@ function ListView({
  const handleConfirmDeleteData = useCallback(
    async idToDelete => {
      try {
-        let trackerProperty = {};
-
-        if (hasDraftAndPublish) {
-          const dataToDelete = data.find(obj => obj.id.toString() === idToDelete.toString());
-          const isDraftEntry = isEmpty(dataToDelete.publishedAt);
-          const status = isDraftEntry ? 'draft' : 'published';
-
-          trackerProperty = { status };
-        }
-
-        trackUsageRef.current('willDeleteEntry', trackerProperty);
-
        await axiosInstance.delete(getRequestUrl(`collection-types/${slug}/${idToDelete}`));

        const requestUrl = getRequestUrl(`collection-types/${slug}${params}`);
@ -192,8 +179,6 @@ function ListView({
          type: 'success',
          message: { id: getTrad('success.record.delete') },
        });
-
-        trackUsageRef.current('didDeleteEntry', trackerProperty);
      } catch (err) {
        const errorMessage = get(
          err,
@ -207,7 +192,7 @@ function ListView({
        });
      }
    },
-    [hasDraftAndPublish, slug, params, fetchData, toggleNotification, data, formatMessage]
+    [slug, params, fetchData, toggleNotification, formatMessage]
  );

  useEffect(() => {
@ -282,8 +267,11 @@ function ListView({
              <FieldPicker layout={layout} />
              <CheckPermissions permissions={cmPermissions.collectionTypesConfigurations}>
                <IconButtonCustom
-                  onClick={() =>
-                    push({ pathname: `${slug}/configurations/list`, search: pluginsQueryParams })}
+                  onClick={() => {
+                    trackUsage('willEditListLayout');
+
+                    push({ pathname: `${slug}/configurations/list`, search: pluginsQueryParams });
+                  }}
                  icon={<Cog />}
                  label={formatMessage({
                    id: 'app.links.configure-view',
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { Helmet } from 'react-helmet';
-import { pxToRem, CheckPagePermissions } from '@strapi/helper-plugin';
+import { pxToRem, CheckPagePermissions, useTracking } from '@strapi/helper-plugin';
 import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Flex } from '@strapi/design-system/Flex';
 import { Box } from '@strapi/design-system/Box';
@ -27,6 +27,11 @@ const StackCentered = styled(Stack)`

 const MarketPlacePage = () => {
  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  useEffect(() => {
+    trackUsage('didGoToMarketplace');
+  }, [trackUsage]);

  return (
    <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
@ -2,11 +2,13 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { useTracking } from '@strapi/helper-plugin';
 import MarketPlacePage from '../index';

 jest.mock('@strapi/helper-plugin', () => ({
  pxToRem: jest.fn(),
  CheckPagePermissions: ({ children }) => children,
+  useTracking: jest.fn(() => ({ trackUsage: jest.fn() })),
 }));

 const App = (
@ -440,4 +442,12 @@ describe('Marketplace coming soon', () => {
      </div>
    `);
  });
+
+  it('sends an event when the user enters the marketplace', () => {
+    const trackUsage = jest.fn();
+    useTracking.mockImplementation(() => ({ trackUsage }));
+    render(App);
+
+    expect(trackUsage).toHaveBeenCalledWith('didGoToMarketplace');
+  });
 });
--- a/packages/core/helper-plugin/lib/src/components/DynamicTable/index.js
+++ b/packages/core/helper-plugin/lib/src/components/DynamicTable/index.js
@ -9,6 +9,7 @@ import { useIntl } from 'react-intl';
 import Trash from '@strapi/icons/Trash';
 import styled from 'styled-components';
 import useQueryParams from '../../hooks/useQueryParams';
+import useTracking from '../../hooks/useTracking';
 import ConfirmDialog from '../ConfirmDialog';
 import EmptyBodyTable from '../EmptyBodyTable';
 import TableHead from './TableHead';
@ -29,6 +30,7 @@ const Table = ({
  isLoading,
  onConfirmDeleteAll,
  onConfirmDelete,
+  onOpenDeleteAllModalTrackedEvent,
  rows,
  withBulkActions,
  withMainAction,
@ -40,6 +42,7 @@ const Table = ({
  const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
  const [{ query }] = useQueryParams();
  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
  const ROW_COUNT = rows.length + 1;
  const COL_COUNT = headers.length + (withBulkActions ? 1 : 0) + (withMainAction ? 1 : 0);
  const hasFilters = query?.filters !== undefined;
@ -88,6 +91,10 @@ const Table = ({
  };

  const handleToggleConfirmDeleteAll = () => {
+    if (!showConfirmDeleteAll && onOpenDeleteAllModalTrackedEvent) {
+      trackUsage(onOpenDeleteAllModalTrackedEvent);
+    }
+
    setShowConfirmDeleteAll(prev => !prev);
  };

@ -203,6 +210,7 @@ Table.defaultProps = {
  isLoading: false,
  onConfirmDeleteAll: () => {},
  onConfirmDelete: () => {},
+  onOpenDeleteAllModalTrackedEvent: undefined,
  rows: [],
  withBulkActions: false,
  withMainAction: false,
@ -229,6 +237,7 @@ Table.propTypes = {
  isLoading: PropTypes.bool,
  onConfirmDeleteAll: PropTypes.func,
  onConfirmDelete: PropTypes.func,
+  onOpenDeleteAllModalTrackedEvent: PropTypes.string,
  rows: PropTypes.array,
  withBulkActions: PropTypes.bool,
  withMainAction: PropTypes.bool,
--- a/packages/core/upload/admin/src/components/AssetDialog/index.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/index.js
@ -29,6 +29,7 @@ export const AssetDialog = ({
  onValidate,
  multiple,
  initiallySelectedAssets,
+  trackedLocation,
 }) => {
  const [assetToEdit, setAssetToEdit] = useState(undefined);
  const { formatMessage } = useIntl();
@ -153,6 +154,7 @@ export const AssetDialog = ({
        canUpdate={canUpdate}
        canCopyLink={canCopyLink}
        canDownload={canDownload}
+        trackedLocation={trackedLocation}
      />
    );
  }
@ -232,6 +234,7 @@ AssetDialog.defaultProps = {
  allowedTypes: [],
  initiallySelectedAssets: [],
  multiple: false,
+  trackedLocation: undefined,
 };

 AssetDialog.propTypes = {
@ -241,4 +244,5 @@ AssetDialog.propTypes = {
  onAddAsset: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
  onValidate: PropTypes.func.isRequired,
+  trackedLocation: PropTypes.string,
 };
--- a/packages/core/upload/admin/src/components/EditAssetDialog/ReplaceMediaButton.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/ReplaceMediaButton.js
@ -1,16 +1,23 @@
 import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { useIntl } from 'react-intl';
+import { useTracking } from '@strapi/helper-plugin';
 import { Button } from '@strapi/design-system/Button';
 import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
 import { getTrad } from '../../utils';

-export const ReplaceMediaButton = ({ onSelectMedia, acceptedMime, ...props }) => {
+export const ReplaceMediaButton = ({ onSelectMedia, acceptedMime, trackedLocation, ...props }) => {
  const { formatMessage } = useIntl();
  const inputRef = useRef(null);
+  const { trackUsage } = useTracking();

  const handleClick = e => {
    e.preventDefault();
+
+    if (trackedLocation) {
+      trackUsage('didReplaceMedia', { location: trackedLocation });
+    }
+
    inputRef.current.click();
  };

@ -43,7 +50,12 @@ export const ReplaceMediaButton = ({ onSelectMedia, acceptedMime, ...props }) =>
  );
 };

+ReplaceMediaButton.defaultProps = {
+  trackedLocation: undefined,
+};
+
 ReplaceMediaButton.propTypes = {
  acceptedMime: PropTypes.string.isRequired,
  onSelectMedia: PropTypes.func.isRequired,
+  trackedLocation: PropTypes.string,
 };
--- a/packages/core/upload/admin/src/components/EditAssetDialog/index.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/index.js
@ -36,7 +36,14 @@ const fileInfoSchema = yup.object({
  caption: yup.string(),
 });

-export const EditAssetDialog = ({ onClose, asset, canUpdate, canCopyLink, canDownload }) => {
+export const EditAssetDialog = ({
+  onClose,
+  asset,
+  canUpdate,
+  canCopyLink,
+  canDownload,
+  trackedLocation,
+}) => {
  const { formatMessage, formatDate } = useIntl();
  const submitButtonRef = useRef(null);
  const [isCropping, setIsCropping] = useState(false);
@ -183,6 +190,7 @@ export const EditAssetDialog = ({ onClose, asset, canUpdate, canCopyLink, canDow
                onSelectMedia={setReplacementFile}
                acceptedMime={asset.mime}
                disabled={formDisabled}
+                trackedLocation={trackedLocation}
              />

              <Button
@ -200,10 +208,15 @@ export const EditAssetDialog = ({ onClose, asset, canUpdate, canCopyLink, canDow
  );
 };

+EditAssetDialog.defaultProps = {
+  trackedLocation: undefined,
+};
+
 EditAssetDialog.propTypes = {
  asset: AssetDefinition.isRequired,
  canUpdate: PropTypes.bool.isRequired,
  canCopyLink: PropTypes.bool.isRequired,
  canDownload: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
+  trackedLocation: PropTypes.string,
 };
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssets.js
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssets.js
@ -23,6 +23,7 @@ export const CarouselAssets = ({
  onNext,
  onPrevious,
  selectedAssetIndex,
+  trackedLocation,
 }) => {
  const { formatMessage } = useIntl();
  const [isEditingAsset, setIsEditingAsset] = useState(false);
@ -105,6 +106,7 @@ export const CarouselAssets = ({
          canUpdate
          canCopyLink
          canDownload
+          trackedLocation={trackedLocation}
        />
      )}
    </>
@ -116,6 +118,7 @@ CarouselAssets.defaultProps = {
  error: undefined,
  hint: undefined,
  onDropAsset: undefined,
+  trackedLocation: undefined,
 };

 CarouselAssets.propTypes = {
@ -132,4 +135,5 @@ CarouselAssets.propTypes = {
  onNext: PropTypes.func.isRequired,
  onPrevious: PropTypes.func.isRequired,
  selectedAssetIndex: PropTypes.number.isRequired,
+  trackedLocation: PropTypes.string,
 };
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/index.js
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/index.js
@ -150,6 +150,7 @@ export const MediaLibraryInput = ({
        error={errorMessage}
        hint={hint}
        selectedAssetIndex={selectedIndex}
+        trackedLocation="content-manager"
      />

      {step === Steps.SelectAsset && (
@ -160,6 +161,7 @@ export const MediaLibraryInput = ({
          onValidate={handleValidation}
          multiple={multiple}
          onAddAsset={() => setStep(Steps.UploadAsset)}
+          trackedLocation="content-manager"
        />
      )}

@ -168,6 +170,7 @@ export const MediaLibraryInput = ({
          onClose={() => setStep(Steps.SelectAsset)}
          initialAssetsToAdd={droppedAssets}
          addUploadedFiles={handleFilesUploadSucceeded}
+          trackedLocation="content-manager"
        />
      )}
    </>
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/AddAssetStep.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/AddAssetStep.js
@ -10,7 +10,7 @@ import { FromUrlForm } from './FromUrlForm';
 import { FromComputerForm } from './FromComputerForm';
 import getTrad from '../../../utils/getTrad';

-export const AddAssetStep = ({ onClose, onAddAsset }) => {
+export const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }) => {
  const { formatMessage } = useIntl();

  return (
@ -51,10 +51,18 @@ export const AddAssetStep = ({ onClose, onAddAsset }) => {
        </Box>
        <TabPanels>
          <TabPanel>
-            <FromComputerForm onClose={onClose} onAddAssets={onAddAsset} />
+            <FromComputerForm
+              onClose={onClose}
+              onAddAssets={onAddAsset}
+              trackedLocation={trackedLocation}
+            />
          </TabPanel>
          <TabPanel>
-            <FromUrlForm onClose={onClose} onAddAsset={onAddAsset} />
+            <FromUrlForm
+              onClose={onClose}
+              onAddAsset={onAddAsset}
+              trackedLocation={trackedLocation}
+            />
          </TabPanel>
        </TabPanels>
      </TabGroup>
@ -62,7 +70,12 @@ export const AddAssetStep = ({ onClose, onAddAsset }) => {
  );
 };

+AddAssetStep.defaultProps = {
+  trackedLocation: undefined,
+};
+
 AddAssetStep.propTypes = {
  onClose: PropTypes.func.isRequired,
  onAddAsset: PropTypes.func.isRequired,
+  trackedLocation: PropTypes.string,
 };
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.js
@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { H3 } from '@strapi/design-system/Text';
+import { useTracking } from '@strapi/helper-plugin';
 import { ModalFooter } from '@strapi/design-system/ModalLayout';
 import { Button } from '@strapi/design-system/Button';
 import PicturePlus from '@strapi/icons/PicturePlus';
@ -34,10 +35,11 @@ const OpaqueBox = styled(Box)`
  cursor: pointer;
 `;

-export const FromComputerForm = ({ onClose, onAddAssets }) => {
+export const FromComputerForm = ({ onClose, onAddAssets, trackedLocation }) => {
  const { formatMessage } = useIntl();
  const [dragOver, setDragOver] = useState(false);
  const inputRef = useRef(null);
+  const { trackUsage } = useTracking();

  const handleDragEnter = () => setDragOver(true);
  const handleDragLeave = () => setDragOver(false);
@ -58,6 +60,10 @@ export const FromComputerForm = ({ onClose, onAddAssets }) => {
      assets.push(asset);
    }

+    if (trackedLocation) {
+      trackUsage('didSelectFile', { source: 'computer', location: trackedLocation });
+    }
+
    onAddAssets(assets);
  };

@ -136,7 +142,12 @@ export const FromComputerForm = ({ onClose, onAddAssets }) => {
  );
 };

+FromComputerForm.defaultProps = {
+  trackedLocation: undefined,
+};
+
 FromComputerForm.propTypes = {
  onClose: PropTypes.func.isRequired,
  onAddAssets: PropTypes.func.isRequired,
+  trackedLocation: PropTypes.string,
 };
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js
@ -5,16 +5,17 @@ import { ModalFooter } from '@strapi/design-system/ModalLayout';
 import { Textarea } from '@strapi/design-system/Textarea';
 import { useIntl } from 'react-intl';
 import { Button } from '@strapi/design-system/Button';
-import { Form } from '@strapi/helper-plugin';
+import { Form, useTracking } from '@strapi/helper-plugin';
 import { Formik } from 'formik';
 import getTrad from '../../../utils/getTrad';
 import { urlSchema } from '../../../utils/urlYupSchema';
 import { urlsToAssets } from '../../../utils/urlsToAssets';

-export const FromUrlForm = ({ onClose, onAddAsset }) => {
+export const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(undefined);
  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();

  const handleSubmit = async ({ urls }) => {
    setLoading(true);
@ -22,6 +23,10 @@ export const FromUrlForm = ({ onClose, onAddAsset }) => {
    try {
      const assets = await urlsToAssets(urlArray);

+      if (trackedLocation) {
+        trackUsage('didSelectFile', { source: 'url', location: trackedLocation });
+      }
+
      // no need to set the loading to false since the component unmounts
      onAddAsset(assets);
    } catch (e) {
@ -83,7 +88,12 @@ export const FromUrlForm = ({ onClose, onAddAsset }) => {
  );
 };

+FromUrlForm.defaultProps = {
+  trackedLocation: undefined,
+};
+
 FromUrlForm.propTypes = {
  onClose: PropTypes.func.isRequired,
  onAddAsset: PropTypes.func.isRequired,
+  trackedLocation: PropTypes.string,
 };
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js
@ -106,55 +106,6 @@ describe('FromComputerForm', () => {
        color: #666687;
      }

-      .c16 {
-        background: #f6f6f9;
-        padding-top: 16px;
-        padding-right: 20px;
-        padding-bottom: 16px;
-        padding-left: 20px;
-      }
-
-      .c18 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: justify;
-        -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c19 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c17 {
-        border-radius: 0 0 4px 4px;
-        border-top: 1px solid #eaeaef;
-      }
-
-      .c20 > * + * {
-        margin-left: 8px;
-      }
-
      .c15 {
        font-weight: 600;
        color: #32324d;
@ -232,7 +183,7 @@ describe('FromComputerForm', () => {
        background: #4945ff;
      }

-      .c13 .sc-jcRCNh {
+      .c13 .sc-gfaqzF {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
@ -297,7 +248,7 @@ describe('FromComputerForm', () => {
        background: #ffffff;
      }

-      .c21 .sc-jcRCNh {
+      .c21 .sc-gfaqzF {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
@ -357,6 +308,55 @@ describe('FromComputerForm', () => {
        fill: #32324d;
      }

+      .c16 {
+        background: #f6f6f9;
+        padding-top: 16px;
+        padding-right: 20px;
+        padding-bottom: 16px;
+        padding-left: 20px;
+      }
+
+      .c18 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: justify;
+        -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c19 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c17 {
+        border-radius: 0 0 4px 4px;
+        border-top: 1px solid #eaeaef;
+      }
+
+      .c20 > * + * {
+        margin-left: 8px;
+      }
+
      .c5 {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/UploadAssetDialog.js
@ -10,7 +10,12 @@ const Steps = {
  PendingAsset: 'PendingAsset',
 };

-export const UploadAssetDialog = ({ initialAssetsToAdd, onClose, addUploadedFiles }) => {
+export const UploadAssetDialog = ({
+  initialAssetsToAdd,
+  onClose,
+  addUploadedFiles,
+  trackedLocation,
+}) => {
  const [step, setStep] = useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);
  const [assets, setAssets] = useState(initialAssetsToAdd || []);

@ -45,7 +50,11 @@ export const UploadAssetDialog = ({ initialAssetsToAdd, onClose, addUploadedFile
  return (
    <ModalLayout onClose={onClose} labelledBy="title">
      {step === Steps.AddAsset && (
-        <AddAssetStep onClose={onClose} onAddAsset={handleAddToPendingAssets} />
+        <AddAssetStep
+          onClose={onClose}
+          onAddAsset={handleAddToPendingAssets}
+          trackedLocation={trackedLocation}
+        />
      )}
      {step === Steps.PendingAsset && (
        <PendingAssetStep
@ -65,10 +74,12 @@ export const UploadAssetDialog = ({ initialAssetsToAdd, onClose, addUploadedFile
 UploadAssetDialog.defaultProps = {
  addUploadedFiles: undefined,
  initialAssetsToAdd: undefined,
+  trackedLocation: undefined,
 };

 UploadAssetDialog.propTypes = {
  addUploadedFiles: PropTypes.func,
  initialAssetsToAdd: PropTypes.arrayOf(AssetDefinition),
  onClose: PropTypes.func.isRequired,
+  trackedLocation: PropTypes.string,
 };
--- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js
+++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js
@ -198,7 +198,9 @@ export const MediaLibrary = () => {
        </ContentLayout>
      </Main>

-      {showUploadAssetDialog && <UploadAssetDialog onClose={toggleUploadAssetDialog} />}
+      {showUploadAssetDialog && (
+        <UploadAssetDialog onClose={toggleUploadAssetDialog} trackedLocation="upload" />
+      )}
      {assetToEdit && (
        <EditAssetDialog
          onClose={() => setAssetToEdit(undefined)}
@ -206,6 +208,7 @@ export const MediaLibrary = () => {
          canUpdate={canUpdate}
          canCopyLink={canCopyLink}
          canDownload={canDownload}
+          trackedLocation="upload"
        />
      )}
    </Layout>