Jh/disable module

package.json

@@ -66,6 +66,7 @@
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.1.0",
     "react-select": "^3.1.0",
+    "react-tooltip": "^4.2.21",
     "redux": "^4.0.4",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",

src/App.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as Sentry from '@sentry/browser';
 import Routes from './router/Routes';
 import {CapsLockContextProvider} from './components/CapsLockContext/CapsLockContext';
+// import LabEditorGUI from './pages/LabEditorGUI/LabEditorGUI';
 
 // Configure Sentry
 // Sentry.init({
@@ -26,9 +27,10 @@ class App extends React.Component {
 
   public render() {
     return (
-     <CapsLockContextProvider>
+      <CapsLockContextProvider>
         <Routes/>
-     </CapsLockContextProvider>
+      </CapsLockContextProvider>
+       // <LabEditorGUI></LabEditorGUI>
     );
   }
 }

src/api/index.ts

@@ -55,8 +55,6 @@ export async function turnOnUserLab(id: number): Promise<string> {
   return (await retry.post<string>(`/user-lab/${id}/turn-on`)).data;
 }
 
-
-
 export async function shutdownVm(id: number): Promise<string> {
   return (await api.post<string>(`/virtual-machine/${id}/shutdown`)).data;
 }
@@ -74,7 +72,7 @@ export async function resetVm(id: number): Promise<string> {
 }
 
 export async function getModule(id: number) {
-  return ( await api.get<Module>(`/modules/${id}`)).data;
+  return ( await api.get<Module>(`/module/${id}`)).data;
 }
 
 export async function getUserList() {

src/components/LabEnvironment/LabEnvironment.tsx

@@ -4,14 +4,15 @@ import {Button, Col, Container, Dropdown, ButtonGroup, ListGroup, Row, Tab} from
 import {Status} from '../../pages/Status/Status';
 import {Document, Page, pdfjs} from 'react-pdf';
 import {PDFDocumentProxy} from 'pdfjs-dist';
-import {getUserLabReadmeUrl, getUserLabTopologyUrl} from '../../api';
+import {getPublicModule, getUserLabReadmeUrl, getUserLabTopologyUrl} from '../../api';
 import {UserLab} from '../../types/UserLab';
 import {LoadingButton} from '../../util/LoadingButton';
 import {combineClasses, getRemainingLabTime} from '../../util';
 import {ConsoleWindowContainer} from '../ConsoleWindow/ConsoleWindowContainer';
 import {VmActionsMenu} from '../VmActionsMenu/VmActionsMenu';
 import {VmStatusIndicator} from '../util/VmStatusIndicator/VmStatusIndicator';
 import styles from './LabEnvironment.module.scss';
+import {Module} from '../../types/Module';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
@@ -28,6 +29,7 @@ interface LabEnvironmentState {
   readmeLoaded: boolean;
   show_vm: boolean;
   eventKey: string;
+  module: Module;
 }
 
 
@@ -38,9 +40,25 @@ export class LabEnvironment extends Component<LabEnvironmentProps, LabEnvironmen
     readmeLoaded: false,
     pageNumber: 1,
     show_vm: false,
-    eventKey: '#topology'
+    eventKey: '#topology',
+    module: {
+      id: 0,
+      createdAt: '',
+      description: '',
+      disabled: false,
+      name: 'Loading',
+      published: false,
+      ownerId: 0,
+      specialCode: '',
+      type: 'SingleUser',
+      updatedAt: ''
+    }
   };
 
+  async componentDidMount() {
+    this.setState({module: await getPublicModule(this.props.userLab.userModuleId)});
+  }
+
   canGoToPrevPage = () => this.state.pageNumber > 1;
   canGoToNextPage = () => this.state.pageNumber < this.state.numPages;
 
