change(ui) - popover dropdown, and replayer subheader buttons

2022-11-28 13:42:20 +01:00 · 2022-11-28 13:42:20 +01:00 · e2b8601390
commit e2b8601390
parent e9e5a93999
7 changed files with 124 additions and 116 deletions
--- a/frontend/app/components/Session_/Autoplay/Autoplay.tsx
+++ b/frontend/app/components/Session_/Autoplay/Autoplay.tsx
@ -2,8 +2,7 @@ import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { setAutoplayValues } from 'Duck/sessions';
 import { session as sessionRoute } from 'App/routes';
-import { Link, Icon, Toggler, Tooltip } from 'UI';
-import { Controls as PlayerControls, connectPlayer } from 'Player';
+import { Link, Icon, Tooltip } from 'UI';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import cn from 'classnames';
 import { fetchAutoplaySessions } from 'Duck/search';
@ -13,12 +12,10 @@ const PER_PAGE = 10;
 interface Props extends RouteComponentProps {
  previousId: string;
  nextId: string;
-  autoplay: boolean;
  defaultList: any;
  currentPage: number;
  total: number;
  setAutoplayValues?: () => void;
-  toggleAutoplay?: () => void;
  latestRequestTime: any;
  sessionIds: any;
  fetchAutoplaySessions?: (page: number) => Promise<void>;
@ -29,7 +26,6 @@ function Autoplay(props: Props) {
    nextId,
    currentPage,
    total,
-    autoplay,
    sessionIds,
    latestRequestTime,
    match: {
@ -54,14 +50,6 @@ function Autoplay(props: Props) {

  return (
    <div className="flex items-center">
-      <div
-        onClick={props.toggleAutoplay}
-        className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2"
-      >
-        <Toggler name="sessionsLive" onChange={props.toggleAutoplay} checked={autoplay} />
-        <span className="ml-2 whitespace-nowrap">Auto-Play</span>
-      </div>
-
      <Tooltip
        placement="bottom"
        title={<div className="whitespace-nowrap">Play Previous Session</div>}
@ -111,13 +99,4 @@ export default connect(
    latestRequestTime: state.getIn(['search', 'latestRequestTime']),
  }),
  { setAutoplayValues, fetchAutoplaySessions }
-)(
-  connectPlayer(
-    (state: any) => ({
-      autoplay: state.autoplay,
-    }),
-    {
-      toggleAutoplay: PlayerControls.toggleAutoplay,
-    }
-  )(withRouter(Autoplay))
-);
+)(withRouter(Autoplay));
--- a/frontend/app/components/Session_/Issues/Issues.js
+++ b/frontend/app/components/Session_/Issues/Issues.js
@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Icon, Popover } from 'UI';
+import { Icon, Popover, Button } from 'UI';
 import IssuesModal from './IssuesModal';
 import { fetchProjects, fetchMeta } from 'Duck/assignments';
 import stl from './issues.module.css';
@ -67,30 +67,27 @@ class Issues extends React.Component {
    const provider = issuesIntegration.provider;

    return (
-      <div className="relative h-full w-full p-3">
-        <div className={stl.buttonWrapper}>
-          <Popover
-            onOpen={this.handleOpen}
-            render={({ close }) => (
-              <div>
-                <IssuesModal
-                  provider={provider}
-                  sessionId={sessionId}
-                  closeHandler={close}
-                />
-              </div>
-            )}
-          >
-            <div
-              className="flex items-center"
-              disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}
-            >
-              <Icon name={`integrations/${provider === 'jira' ? 'jira' : 'github'}`} size="16" />
-              <span className="ml-2">Create Issue</span>
-            </div>
-          </Popover>
+      <Popover
+        onOpen={this.handleOpen}
+        render={({ close }) => (
+          <div>
+            <IssuesModal provider={provider} sessionId={sessionId} closeHandler={close} />
+          </div>
+        )}
+      >
+        <div className="relative">
+          <Button icon={`integrations/${provider === 'jira' ? 'jira' : 'github'}`} variant="text">
+            Create Issue
+          </Button>
        </div>
-      </div>
+        {/* <div
+        className="flex items-center cursor-pointer"
+        disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}
+      >
+        <Icon name={`integrations/${provider === 'jira' ? 'jira' : 'github'}`} size="16" />
+        <span className="ml-2 whitespace-nowrap">Create Issue</span>
+      </div> */}
+      </Popover>
    );
  }
 }
