(feat) File/package/canister remove/rename on hover

.github/workflows/frontend.yml

@@ -0,0 +1,52 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Frontend
+
+# Controls when the action will run. Triggers the workflow on push or pull request
+# events but only for the main branch
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+    # environment variables to set for dfx
+    env:
+      DFX_VERSION: 0.8.0
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+      - name: Install DFX and Vessel
+        run: |
+          echo y | DFX_VERSION=$DFX_VERSION bash -ci "$(curl -fsSL https://sdk.dfinity.org/install.sh)"
+          echo "/home/runner/bin" >> $GITHUB_PATH
+          ./src/config/vessel-install.sh
+
+      - name: DFX build steps
+        run: |
+          echo "npm install from lockfile"
+          npm ci
+
+          echo "start dfx"
+          npm run prestart
+
+          echo "build for dfx artifacts"
+          dfx canister --no-wallet create --all
+          dfx build --all
+
+      - name: Test
+        run: npm run test
+
+      - name: Stop DFX
+        run: |
+          echo "dfx stop"
+          dfx stop

dfx.json

@@ -28,6 +28,10 @@
     "build": {
       "output": "build",
       "packtool": "vessel sources"
+    },
+    "start": {
+      "address": "localhost",
+      "port": 8000
     }
   },
   "networks": {

package.json

@@ -10,6 +10,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-modal": "^3.13.1",
     "@types/styled-components": "^5.1.10",
     "lodash.debounce": "^4.0.8",
     "react": "^17.0.2",
@@ -35,7 +36,7 @@
   "scripts": {
     "start": "craco start",
     "build": "craco build",
-    "test": "craco test -- --config=config/jest.config.js",
+    "test": "craco test",
     "eject": "craco eject",
     "deploy": "dfx deploy --argument '(null)'",
     "prestart": "dfx start --background --no-artificial-delay || exit 0",

src/App.tsx

@@ -245,9 +245,10 @@ export function App() {
 
   useEffect(() => {
     // Show Candid UI iframe if there are canisters
-    const isCandidReady =
+    const isCandidReady = Boolean(
       workplaceState.selectedCanister &&
-      workplaceState.canisters[workplaceState.selectedCanister];
+        workplaceState.canisters[workplaceState.selectedCanister]
+    );
     setShowCandidUI(isCandidReady);
     setCandidWidth(isCandidReady ? "30vw" : "0");
   }, [workplaceState.canisters, workplaceState.selectedCanister]);

src/assets/fonts/CircularXX.css

@@ -19,26 +19,26 @@
   font-family: "CircularXX";
   font-weight: 100;
   src: local(CircularXX), local(CircularXXWeb-Light),
-    url(./CircularXXWeb-Light.woff2) format("woff2");
+    url(CircularXXWeb-Light.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "CircularXX";
   font-weight: 400;
   src: local(CircularXX), local(CircularXXWeb-Book),
-    url(./CircularXXWeb-Book.woff2) format("woff2");
+    url(CircularXXWeb-Book.woff2) format("woff2");
 }
 
 @font-face {
   font-family: "CircularXX";
   font-weight: 700;
   src: local(CircularXX), local(CircularXXWeb-Medium),
-    url(./CircularXXWeb-Medium.woff) format("woff");
+    url(CircularXXWeb-Medium.woff) format("woff");
 }
 
 @font-face {
   font-family: "CircularXX";
   font-weight: 900;
   src: local(CircularXX), local(CircularXXWeb-Bold),
-    url(./CircularXXWeb-Bold.woff2) format("woff2");
+    url(CircularXXWeb-Bold.woff2) format("woff2");
 }

src/components/Editor.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useContext } from "react";
+import { useEffect, useContext } from "react";
 import styled from "styled-components";
 import MonacoEditor, { useMonaco } from "@monaco-editor/react";
 import ReactMarkdown from "react-markdown";

src/components/Explorer.tsx

@@ -1,22 +1,25 @@
 import { useState, useEffect, useContext } from "react";
 import styled from "styled-components";
-import iconPackage from "../assets/images/icon-package.svg";
-import iconCanister from "../assets/images/icon-canister.svg";
-import iconClose from "../assets/images/icon-close.svg";
-import iconPlus from "../assets/images/icon-plus.svg";
-import { ListButton } from "./shared/SelectList";
 import {
   WorkplaceState,
   WorkplaceDispatchContext,
 } from "../contexts/WorkplaceState";
+
+import { ListButton } from "./shared/SelectList";
 import { PackageModal } from "./PackageModal";
 import { FileModal } from "./FileModal";
 import { CanisterModal } from "./CanisterModal";
 import { DeploySetter } from "./DeplayModal";
+import { FolderStructure } from "./FolderStructure";
+import { Confirm } from "./shared/Confirm";
+
 import { PackageInfo } from "../workers/file";
 import { ILoggingStore } from "./Logger";
 import { deleteCanister } from "../build";
-import { FolderStructure } from "./FolderStructure";
+import iconPackage from "../assets/images/icon-package.svg";
+import iconCanister from "../assets/images/icon-canister.svg";
+import iconClose from "../assets/images/icon-close.svg";
+import iconPlus from "../assets/images/icon-plus.svg";
 
 const StyledExplorer = styled.div`
   width: var(--explorerWidth);
@@ -45,6 +48,9 @@ const CloseButton = styled(MyButton)`
   margin-right: -1.1rem;
   margin-left: -0.3rem;
 `;
+const ConfirmText = styled.p`
+  margin-bottom: 2rem;
+`;
 
 interface ExplorerProps {
   state: WorkplaceState;
@@ -65,25 +71,48 @@ export function Explorer({ state, ttl, logger, deploySetter }: ExplorerProps) {
   const [showPackage, setShowPackage] = useState(false);
   const [showFileModal, setShowFileModal] = useState(false);
   const [showCanisterModal, setShowCanisterModal] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [fileToModify, setFileToModify] = useState("");
   const dispatch = useContext(WorkplaceDispatchContext);
 
-  const onSelectFile = (selectedFile: string) => {
+  function handleRenameClick(e, selectedFile: string) {
+    e.stopPropagation();
+    setFileToModify(selectedFile);
+    setShowFileModal(true);
+  }
+  function handleDeleteClick(e, selectedFile: string) {
+    e.stopPropagation();
+    setFileToModify(selectedFile);
+    setShowDeleteConfirm(true);
+  }
+
+  function onSelectFile(selectedFile: string) {
     dispatch({
       type: "selectFile",
       payload: {
         path: selectedFile,
       },
     });
-  };
-  const loadPackage = (pack: PackageInfo) => {
+  }
+  function loadPackage(pack: PackageInfo) {
     dispatch({
       type: "loadPackage",
       payload: {
         name: pack.name,
         package: pack,
       },
     });
-  };
+  }
+  function onDeleteFile() {
+    dispatch({
+      type: "deleteFile",
+      payload: {
+        path: fileToModify,
+      },
+    });
+    setFileToModify("");
+  }
+
   const onCanister = async (selectedCanister: string, action: string) => {
     switch (action) {
       case "select":
@@ -178,17 +207,38 @@ export function Explorer({ state, ttl, logger, deploySetter }: ExplorerProps) {
 
   return (
     <StyledExplorer>
-      <FileModal isOpen={showFileModal} close={() => setShowFileModal(false)} />
+      <FileModal
+        isOpen={showFileModal}
+        close={() => {
+          setShowFileModal(false);
+          setFileToModify("");
+        }}
+        filename={fileToModify}
+      />
       <PackageModal
         isOpen={showPackage}
-        close={() => setShowPackage(false)}
+        close={() => {
+          setShowPackage(false);
+        }}
         loadPackage={loadPackage}
       />
       <CanisterModal
         isOpen={showCanisterModal}
         close={() => setShowCanisterModal(false)}
         deploySetter={deploySetter}
       />
+      <Confirm
+        isOpen={showDeleteConfirm}
+        onConfirm={onDeleteFile}
+        close={() => {
+          setShowDeleteConfirm(false);
+          setFileToModify("");
+        }}
+      >
+        <ConfirmText>
+          Are you sure you want to delete the file <code>{fileToModify}</code>?
+        </ConfirmText>
+      </Confirm>
       <CategoryTitle>
         Files
         <MyButton onClick={() => setShowFileModal(true)} aria-label="Add file">
@@ -197,10 +247,12 @@ export function Explorer({ state, ttl, logger, deploySetter }: ExplorerProps) {
       </CategoryTitle>
       <FolderStructure
         filePaths={Object.keys(state.files).sort()}
-        onSelectFile={onSelectFile}
         activeFile={state.selectedFile}
+        onSelectFile={onSelectFile}
+        onRenameFile={handleRenameClick}
+        onDeleteFile={handleDeleteClick}
       />
-      <CategoryTitle>
+      <CategoryTitle style={{ borderTop: "1px solid var(--grey300)" }}>
         Packages
         <MyButton onClick={() => setShowPackage(true)} aria-label="Add package">
           <img style={{ width: "1.6rem" }} src={iconPlus} alt="" />