Removed theneprovider

src/apps/code-editor/src/app/components/FileActions/FileActions.js

@@ -1,236 +1,141 @@
-import { memo, Fragment, useState } from "react";
-import { Switch, Route, useRouteMatch, useHistory } from "react-router";
-import { Box, Tooltip, Typography, alpha } from "@mui/material";
+import { memo, Fragment } from "react";
+
+import { Switch, Route, useRouteMatch } from "react-router";
+
+import Button from "@mui/material/Button";
 import HistoryIcon from "@mui/icons-material/History";
 import EditIcon from "@mui/icons-material/Edit";
 import StorageIcon from "@mui/icons-material/Storage";
+import { CopyButton } from "@zesty-io/material";
+
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBolt, faFileCode } from "@fortawesome/free-solid-svg-icons";
-import WidgetsIcon from "@mui/icons-material/Widgets";
 import Link from "@mui/material/Link";
-import CheckIcon from "@mui/icons-material/Check";
+
+import { AppLink } from "@zesty-io/core/AppLink";
 import { Notice } from "@zesty-io/core/Notice";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+
 import { DifferActions } from "./components/DifferActions";
 import { EditorActions } from "./components/EditorActions";
 import { Delete } from "./components/Delete";
-import RestoreRoundedIcon from "@mui/icons-material/RestoreRounded";
-import { Icon, IconButton } from "@mui/material";
-
-const ActionButton = ({
-  color = "primary",
-  onClick = null,
-  toolTip = "",
-  children,
-  ...other
-}) => {
-  return (
-    <Tooltip title={toolTip} arrow>
-      <IconButton
-        size="small"
-        color="inherit"
-        onClick={onClick}
-        {...other}
-        sx={{
-          "&:hover": {
-            backgroundColor: (theme) =>
-              alpha(theme.palette.background.default, 0.05),
-          },
-        }}
-      >
-        {children}
-      </IconButton>
-    </Tooltip>
-  );
-};
 
+import styles from "./FileActions.less";
 export const FileActions = memo(function FileActions(props) {
-  const history = useHistory();
   const match = useRouteMatch("/code/file/:fileType/:fileZUID");
-  const [isCopied, setIsCopied] = useState(false);
-
-  const handleCopyClick = (data) => {
-    navigator?.clipboard
-      ?.writeText(data)
-      .then(() => {
-        console.log("Written");
-        setIsCopied(true);
-        setTimeout(() => {
-          setIsCopied(false);
-        }, 500);
-      })
-      .catch((err) => {
-        console.error("Error");
-        console.error(err);
-      });
-  };
 
   return (
-    <Box
-      component="header"
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        position: "relative",
-        minHeight: "42px",
-        padding: "8px 0 12px 0px",
-        zIndex: 1,
-      }}
-    >
-      <Box
-        display="flex"
-        alignItems="center"
-        whiteSpace="nowrap"
-        overflow="hidden"
-        flexDirection="row"
-        justifyContent="space-between"
-      >
+    <header className={styles.FileActions}>
+      <div className={styles.FileMeta}>
         {props.contentModelZUID ? (
-          <Tooltip title="Preview JSON" arrow>
-            <Link
-              underline="none"
-              color="secondary"
-              href={`${CONFIG.URL_PREVIEW_FULL}/-/instant/${props.contentModelZUID}.json`}
-              target="_blank"
-              // title="Preview JSON"
-              sx={{ m: 0, pr: 2, pl: 3.25, py: 0 }}
-            >
-              <Icon fontSize="small">
-                <FontAwesomeIcon size="xs" icon={faBolt} />
-              </Icon>
-            </Link>
-          </Tooltip>
+          <Link
+            underline="none"
+            color="secondary"
+            href={`${CONFIG.URL_PREVIEW_FULL}/-/instant/${props.contentModelZUID}.json`}
+            target="_blank"
+            title="Preview JSON"
+            sx={{ m: 0, pr: 2, pl: 3.25, py: 0 }}
+          >
+            <FontAwesomeIcon icon={faBolt} />
+          </Link>
         ) : (
-          <Box sx={{ m: 0, pr: 2, pl: 3.25, py: 0 }}>
-            <Icon fontSize="small">
-              <FontAwesomeIcon size="xs" icon={faFileCode} />
-            </Icon>
-          </Box>
-        )}
-        <Typography variant="body2" noWrap>
-          {props.fileName}
-        </Typography>
-      </Box>
-      <Box
-        display="flex"
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="flex-end"
-        pr={2}
-        columnGap={0.5}
-      >
-        {!props?.currentCode && !!props?.version && (
-          <Tooltip title="Delete File" arrow>
-            <Delete
-              dispatch={props.dispatch}
-              fileZUID={props.fileZUID}
-              status={props.status}
-              fileName={props.fileName}
-            />
-          </Tooltip>
+          <FontAwesomeIcon className={styles.FileLink} icon={faFileCode} />
         )}
-        <ActionButton
-          toolTip="Copy ZUID"
-          // title="Copy ZUID"
-          onClick={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            handleCopyClick(props.fileZUID);
-          }}
-        >
-          {isCopied ? (
-            <CheckIcon color="success" fontSize="small" />
-          ) : (
-            <WidgetsIcon fontSize="small" />
-          )}
-        </ActionButton>
+
         <Switch>
           <Route path={`${match.url}`}>