--- a/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
+++ b/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react';
 import cn from 'classnames';
-import { connect } from 'react-redux'
+import { connect } from 'react-redux';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { Button, Link } from 'UI'
-import { session as sessionRoute, withSiteId } from 'App/routes'
+import { Button, Link } from 'UI';
+import { session as sessionRoute, withSiteId } from 'App/routes';
 import stl from './AutoplayTimer.module.css';
 import clsOv from './overlay.module.css';

@ -13,49 +13,53 @@ interface IProps extends RouteComponentProps {
 }

 function AutoplayTimer({ nextId, siteId, history }: IProps) {
-  let timer: NodeJS.Timer
+  let timer: NodeJS.Timer;
  const [cancelled, setCancelled] = useState(false);
  const [counter, setCounter] = useState(5);

  useEffect(() => {
-    if(counter > 0) {
+    if (counter > 0) {
      timer = setTimeout(() => {
-        setCounter(counter - 1)
-      }, 1000)
+        setCounter(counter - 1);
+      }, 1000);
    }

    if (counter === 0) {
-      history.push(withSiteId(sessionRoute(nextId), siteId))
+      history.push(withSiteId(sessionRoute(nextId), siteId));
    }

    return () => clearTimeout(timer);
-  }, [counter])
+  }, [counter]);

  const cancel = () => {
-    clearTimeout(timer)
-    setCancelled(true)
-  }
+    clearTimeout(timer);
+    setCancelled(true);
+  };

-  if (cancelled)
-    return null
+  if (cancelled) return null;

  return (
-    <div className={ cn(clsOv.overlay, stl.overlayBg) } >
+    <div className={cn(clsOv.overlay, stl.overlayBg)}>
      <div className="border p-6 shadow-lg bg-white rounded">
        <div className="py-4">Next recording will be played in {counter}s</div>
        <div className="flex items-center">
-          <Button primary="outline" onClick={cancel}>Cancel</Button>
+          <Button primary="outline" onClick={cancel}>
+            Cancel
+          </Button>
          <div className="px-3" />
-          <Link to={ sessionRoute(nextId) } disabled={!nextId}>
+          <Link to={sessionRoute(nextId)} disabled={!nextId}>
            <Button variant="primary">Play Now</Button>
          </Link>
        </div>
+        <div className="mt-2 italic">Turn on/off auto-replay in: More options</div>
      </div>
    </div>
-  )
+  );
 }

-export default withRouter(connect(state => ({
-  siteId: state.getIn([ 'site', 'siteId' ]),
-  nextId: parseInt(state.getIn([ 'sessions', 'nextId' ])),
-}))(AutoplayTimer))
+export default withRouter(
+  connect((state: any) => ({
+    siteId: state.getIn(['site', 'siteId']),
+    nextId: parseInt(state.getIn(['sessions', 'nextId'])),
+  }))(AutoplayTimer)
+);
--- a/frontend/app/components/Session_/Subheader.js
+++ b/frontend/app/components/Session_/Subheader.js
@ -10,6 +10,7 @@ import { connectPlayer, pause } from 'Player';
 import ItemMenu from './components/HeaderMenu';
 import { useModal } from 'App/components/Modal';
 import BugReportModal from './BugReport/BugReportModal';
