icons added

Author: vivekbopaliya

client/common/icons.jsx

@@ -25,6 +25,8 @@ import CircleInfo from '../images/circle-info.svg';
 import Add from '../images/add.svg';
 import Filter from '../images/filter.svg';
 import Cross from '../images/cross.svg';
+import Lock from '../images/lock.svg';
+import UnLock from '../images/unlock.svg';
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -102,3 +104,5 @@ export const CircleFolderIcon = withLabel(CircleFolder);
 export const CircleInfoIcon = withLabel(CircleInfo);
 export const AddIcon = withLabel(Add);
 export const FilterIcon = withLabel(Filter);
+export const LockIcon = withLabel(Lock);
+export const UnlockIcon = withLabel(UnLock);

client/images/lock.svg

@@ -416,15 +416,14 @@ export function changeVisibility(projectId, visibility) {
     apiClient
       .patch('/project/visibility', { projectId, visibility })
       .then((response) => {
-        console.log(response.data);
         const { visibility: newVisibility } = response.data;
 
         dispatch({
           type: ActionTypes.CHANGE_VISIBILITY,
           payload: { visibility: response.data.visibility }
         });
 
-        dispatch(setToastText(`Sketch is switched to ${newVisibility}`));
+        dispatch(setToastText(`Sketch is ${newVisibility}`));
         dispatch(showToast(2000));
       })
       .catch((error) => {

client/images/lockgif.gif

@@ -21,7 +21,8 @@ import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
 import ProjectName from './ProjectName';
 import { changeVisibility } from '../../actions/project';
-import Button from '../../../../common/Button';
+import IconButton from '../../../../common/IconButton';
+import { LockIcon, UnlockIcon } from '../../../../common/icons';
 
 const Toolbar = (props) => {
   const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector(
@@ -32,8 +33,9 @@ const Toolbar = (props) => {
   const autorefresh = useSelector((state) => state.preferences.autorefresh);
   const dispatch = useDispatch();
   const { t } = useTranslation();
-  const [visibility, setVisibility] = React.useState(project.visibility);
-
+  const [visibility, setVisibility] = React.useState(
+    project.visibility || 'Public'
+  );
   const userIsOwner = user?.username === project.owner?.username;
   const toggleVisibility = () => {
     try {
@@ -129,16 +131,16 @@ const Toolbar = (props) => {
           }
           return null;
         })()}
+        {userIsOwner && project.owner && (
+          <section>
+            {visibility !== 'Private' ? (
+              <IconButton icon={UnlockIcon} onClick={toggleVisibility} />
+            ) : (
+              <IconButton icon={LockIcon} onClick={toggleVisibility} />
+            )}
+          </section>
+        )}
       </div>
-      {userIsOwner && project.owner && (
-        <section>
-          {visibility === 'Private' ? (
-            <Button onClick={toggleVisibility}>Private</Button>
-          ) : (
-            <Button onClick={toggleVisibility}>Public</Button>
-          )}
-        </section>
-      )}
       <button
         className={preferencesButtonClass}
         onClick={() => dispatch(openPreferences())}

client/images/unlock.svg

@@ -25,6 +25,7 @@ import getConfig from '../../../utils/getConfig';
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import Button from '../../../common/Button';
+import { LockIcon } from '../../../common/icons';
 
 const ROOT_URL = getConfig('API_URL');
 
@@ -213,6 +214,7 @@ class SketchListRowBase extends React.Component {
             title={title}
             closeOverlay={() => this.setState({ visibleDialogOpen: false })}
           >
+            {/* TODO: these <li> should come from translate.json */}
             <div className="sketch-visibility">
               {this.state.newVisibility === 'Public' ? (
                 <ul className="sketch-visibility_ul">
@@ -250,7 +252,6 @@ class SketchListRowBase extends React.Component {
                 </ul>
               )}
 
-              <hr />
               <Button onClick={this.toggleVisibility}>
                 I have read and understand these effects
               </Button>
@@ -267,10 +268,8 @@ class SketchListRowBase extends React.Component {
           key={sketch.id}
           onClick={this.handleRowClick}
         >
-          <th scope="row" className="sketches-table__rowname">
-            {this.state.newVisibility === 'Private' && <p>Lock</p>}
-            {this.state.newVisibility}
-            {name}
+          <th scope="row" className="sketches-table_name">
+            {this.state.newVisibility === 'Private' && <LockIcon />} {name}
           </th>
           <td>{formatDateCell(sketch.createdAt, mobile)}</td>
           <td>{formatDateCell(sketch.updatedAt, mobile)}</td>

client/modules/IDE/actions/project.js

@@ -88,12 +88,14 @@ exports[`<Sketchlist /> snapshot testing 1`] = `
         <tr
           class="sketches-table__row"
         >
-          <th
+          <th 
             scope="row"
+            class="sketches-table_name"
           >
             <a
               href="/happydog/sketches/testid1"
             >
+              <LockIcon />
               testsketch1
             </a>
           </th>

client/modules/IDE/components/Header/Toolbar.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useLocation, Prompt, useParams } from 'react-router-dom';
+import { useLocation, Prompt, useParams, useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
@@ -11,7 +11,6 @@ import PreviewFrame from '../components/PreviewFrame';
 import Console from '../components/Console';
 import Toast from '../components/Toast';
 import { updateFileContent } from '../actions/files';
-
 import {
   autosaveProject,
   clearPersistedState,
@@ -103,7 +102,7 @@ const IDEView = () => {
   const [sidebarSize, setSidebarSize] = useState(160);
   const [isOverlayVisible, setIsOverlayVisible] = useState(false);
   const [MaxSize, setMaxSize] = useState(window.innerWidth);
-
+  const history = useHistory();
   const cmRef = useRef({});
 
   const autosaveIntervalRef = useRef(null);
@@ -124,6 +123,13 @@ const IDEView = () => {
     }
   }, [dispatch, params, project.id]);
 
+  useEffect(() => {
+    if (!isUserOwner && project.visibility === 'Private') {
+      // TODO: we might want to have a 'Sorry, this sketch is private' page for this
+      history.push('/');
+    }
+  }, [isUserOwner, project.visibility, history]);
+
   const autosaveAllowed = isUserOwner && project.id && preferences.autosave;
   const shouldAutosave = autosaveAllowed && ide.unsavedChanges;
 

client/modules/IDE/components/SketchList.jsx

@@ -6,6 +6,13 @@
   }
 }
 
+.sketch-visibility__icons {
+  height: 30px;
+  width: 30px;
+  display: flex;
+  gap: 5px;
+}
+
 .sketch-visibility {
   padding: 30px;
   display: flex;
@@ -45,6 +52,7 @@
 
 
 
+
 .sketches-table-container {
   overflow-y: auto;
   max-width: 100%;
@@ -71,6 +79,8 @@
         flex-direction: column;
         gap: #{math.div(12, $base-font-size)}rem;
 
+
+
         .sketches-table__row {
           margin: 0;
           position: relative;
@@ -85,13 +95,14 @@
             background-color: getThemifyVariable("search-background-color") !important;
           }
 
-          >th {
-            padding-left: 0;
-            width: 100%;
+          .sketches-table_name {
+            display: flex;
+            gap: 5px;
             font-weight: bold;
-            margin-bottom: #{math.div(6, $base-font-size)}rem;
+            align-items: center;
           }
 
+
           >td {
             padding-left: 0;
             width: 30%;