-            {/* <div className={styles.QuickLinks}> */}
-            {props.contentModelZUID && (
-              <Fragment>
-                <ActionButton
-                  toolTip="Edit Related Content"
-                  onClick={() =>
-                    history.push(`/content/${props.contentModelZUID}`)
-                  }
-                >
-                  <EditIcon fontSize="small" />
-                </ActionButton>
+            <div className={styles.QuickLinks}>
+              {props.contentModelZUID && (
+                <Fragment>
+                  <AppLink
+                    className={styles.Link}
+                    to={`/content/${props.contentModelZUID}`}
+                    title="Edit Related Content"
+                  >
+                    <Button variant="text" color="inherit" size="small">
+                      <EditIcon fontSize="small" />
+                    </Button>
+                  </AppLink>
 
-                <ActionButton
-                  toolTip="Edit Related Model"
-                  onClick={() =>
-                    history.push(`/schema/${props.contentModelZUID}`)
-                  }
-                >
-                  <StorageIcon fontSize="small" />
-                </ActionButton>
-              </Fragment>
-            )}
+                  <AppLink
+                    className={styles.Link}
+                    to={`/schema/${props.contentModelZUID}`}
+                    title="Edit Related Model"
+                  >
+                    <Button variant="text" color="inherit" size="small">
+                      <StorageIcon fontSize="small" />
+                    </Button>
+                  </AppLink>
+                </Fragment>
+              )}
 
-            {!props?.currentCode && !!props?.version && (
-              <ActionButton
-                toolTip="Diff Versions"
-                onClick={() =>
-                  history.push(
-                    `/code/file/${props.fileType}/${
-                      props.fileZUID
-                    }/diff/local,${
-                      props.publishedVersion
-                        ? props.publishedVersion
-                        : props.version
-                    }`
-                  )
-                }
+              <AppLink
+                className={styles.Link}
+                to={`/code/file/${props.fileType}/${
+                  props.fileZUID
+                }/diff/local,${
+                  props.publishedVersion
+                    ? props.publishedVersion
+                    : props.version
+                }`}
+                title="Diff Versions"
               >
-                <RestoreRoundedIcon fontSize="small" />
-              </ActionButton>
-            )}
+                <Button variant="text" color="inherit" size="small">
+                  <HistoryIcon fontSize="small" />
+                </Button>
+              </AppLink>
+            </div>
           </Route>
         </Switch>
 
-        {!props.synced && (
-          <Notice>
-            There is a new remote version ahead of your local changes
-          </Notice>
-        )}
-        <Switch>
-          <Route path={`${match.url}/diff`}>
-            <DifferActions
-              dispatch={props.dispatch}
-              fileZUID={props.fileZUID}
-              fileType={props.fileType}
-              publishedVersion={props.publishedVersion}
-              status={props.status}
-              synced={props.synced}
-              setVersionCodeLeft={props.setVersionCodeLeft}
-              setVersionCodeRight={props.setVersionCodeRight}
-              setLoading={props.setLoading}
-              currentCode={props.currentCode}
-            />
-          </Route>
-          <Route path={`${match.url}`}>
-            <Box
-              display="flex"
-              flexDirection="row"
-              alignItems="center"
-              columnGap={1}
-              pl={2}
-            >
-              <EditorActions
-                dispatch={props.dispatch}
-                fileZUID={props.fileZUID}
-                fileType={props.fileType}
-                version={props.version}
-                synced={props.synced}
-                status={props.status}
-              />
-            </Box>
-          </Route>
-        </Switch>
-      </Box>
-    </Box>
+        <div className={styles.FileName}>
+          <CopyButton
+            variant="text"
+            color="inherit"
+            size="small"
+            value={props.fileZUID}
+          />
+          {props.fileName}
+        </div>
+      </div>
+
+      {!props.synced && (
+        <Notice>
+          There is a new remote version ahead of your local changes
+        </Notice>
+      )}
+
+      <Switch>
+        <Route path={`${match.url}/diff`}>
+          <DifferActions
+            dispatch={props.dispatch}
+            fileZUID={props.fileZUID}
+            fileType={props.fileType}
+            publishedVersion={props.publishedVersion}
+            status={props.status}
+            synced={props.synced}
+            setVersionCodeLeft={props.setVersionCodeLeft}
+            setVersionCodeRight={props.setVersionCodeRight}
+            setLoading={props.setLoading}
+            currentCode={props.currentCode}
+          />
+        </Route>
+        <Route path={`${match.url}`}>
+          <EditorActions
+            dispatch={props.dispatch}
+            fileZUID={props.fileZUID}
+            fileType={props.fileType}
+            version={props.version}
+            synced={props.synced}
+            status={props.status}
+          />
+          <Delete
+            dispatch={props.dispatch}
+            fileZUID={props.fileZUID}
+            status={props.status}
+            fileName={props.fileName}
+          />
+        </Route>
+      </Switch>
+    </header>
   );
 });

src/apps/code-editor/src/app/components/FileActions/FileActions.less

@@ -13,6 +13,7 @@
   .FileMeta {
     display: flex;
     align-items: center;
+
     .FileLink {
       margin: 0;
       padding: 0 16px 0 26px;
@@ -53,6 +54,12 @@
           opacity: 0.7;
         }
       }
+      button {
+        min-width: fit-content;
+        button.MuiLoadingButton-root {
+          background-color: #aba7a793;
+        }
+      }
     }
   }
 }