Function UIModeView

packages/trace-viewer/src/ui/uiModeView.tsx:97–573

({
})

}

export const UIModeView: React.FC<{}> = ({
}) => {
  const [filterText, setFilterText] = React.useState<string>('');
  const [isShowingOutput, setIsShowingOutput] = React.useState<boolean>(false);
  const [outputContainsError, setOutputContainsError] = React.useState(false);
  const [statusFilters, setStatusFilters] = React.useState<Map<string, boolean>>(new Map([
    ['passed', false],
    ['failed', false],
    ['skipped', false],
  ]));
  const [projectFilters, setProjectFilters] = React.useState<Map<string, boolean>>(new Map());
  const [testModel, setTestModel] = React.useState<TeleSuiteUpdaterTestModel>();
  const [progress, setProgress] = React.useState<TeleSuiteUpdaterProgress & { total: number } | undefined>();
  const [selectedItem, setSelectedItem] = React.useState<{ treeItem?: TreeItem, testFile?: SourceLocation, testCase?: reporterTypes.TestCase }>({});
  const [isLoading, setIsLoading] = React.useState<boolean>(false);
  const [runningState, setRunningState] = React.useState<{ testIds: Set<string>, itemSelectedByUser?: boolean, completed?: boolean } | undefined>();
  const isRunningTest = runningState && !runningState.completed;

  const [watchAll, setWatchAll] = useSetting<boolean>('watch-all', false);
  const [watchedTreeIds, setWatchedTreeIds] = React.useState<{ value: Set<string> }>({ value: new Set() });
  const commandQueue = React.useRef(Promise.resolve());
  const runTestBacklog = React.useRef<{ testIds: Set<string>, locations: Set<string> }>({ testIds: new Set(), locations: new Set() });
  const [collapseAllCount, setCollapseAllCount] = React.useState(0);
  const [expandAllCount, setExpandAllCount] = React.useState(0);
  const [isDisconnected, setIsDisconnected] = React.useState(false);
  const [hasBrowsers, setHasBrowsers] = React.useState(true);
  const [testServerConnection, setTestServerConnection] = React.useState<TestServerConnection>();
  const [teleSuiteUpdater, setTeleSuiteUpdater] = React.useState<TeleSuiteUpdater>();
  const [settingsVisible, setSettingsVisible] = React.useState(false);
  const [testingOptionsVisible, setTestingOptionsVisible] = React.useState(false);
  const [revealSource, setRevealSource] = React.useState(false);
  const onRevealSource = React.useCallback(() => setRevealSource(true), [setRevealSource]);

  const [singleWorker, setSingleWorker] = useSetting<boolean>('single-worker', false);
  const [updateSnapshots, setUpdateSnapshots] = useSetting<reporterTypes.FullConfig['updateSnapshots']>('updateSnapshots', 'missing');
  const [onlyChanged, setOnlyChanged] = useSetting<boolean>('only-changed', false);
  const [stopOnFailure, setStopOnFailure] = useSetting<boolean>('stop-on-failure', false);
  const [mergeFiles] = useSetting('mergeFiles', false);

  const inputRef = React.useRef<HTMLInputElement>(null);

  const reloadTests = React.useCallback(() => {
    setTestServerConnection(prevConnection => {
      prevConnection?.close();
      return new TestServerConnection(new WebSocketTestServerTransport(wsURL));
    });
  }, []);

  // Load tests on startup.
  React.useEffect(() => {
    inputRef.current?.focus();
    setIsLoading(true);
    reloadTests();
  }, [reloadTests]);

  // Wire server connection to the auxiliary UI features.
  React.useEffect(() => {
    if (!testServerConnection)