+import AutoplayToggle from 'Shared/AutoplayToggle';

 function SubHeader(props) {
  const [isCopied, setCopied] = React.useState(false);
@ -29,8 +30,16 @@ function SubHeader(props) {
      exceptionsList: props.exceptionsList,
      eventsList: props.eventsList,
      endTime: props.endTime,
-    }
-    showModal(<BugReportModal width={props.width} height={props.height} xrayProps={xrayProps} hideModal={hideModal} />, { right: true });
+    };
+    showModal(
+      <BugReportModal
+        width={props.width}
+        height={props.height}
+        xrayProps={xrayProps}
+        hideModal={hideModal}
+      />,
+      { right: true }
+    );
  };

  return (
@ -55,39 +64,31 @@ function SubHeader(props) {
          className="ml-auto text-sm flex items-center color-gray-medium gap-2"
          style={{ width: 'max-content' }}
        >
-          <Button icon="file-pdf" variant="text" onClick={showReportModal}>Create Bug Report</Button>
+          <Button icon="file-pdf" variant="text" onClick={showReportModal}>
+            Create Bug Report
+          </Button>
          <NotePopup />
+          <Issues sessionId={props.sessionId} />
+          <SharePopup
+            entity="sessions"
+            id={props.sessionId}
+            showCopyLink={true}
+            trigger={
+              <div className="relative">
+                <Button icon="share-alt" variant="text" className="relative">
+                  Share
+                </Button>
+              </div>
+            }
+          />
          <ItemMenu
            items={[
+              {
+                key: 1,
+                component: <AutoplayToggle />,
+              },
              {
                key: 2,
-                component: props.jiraConfig && props.jiraConfig.token && (
-                  <Issues sessionId={props.sessionId} />
-                ),
-              },
-              {
-                key: 3,
-                component: (
-                  <SharePopup
-                    entity="sessions"
-                    id={props.sessionId}
-                    showCopyLink={true}
-                    trigger={
-                      <div className="flex items-center h-full w-full">
-                        <Icon
-                          className="mr-2"
-                          disabled={props.disabled}
-                          name="share-alt"
-                          size="16"
-                        />
-                        <span>Share</span>
-                      </div>
-                    }
-                  />
-                ),
-              },
-              {
-                key: 4,
                component: <Bookmark noMargin sessionId={props.sessionId} />,
              },
            ]}
@ -102,20 +103,17 @@ function SubHeader(props) {
  );
 }

-const SubH = connectPlayer(
-  (state) => ({
-    width: state.width,
-    height: state.height,
-    currentLocation: state.location,
-    resourceList: state.resourceList
-      .filter((r) => r.isRed() || r.isYellow())
-      .concat(state.fetchList.filter((i) => parseInt(i.status) >= 400))
-      .concat(state.graphqlList.filter((i) => parseInt(i.status) >= 400)),
-    exceptionsList: state.exceptionsList,
-    eventsList: state.eventList,
-    endTime: state.endTime,
-  })
-
-  )(SubHeader);
+const SubH = connectPlayer((state) => ({
+  width: state.width,
+  height: state.height,
+  currentLocation: state.location,
+  resourceList: state.resourceList
+    .filter((r) => r.isRed() || r.isYellow())
+    .concat(state.fetchList.filter((i) => parseInt(i.status) >= 400))
+    .concat(state.graphqlList.filter((i) => parseInt(i.status) >= 400)),
+  exceptionsList: state.exceptionsList,
+  eventsList: state.eventList,
+  endTime: state.endTime,
+}))(SubHeader);

 export default React.memo(SubH);
--- a/frontend/app/components/shared/AutoplayToggle/AutoplayToggle.tsx
+++ b/frontend/app/components/shared/AutoplayToggle/AutoplayToggle.tsx
@ -0,0 +1,29 @@
+import React from 'react';
+import { Controls as PlayerControls, connectPlayer } from 'Player';
+import { Toggler } from 'UI';
+
+interface Props {
+  toggleAutoplay: () => void;
+  autoplay: boolean;
+}
+function AutoplayToggle(props: Props) {
+  const { autoplay } = props;
+  return (
+    <div
+      onClick={props.toggleAutoplay}
+      className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2"
+    >
+      <Toggler name="sessionsLive" onChange={props.toggleAutoplay} checked={autoplay} />
+      <span className="ml-2 whitespace-nowrap">Auto-Play</span>
+    </div>
+  );
+}
+
+export default connectPlayer(
+  (state: any) => ({
+    autoplay: state.autoplay,
+  }),
+  {
+    toggleAutoplay: PlayerControls.toggleAutoplay,
+  }
+)(AutoplayToggle);
--- a/frontend/app/components/shared/AutoplayToggle/index.ts
+++ b/frontend/app/components/shared/AutoplayToggle/index.ts
@ -0,0 +1 @@
+export { default } from './AutoplayToggle';
--- a/frontend/app/components/shared/SharePopup/SharePopup.js
+++ b/frontend/app/components/shared/SharePopup/SharePopup.js
@ -128,7 +128,7 @@ export default class SharePopup extends React.PureComponent {
          </div>
        )}
      >
-        <div className="p-3 w-full">{trigger}</div>
+        {trigger}
      </Popover>
    );
  }