fix #7857 -- make that you must start a project to see its files clearer

- this is not the more ambitious "right" fix discussed on this issue,
  but should help a lot anyways

Author: williamstein

src/packages/frontend/project/explorer/explorer.tsx

@@ -482,13 +482,7 @@ const Explorer0 = rclass(
             className="smc-vfill"
           >
             <FileListing
-              isRunning={
-                this.props.project_map?.getIn([
-                  this.props.project_id,
-                  "state",
-                  "state",
-                ]) == "running"
-              }
+              isRunning={project_is_running}
               name={this.props.name}
               active_file_sort={this.props.active_file_sort}
               listing={listing}
@@ -732,12 +726,10 @@ const Explorer0 = rclass(
         project_is_running = true;
         // next, we check if this is a common user (not public)
       } else if (my_group !== "public") {
-        if (this.props.project_map != undefined) {
-          project_state = this.props.project_map.getIn([
-            this.props.project_id,
-            "state",
-          ]) as any;
-        }
+        project_state = this.props.project_map?.getIn([
+          this.props.project_id,
+          "state",
+        ]) as any;
         project_is_running = project_state?.get("state") == "running";
       } else {
         project_is_running = false;

src/packages/frontend/project/explorer/file-listing/file-listing.tsx

@@ -9,7 +9,7 @@ import * as immutable from "immutable";
 import React, { useEffect, useRef, useState } from "react";
 import { useInterval } from "react-interval-hook";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
-
+import { Alert, Spin } from "antd";
 import {
   AppRedux,
   Rendered,
@@ -65,26 +65,26 @@ export function watchFiles({ actions, current_path }): void {
   }
 }
 
-export const FileListing: React.FC<Props> = (props: Props) => {
-  const {
-    actions,
-    redux,
-    name,
-    active_file_sort,
-    listing,
-    file_map,
-    checked_files,
-    current_path,
-    create_folder,
-    create_file,
-    selected_file_index,
-    project_id,
-    shift_is_down,
-    sort_by,
-    configuration_main,
-    file_search = "",
-    isRunning,
-  } = props;
+export const FileListing: React.FC<Props> = ({
+  actions,
+  redux,
+  name,
+  active_file_sort,
+  listing,
+  file_map,
+  checked_files,
+  current_path,
+  create_folder,
+  create_file,
+  selected_file_index,
+  project_id,
+  shift_is_down,
+  sort_by,
+  configuration_main,
+  file_search = "",
+  isRunning,
+}: Props) => {
+  const [starting, setStarting] = useState<boolean>(false);
 
   const prev_current_path = usePrevious(current_path);
 
@@ -229,6 +229,41 @@ export const FileListing: React.FC<Props> = (props: Props) => {
     }
   }
 
+  if (!isRunning && listing.length == 0) {
+    return (
+      <Alert
+        style={{
+          textAlign: "center",
+          margin: "15px auto",
+          maxWidth: "400px",
+        }}
+        showIcon
+        type="warning"
+        message={
+          <div style={{ padding: "30px", fontSize: "14pt" }}>
+            <a
+              onClick={async () => {
+                if (starting) return;
+                try {
+                  setStarting(true);
+                  await actions.fetch_directory_listing_directly(
+                    current_path,
+                    true,
+                  );
+                } finally {
+                  setStarting(false);
+                }
+              }}
+            >
+              Start this project to see your files.
+              {starting && <Spin />}
+            </a>
+          </div>
+        }
+      />
+    );
+  }
+
   return (
     <>
       {!isRunning && listing.length > 0 && (