@@ -71,6 +89,7 @@ export class LabEnvironment extends Component<LabEnvironmentProps, LabEnvironmen
             {this.isLabAbleToStart() ?
               <LoadingButton
                 loading={this.props.starting}
+                disabled={this.state.module.disabled}
                 label='Start Lab'
                 onClick={this.props.onStartLab}
               /> : <h6 style={{textAlign: 'right'}}>Lab's time remaining: {getRemainingLabTime(this.props.userLab.endDateTime!)}</h6>}

src/components/LabListEditor/LabListEditor.tsx

@@ -7,18 +7,20 @@ import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
 import {RoutePaths} from '../../router/RoutePaths';
 import {LabItem} from '../../types/editorTypes';
 import {deleteLab} from '../../api';
+import ReactTooltip from 'react-tooltip';
 
 
 interface Props {
   labs: LabItem[];
   prefix: string;
   moduleId: number;
+  disabledModule: boolean;
 }
 function getNewLabEditorLink(moduleId: number) {
   return RoutePaths.EditLab.replace(':moduleId', String(moduleId)).replace(':labId', '');
 }
 
-export function LabListEditor({labs, prefix, moduleId}: Props) {
+export function LabListEditor({labs, prefix, moduleId, disabledModule}: Props) {
   return (
     <FieldArray
       name={prefix}
@@ -27,12 +29,24 @@ export function LabListEditor({labs, prefix, moduleId}: Props) {
           <Row style={{marginBottom: '1rem'}}>
             <Col>Labs</Col>
             <Col className='d-flex justify-content-end align-items-center'>
-              <IconButton
-                icon={faPlusCircle}
-                size={'2x'}
-                link={getNewLabEditorLink(moduleId)}
-                color={'black'}
-              />
+              { disabledModule ?
+                <>
+                  <ReactTooltip place='left' type='dark' effect='solid'/>
+                  <a data-tip='"Disable Module" must be unchecked to add a Lab'>
+                    <IconButton
+                      icon={faPlusCircle}
+                      size={'2x'}
+                      color={'grey'}
+                    />
+                  </a>
+                </>
+              :
+                <IconButton
+                  icon={faPlusCircle}
+                  size={'2x'}
+                  link={getNewLabEditorLink(moduleId)}
+                  color={'black'}
+                />}
             </Col>
           </Row>
           {labs.map((lab,index) =>

src/components/ModuleCard/ModuleCard.tsx

@@ -17,6 +17,7 @@ interface ModuleCardProps extends ReturnType<typeof mapStateToProps> {
 
 class ModuleCardComponent extends Component<ModuleCardProps > {
 
+
   render() {
     let module: Module = this.props.module as Module;
     if (this.props.module['module'] !== undefined) {
@@ -26,7 +27,10 @@ class ModuleCardComponent extends Component<ModuleCardProps > {
       <Card className={Styles.card}>
         {/*<Card.Img variant='top' src={TestImage}/>*/}
         <Card.Body>
-          <Card.Title>{module.name}</Card.Title>
+          {module.disabled
+            ? <Card.Title>{module.name} (disabled)</Card.Title>
+            : <Card.Title>{module.name}</Card.Title>
+          }
           <Card.Text style={{height: 105, textOverflow: 'ellipsis', overflow: 'hidden'}}>
             {module.description.substring(0, 150)}
           </Card.Text>
@@ -39,7 +43,6 @@ class ModuleCardComponent extends Component<ModuleCardProps > {
     );
   }
 
-
   getStartButton() {
     if (this.props.buttonLink) {
       return (

src/factories.ts

@@ -16,9 +16,10 @@ export function makeModuleForm(): ModuleForm {
     description: '',
     name: '',
     published: false,
+    disabled: false,
     specialCode: uuid(),
     type: 'SingleUser',
-    userId: 0
+    ownerId: 0
   };
 }
 

src/pages/Explore/Explore.tsx

@@ -27,7 +27,13 @@ class Explore extends React.Component<{}, ExploreState> {
   async loadModules() {
     try {
       const modules = await getPublicModules();
-      this.setState({modules: modules, state: 'success'});
+      const enabledModules = [];
+      for (const i of modules) {
+        if (!i.disabled) {
+          enabledModules.push(i);
+        }
+      }
+      this.setState({modules: enabledModules, state: 'success'});
     } catch (_) {
       this.setState({state: 'error'});
     }

src/pages/ModuleEditor/ModuleEditor.tsx

@@ -24,6 +24,7 @@ import { LinkContainer } from 'react-router-bootstrap';
 import CheckBoxInput from '../../components/util/CheckBoxInput/CheckBoxInput';
 import {LabListEditor} from '../../components/LabListEditor/LabListEditor';
 import {PageTitle} from '../../components/util/PageTitle';
+import {useSelector} from 'react-redux';
 
 const moduleTypeOptions: DropdownOption<ModuleType>[] = [
   {value: 'SingleUser', label: 'Single User'},
@@ -38,12 +39,16 @@ export default function ModuleEditor({match: {params: {moduleId}}}: Props) {
   const [message, setMessage] = useMessage();
   const [editing, setEditing] = useState(false);
   const [redirect, setRedirect] = useState();
+  const [canDisable, setCanDisable] = useState(false);
 
   function completeLoading() {
     setLoading(false);
     setMessage(undefined);
   }
 
+  const userRole = useSelector((state: any) => state.entities.currentUser.role);
+  const userId = useSelector((state: any) => state.entities.currentUser.id);
+
   const onSubmit = async (form: ModuleForm, {setErrors}: FormikHelpers<ModuleForm>) => {
     setMessage(undefined);
     try {
@@ -88,6 +93,15 @@ export default function ModuleEditor({match: {params: {moduleId}}}: Props) {
     LoadModule();
   }, [moduleId]);
 
+  useEffect(() => {
+    if (userRole === 'Admin') {
+      setCanDisable(true);
+    }
+    else if (userRole === 'Creator' && userId === initialValues.ownerId) {
+      setCanDisable(true);
+    }
+  }, [initialValues]);
+
   const renderForm = () => (
     <Formik
       initialValues={initialValues}
@@ -125,6 +139,11 @@ export default function ModuleEditor({match: {params: {moduleId}}}: Props) {
             <Form.Group>
               <CheckBoxInput name={propertyOf<ModuleForm>('published')} label='Publish (Display on the explore page)' disabled={!editing}/>
             </Form.Group>
+            {canDisable &&
+              <Form.Group>
+                <CheckBoxInput name={propertyOf<ModuleForm>('disabled')} label='Disable Module' disabled={!editing}/>
+              </Form.Group>
+            }
             <Form.Group>
               <Form.Label column={true}>Type</Form.Label>
               <DropdownInput name={propertyOf<ModuleForm>('type')} dropdownData={moduleTypeOptions} disabled={!editing}/>
@@ -138,7 +157,7 @@ export default function ModuleEditor({match: {params: {moduleId}}}: Props) {
               Once you save your changes you can add and remove labs from this module. Note: Adding or editing a lab will cancel changes on this page
             </p>
             {values.id !== 0 &&
-              <LabListEditor labs={values.labs} prefix={propertyOf<ModuleForm>('labs')} moduleId={values.id}/>
+              <LabListEditor labs={values.labs} prefix={propertyOf<ModuleForm>('labs')} moduleId={values.id} disabledModule={values.disabled}/>
             }
           </Col>
         </Form>

src/pages/ModuleEditor/ModuleEditorSchema.ts

@@ -7,10 +7,11 @@ export const ModuleEditorSchema = object<ModuleForm>({
   name: string().min(3, 'Must at least be 3 characters').required('Required'),
   specialCode : string().required('Required'),
   description: string().required('Required').min(4, 'Required'),
+  disabled: boolean(),
   updatedAt: string().notRequired(),
   createdAt: string().notRequired(),
   id: number(),
-  userId: number(),
+  ownerId: number(),
   type: string().oneOf(moduleTypes) as StringSchema<ModuleType>,
   published: boolean(),
   labs: array()

src/pages/PublicModule/PublicModule.tsx

@@ -28,9 +28,10 @@ class PublicModule extends Component<PublicModuleProps, MyModuleState> {
       id: 0,
       createdAt: '',
       description: '',
+      disabled: false,
       name: 'Loading',
       published: false,
-      userId: 0,
+      ownerId: 0,
       specialCode: '',
       type: 'SingleUser',
       updatedAt: ''

src/pages/UserModulePage/UserModulePage.tsx

@@ -34,7 +34,8 @@ class UserModulePage extends Component <UserModuleLabsProps, UserModuleLabsState
          id: 0,
          name: '',
          description: '',
-         userId: 0,
+         disabled: false,
+         ownerId: 0,
          published: false,
          updatedAt: '',
          createdAt: '',

src/types/Module.ts

@@ -3,10 +3,11 @@ import {TrackableEntity} from './Entity';
 export interface BaseModule  extends TrackableEntity {
   name: string;
   description: string;
+  disabled: boolean;
   published: boolean;
   specialCode: string;
   type: ModuleType;
-  userId: number;
+  ownerId: number;
 }
 
 export interface Module extends BaseModule {

src/types/UserLab.ts

@@ -9,6 +9,7 @@ export interface UserLab extends Entity {
   hasReadme: boolean;
   endDateTime?: string;
   status: UserLabStatus;
+  userModuleId: number;
 }
 
 export type UserLabStatus = 'Started' | 'NotStarted' | 'Completed';

src/util/LoadingButton.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {Button, ButtonProps, Spinner} from 'react-bootstrap';
 import {SyntheticEvent} from 'react';
+import ReactTooltip from 'react-tooltip';
 
 type onClick = ((e: SyntheticEvent<HTMLButtonElement>) => void) | (() => void) | (() => any);
 
@@ -14,14 +15,34 @@ interface Props {
 }
 
 export const LoadingButton = (props: Props) => (
-  <Button disabled={props.loading || props.disabled} variant='primary' type={props.type || 'submit'} className={props.className} onClick={props.onClick}>
-    { props.loading ?
-      <Spinner
-        as='span'
-        animation='border'
-        size='sm'
-        role='status'
-        aria-hidden='true'
-      /> : props.label}
-  </Button>
+  <>
+
+    {props.disabled
+      ? <>
+        <ReactTooltip place='left' type='dark' effect='solid'/>
+        <a data-tip='This lab is currently disabled'>
+          <Button disabled={true} variant='primary' type={props.type || 'submit'} className={props.className} onClick={props.onClick}>
+            { props.loading ?
+              <Spinner
+                as='span'
+                animation='border'
+                size='sm'
+                role='status'
+                aria-hidden='true'
+              /> : props.label}
+          </Button>
+        </a>
+        </>
+      : <Button disabled={props.loading} variant='primary' type={props.type || 'submit'} className={props.className} onClick={props.onClick}>
+        { props.loading ?
+          <Spinner
+            as='span'
+            animation='border'
+            size='sm'
+            role='status'
+            aria-hidden='true'
+          /> : props.label}
+      </Button>
+    }
+  </>
 );