UI patch 1 (#2564)

* ui: move around login handler; exlcude all /login subpaths from destinationPath handler; remove unused redirect * spot v bump * spot + ui: some postrelease fixes
2024-09-12 14:05:22 +02:00 · 2024-09-12 14:05:22 +02:00 · 34a5ab4c0c
commit 34a5ab4c0c
parent 0fa46bdb3c
9 changed files with 71 additions and 70 deletions
--- a/frontend/app/Router.tsx
+++ b/frontend/app/Router.tsx
@ -106,6 +106,9 @@ const Router: React.FC<RouterProps> = (props) => {
  };

  const handleUserLogin = async () => {
+    if (isSpotCb) {
+      localStorage.setItem(SPOT_ONBOARDING, 'true')
+    }
    await fetchUserInfo();
    const siteIdFromPath = parseInt(location.pathname.split('/')[1]);
    await fetchSiteList(siteIdFromPath);
@ -114,8 +117,8 @@ const Router: React.FC<RouterProps> = (props) => {
    const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH);
    if (
      destinationPath &&
-      destinationPath !== routes.login() &&
-      destinationPath !== routes.signup() &&
+      !destinationPath.includes(routes.login()) &&
+      !destinationPath.includes(routes.signup()) &&
      destinationPath !== '/'
    ) {
      const url = new URL(destinationPath, window.location.origin);
@ -152,10 +155,6 @@ const Router: React.FC<RouterProps> = (props) => {
  useEffect(() => {
    if (prevIsLoggedIn !== isLoggedIn && isLoggedIn) {
      void handleUserLogin();
-      if (spotCb) {
-        history.push(spotsList())
-        localStorage.setItem(SPOT_ONBOARDING, 'true')
-      }
    }
  }, [isLoggedIn]);

--- a/frontend/app/components/Spots/SpotPlayer/SpotPlayer.tsx
+++ b/frontend/app/components/Spots/SpotPlayer/SpotPlayer.tsx
@ -1,4 +1,3 @@
-import { Button, Card } from 'antd';
 import cn from 'classnames';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
@ -6,16 +5,15 @@ import { connect } from 'react-redux';
 import { useHistory, useParams } from 'react-router-dom';

 import { useStore } from 'App/mstore';
-import { EscapeButton, Icon, Loader } from 'UI';
-
-import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
-
 import {
  debounceUpdate,
  getDefaultPanelHeight,
-} from '../../Session/Player/ReplayPlayer/PlayerInst';
-import { SpotOverviewPanelCont } from '../../Session_/OverviewPanel/OverviewPanel';
-import withPermissions from '../../hocs/withPermissions';
+} from 'Components/Session/Player/ReplayPlayer/PlayerInst';
+import { SpotOverviewPanelCont } from 'Components/Session_/OverviewPanel/OverviewPanel';
+import withPermissions from 'Components/hocs/withPermissions';
+import { EscapeButton, Loader } from 'UI';
+
+import AccessError from './components/AccessError';
 import SpotConsole from './components/Panels/SpotConsole';
 import SpotNetwork from './components/Panels/SpotNetwork';
 import SpotLocation from './components/SpotLocation';
@ -38,9 +36,9 @@ function SpotPlayer({ loggedIn }: { loggedIn: boolean }) {

  React.useEffect(() => {
    if (spotStore.currentSpot) {
-      document.title = spotStore.currentSpot.title + ' - OpenReplay'
+      document.title = spotStore.currentSpot.title + ' - OpenReplay';
    }
-  }, [spotStore.currentSpot])
+  }, [spotStore.currentSpot]);
  React.useEffect(() => {
    if (!loggedIn) {
      const query = new URLSearchParams(window.location.search);
@ -160,39 +158,7 @@ function SpotPlayer({ loggedIn }: { loggedIn: boolean }) {
          'w-screen h-screen flex items-center justify-center flex-col gap-2'
        }
      >
-        {spotStore.accessError ? (
-          <>
-            <div className="w-full h-full block ">
-              <div className="flex bg-white border-b text-center justify-center py-4">
-                <a href="https://openreplay.com/spot" target="_blank">
-                  <Button
-                    type="text"
-                    className="orSpotBranding flex gap-1 items-center"
-                    size="large"
-                  >
-                    <img src={'/assets/openreplay.svg'} width={40} alt='OpenReplay Spot' />
-                    <div className="flex flex-row gap-2 items-center text-start">
-                      <div className={'text-3xl font-semibold '}>OpenReplay Spot</div>
-                    </div>
-                  </Button>
-                </a>
-              </div>
-              <Card className="w-1/2 mx-auto rounded-b-full shadow-sm text-center flex flex-col justify-center items-center z-50 min-h-60">
-                <div className={'font-semibold text-xl'}>
-                  The Spot link has expired.
-                </div>
-                <p className="text-lg">
-                  Contact the person who shared it to re-spot.
-                </p>
-              </Card>
-              <div className="rotate-180 -z-10 w-fit mx-auto -mt-5 hover:mt-2 transition-all ease-in-out hover:rotate-0 hover:transition-all hover:ease-in-out duration-500 hover:duration-150">
-                <AnimatedSVG name={ICONS.NO_RECORDINGS} size={60} />
-              </div>
-            </div>
-          </>
-        ) : (
-          <Loader />
-        )}
+        {spotStore.accessError ? <AccessError /> : <Loader />}
      </div>
    );
  }
@ -323,7 +289,7 @@ const SpotOverviewConnector = observer(() => {

  const onClose = () => {
    spotPlayerStore.setActivePanel(null);
-  }
+  };
  return (
    <SpotOverviewPanelCont
      exceptionsList={exceptionsList}
--- a/frontend/app/components/Spots/SpotPlayer/components/AccessError.tsx
+++ b/frontend/app/components/Spots/SpotPlayer/components/AccessError.tsx
@ -0,0 +1,40 @@
+import { Button, Card } from 'antd';
+import React from 'react';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import { Icon } from 'UI'
+
+function AccessError() {
+  return (
+    <>
+      <div className="w-full h-full block ">
+        <div className="flex bg-white border-b text-center justify-center py-4">
+          <a href="https://openreplay.com/spot" target="_blank">
+            <Button
+              type="text"
+              className="orSpotBranding flex gap-1 items-center"
+              size="large"
+            >
+              <Icon size={40} name={'integrations/openreplay'} />
+              <div className="flex flex-row gap-2 items-center text-start">
+                <div className={'text-3xl font-semibold '}>OpenReplay Spot</div>
+              </div>
+            </Button>
+          </a>
+        </div>
+        <Card className="w-1/2 mx-auto rounded-b-full shadow-sm text-center flex flex-col justify-center items-center z-50 min-h-60">
+          <div className={'font-semibold text-xl'}>
+            The Spot link has expired.
+          </div>
+          <p className="text-lg">
+            Contact the person who shared it to re-spot.
+          </p>
+        </Card>
+        <div className="rotate-180 -z-10 w-fit mx-auto -mt-5 hover:mt-2 transition-all ease-in-out hover:rotate-0 hover:transition-all hover:ease-in-out duration-500 hover:duration-150">
+          <AnimatedSVG name={ICONS.NO_RECORDINGS} size={60} />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default AccessError;
--- a/frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx
+++ b/frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx
@ -188,7 +188,7 @@ function SpotVideoContainer({
          {isProcessing ? (
            <Alert
              className='trimIsProcessing rounded-lg shadow-sm border-indigo-500 bg-indigo-50'
-              message="You’re viewing the entire recording. The trimmed Spot will be available here shortly."
+              message="You’re viewing the original recording. Processed Spot will be available here shortly."
              showIcon
              type="info"
              icon={<InfoCircleOutlined style={{ color: '#394dfe' }} />}
@ -196,7 +196,7 @@ function SpotVideoContainer({
          ) : prevIsProcessing ? (
            <Alert
              className='trimIsReady rounded-lg shadow-sm border-0'
-              message="Your trimmed Spot is available!"
+              message="Your processed Spot is ready!"
              showIcon
              type="success"
              action={
--- a/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx
+++ b/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx
@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useStore } from 'App/mstore';
 import { debounce } from 'App/utils';
-import { Icon } from 'UI';
+import ReloadButton from 'Shared/ReloadButton';

 const SpotsListHeader = observer(
  ({
@ -11,10 +11,12 @@ const SpotsListHeader = observer(
    selectedCount,
    onClearSelection,
    isEmpty,
+    onRefresh,
  }: {
    onDelete: () => void;
    selectedCount: number;
    onClearSelection: () => void;
+    onRefresh: () => void;
    isEmpty?: boolean;
  }) => {
    const { spotStore } = useStore();
@ -47,6 +49,7 @@ const SpotsListHeader = observer(
      <div className={'flex items-center justify-between w-full'}>
        <div className="flex gap-1 items-center">
          <h1 className={'text-2xl capitalize mr-2'}>Spot List</h1>
+          <ReloadButton buttonSize={'small'} onClick={onRefresh} iconSize={16} />
        </div>

        {isEmpty ? null : (
--- a/frontend/app/components/Spots/SpotsList/index.tsx
+++ b/frontend/app/components/Spots/SpotsList/index.tsx
@ -85,6 +85,7 @@ function SpotsList() {
      >
        <SpotsListHeader
          onDelete={batchDelete}
+          onRefresh={spotStore.fetchSpots}
          selectedCount={selectedSpots.length}
          onClearSelection={clearSelection}
          isEmpty={isEmpty}
--- a/frontend/app/components/shared/ReloadButton/ReloadButton.tsx
+++ b/frontend/app/components/shared/ReloadButton/ReloadButton.tsx
@ -1,21 +1,19 @@
 import React from 'react';
 import {Button, Tooltip} from 'antd';
 import { ListRestart } from 'lucide-react';
-import cn from 'classnames';

 interface Props {
  loading?: boolean;
  onClick: () => void;
  iconSize?: number;
-  iconName?: string;
-  className?: string;
+  buttonSize: 'small' | 'middle' | 'large' | undefined;
 }
 export default function ReloadButton(props: Props) {
-  const { loading, onClick, iconSize = '20', iconName = 'arrow-repeat', className = '' } = props;
+  const { loading, onClick, iconSize = 18, buttonSize } = props;
  return (
    <Tooltip title="Refresh" placement='right'>
-      <Button  type="default" onClick={onClick}>
-       <ListRestart size={18} />
+      <Button type="default" size={buttonSize} onClick={onClick}>
+       <ListRestart size={iconSize} />
      </Button>
    </Tooltip>
  );
--- a/spot/entrypoints/popup/Settings.tsx
+++ b/spot/entrypoints/popup/Settings.tsx
@ -3,15 +3,13 @@ import orLogo from "@/assets/orSpot.svg";
 import arrowLeft from "@/assets/arrow-left.svg";

 function Settings({ goBack }: { goBack: () => void }) {
-  // State signals for various settings
  const [includeDevTools, setIncludeDevTools] = createSignal(true);
  const [openInNewTab, setOpenInNewTab] = createSignal(true);
-  const [showIngest, setShowIngest] = createSignal(true);
+  const [showIngest, setShowIngest] = createSignal(false);
  const [ingest, setIngest] = createSignal("https://app.openreplay.com");
  const [editIngest, setEditIngest] = createSignal(false);
  const [tempIngest, setTempIngest] = createSignal("");

-  // Fetch settings from Chrome local storage when the component mounts
  onMount(() => {
    chrome.storage.local.get("settings", (data: any) => {
      if (data.settings) {
@ -24,12 +22,11 @@ function Settings({ goBack }: { goBack: () => void }) {
        setTempIngest(
          data.settings.ingestPoint || "https://app.openreplay.com",
        );
-        setEditIngest(!data.settings.ingestPoint); // Enter edit mode if no ingest point is configured
+        setEditIngest(!data.settings.ingestPoint);
      }
    });
  });

-  // Toggle for including DevTools (both Console Logs and Network Calls)
  const toggleIncludeDevTools = (e: Event) => {
    e.preventDefault();
    e.stopPropagation();
@ -41,7 +38,6 @@ function Settings({ goBack }: { goBack: () => void }) {
    });
  };

-  // Toggle for showing/hiding Ingest Point
  const toggleShowIngest = (e: Event) => {
    e.preventDefault();
    e.stopPropagation();
@ -53,7 +49,6 @@ function Settings({ goBack }: { goBack: () => void }) {
    });
  };

-  // Apply changes to the ingest point
  const applyIngest = () => {
    const val = tempIngest();
    if (isValidUrl(val)) {
@ -111,7 +106,7 @@ function Settings({ goBack }: { goBack: () => void }) {

      <div class="flex flex-col">
        <div class="p-4 border-b border-slate-300 hover:bg-indigo-50">
-        <div class="flex flex-row justify-between items-center">
+          <div class="flex flex-row justify-between items-center">
            <p class="font-semibold mb-1 flex items-center">
             View Recording
            </p>
@ -165,8 +160,7 @@ function Settings({ goBack }: { goBack: () => void }) {
            </div>
          </div>
          <p class="text-xs">
-            The URL for sending website activity data, saving videos, sending
-            events, and opening the login screen.
+            Change this URL if you are using a self-hosted OpenReplay instance.
          </p>

          {showIngest() && (
--- a/spot/package.json
+++ b/spot/package.json
@ -2,7 +2,7 @@
  "name": "wxt-starter",
  "description": "manifest.json description",
  "private": true,
-  "version": "1.0.4",
+  "version": "1.0.5",
  "type": "module",
  "scripts": {
    "dev": "wxt",