Jh/disable module

package.json

@@ -70,6 +70,7 @@
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.1.0",
     "react-select": "^3.1.0",
+    "react-tooltip": "^4.2.21",
     "react-tag-autocomplete": "^6.3.0",
     "redux": "^4.0.4",
     "redux-persist": "^6.0.0",

src/App.tsx

@@ -26,9 +26,9 @@ class App extends React.Component {
 
   public render() {
     return (
-     <CapsLockContextProvider>
+      <CapsLockContextProvider>
         <Routes/>
-     </CapsLockContextProvider>
+      </CapsLockContextProvider>
     );
   }
 }

src/api/index.ts

@@ -75,7 +75,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,7 +4,7 @@ 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, updateEndDateTime} from '../../api';
+import {getUserLabReadmeUrl, getUserLabTopologyUrl, updateEndDateTime,getPublicModule} from '../../api';
 import {UserLab} from '../../types/UserLab';
 import {LoadingButton} from '../../util/LoadingButton';
 import {combineClasses, getRemainingLabTime, getLuxonObjectFromString} from '../../util';
@@ -14,6 +14,7 @@ import {VmStatusIndicator} from '../util/VmStatusIndicator/VmStatusIndicator';
 import styles from './LabEnvironment.module.scss';
 import {RoutePaths} from 'router/RoutePaths';
 import Popup from '../util/Popup';
+import {Module} from '../../types/Module';
 
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
@@ -30,6 +31,7 @@ interface LabEnvironmentState {
   readmeLoaded: boolean;
   show_vm: boolean;
   eventKey: string;
+  module?: Module;
   labEndDateTime?: string;
   interval: number;
 }
@@ -46,14 +48,15 @@ export class LabEnvironment extends Component<LabEnvironmentProps, LabEnvironmen
     interval: 0
   };
 
-  componentDidMount() {
-    this.setLabEndDateTimeInterval(this.props.userLab);
-  }
-
   componentWillUnmount() {
     window.clearInterval(this.state.interval);
   }
 
+  async componentDidMount() {
+    this.setLabEndDateTimeInterval(this.props.userLab);
+    this.setState({module: await getPublicModule(this.props.userLab.userModuleId)});
+  }
+
   canGoToPrevPage = () => this.state.pageNumber > 1;
   canGoToNextPage = () => this.state.pageNumber < this.state.numPages;
 
@@ -101,7 +104,7 @@ export class LabEnvironment extends Component<LabEnvironmentProps, LabEnvironmen
       };
       return (
         <Popup
-          id='times-up' 
+          id='times-up'
           title='Times up!'
           description='Congratulations! You have finished working on this lab.
             You will be automatically redirected to your modules page after 15 seconds.'
@@ -110,7 +113,7 @@ export class LabEnvironment extends Component<LabEnvironmentProps, LabEnvironmen
           display={true}
         />
       );
-    } else if (remainingLabTime > 0 && remainingLabTime <= 900) {      
+    } else if (remainingLabTime > 0 && remainingLabTime <= 900) {
       return <Button className='ml-2' onClick={this.onExtendEndDateTime}>Extend</Button>;
     } else {
       return;
@@ -126,9 +129,11 @@ export class LabEnvironment extends Component<LabEnvironmentProps, LabEnvironmen
             <h2>Lab : {this.props.userLab.lab.name}</h2>
             {this.isLabAbleToStart() ?
               <LoadingButton
-                loading={this.props.starting}
+                loading={this.props.starting || !this.state.module}
+                disabled={this.state.module?.disabled ?? true}
                 label='Start Lab'
-                onClick={this.props.onStartLab} 
+                onClick={this.props.onStartLab}
+                disabledToolTipText={'This lab is currently disabled'}
               /> : this.props.userLab.lab.type === 'Temporary' &&
               <h6 style={{textAlign: 'right'}}>Lab's time remaining: {getRemainingLabTime(this.state.labEndDateTime)}{this.showExtendButton()}</h6>
             }

src/components/LabListEditor/LabListEditor.tsx

@@ -13,12 +13,15 @@ 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}
@@ -30,8 +33,9 @@ export function LabListEditor({labs, prefix, moduleId}: Props) {
               <IconButton
                 icon={faPlusCircle}
                 size={'2x'}
-                link={getNewLabEditorLink(moduleId)}
-                color={'black'}
+                tooltip={disabledModule  ? '"Disable Module" must be unchecked to add a Lab' : undefined}
+                color={disabledModule   ? 'grey' : 'black'}
+                link={!disabledModule   ? getNewLabEditorLink(moduleId) : undefined}
               />
             </Col>
           </Row>

src/components/ModuleCard/ModuleCard.tsx

@@ -35,9 +35,9 @@ class ModuleCardComponent extends Component<ModuleCardProps, ModuleCardState> {
     return (
         <Card className={Styles.card}>
           <Card.Body style={{height: 270}}>
-            <Card.Title>{module.name}</Card.Title>
+            <Card.Title>{module.name} {(module.disabled ? '(disabled)' : '')}</Card.Title>
             {!this.state.tagsExpanded ?
-              <Card.Text style={{textAlign: 'left', fontSize: '1rem', fontWeight: 400, color: '#868e96'}}>
+              <Card.Text style={{height: 105, textOverflow: 'ellipsis', overflow: 'hidden', textAlign: 'left', fontSize: '1rem', fontWeight: 400, color: '#868e96'}}>
               {module.description.substring(0, 150)}
             </Card.Text> : null}
             {module.moduleTags.length !== 0 &&
@@ -60,7 +60,6 @@ class ModuleCardComponent extends Component<ModuleCardProps, ModuleCardState> {
     );
   }
 
-
   getStartButton() {
     if (this.props.buttonLink) {
       return (

src/components/util/IconButton/IconButton.tsx

@@ -3,8 +3,10 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {IconProp, SizeProp} from '@fortawesome/fontawesome-svg-core';
 import styles from './IconButton.module.scss';
 import {Link} from 'react-router-dom';
+import ReactTooltip from 'react-tooltip';
 
 interface IconButtonProps {
+  tooltip?: string;
   icon: IconProp;
   hideIcon?: boolean;
   size?: SizeProp;
@@ -49,16 +51,18 @@ export function IconButton(props: IconButtonProps) {
 function IconButtonIcon(props: IconButtonProps) {
   return (
     <React.Fragment>
-      <FontAwesomeIcon
-        icon={props.icon}
-        size={props.size}
-        className={styles['icon']}
-        style={{
-          cursor: 'pointer',
-          ...(props.customSize ? {fontSize: props.customSize} : {}),
-          ...(props.color ? {color: props.color} : {})
-        }}
-      />
+      <ReactTooltip place='left' type='dark' effect='solid'/>
+        <FontAwesomeIcon
+          data-tip={props.tooltip}
+          icon={props.icon}
+          size={props.size}
+          className={styles['icon']}
+          style={{
+            cursor: 'pointer',
+            ...(props.customSize ? {fontSize: props.customSize} : {}),
+            ...(props.color ? {color: props.color} : {})
+          }}
+        />
       {props.children ? <span style={{marginLeft: '1rem'}}>{props.children}</span> : null}
     </React.Fragment>
   );

src/factories.ts

@@ -17,9 +17,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,7 @@ class Explore extends React.Component<{}, ExploreState> {
   async loadModules() {
     try {
       const modules = await getPublicModules();
-      this.setState({modules: modules, state: 'success'});
+      this.setState({modules: modules.filter(m => !m.disabled), state: 'success'});
     } catch (_) {
       this.setState({state: 'error'});
     }

src/pages/ModuleEditor/ModuleEditor.tsx

@@ -27,6 +27,7 @@ import {PageTitle} from '../../components/util/PageTitle';
 import {TagEditor} from '../../components/TagEditor/TagEditor';
 import {ModuleTag} from '../../types/ModuleTag';
 import {useEffect} from 'react';
+import {useUser} from '../../redux/selectors/hooks';
 
 const moduleTypeOptions: DropdownOption<ModuleType>[] = [
   {value: 'SingleUser', label: 'Single User'},
@@ -47,6 +48,8 @@ export default function ModuleEditor({match: {params: {moduleId}}}: Props) {
     setMessage(undefined);
   }
 
+  const user = useUser();
+
   const onSubmit = async (form: ModuleForm, {setErrors}: FormikHelpers<ModuleForm>) => {
     setMessage(undefined);
     try {
@@ -93,6 +96,8 @@ export default function ModuleEditor({match: {params: {moduleId}}}: Props) {
     LoadModule();
   }, [moduleId]);
 
+  const canDisable = user?.role === 'Admin' || (user?.role === 'Creator' &&  user?.id === initialValues.ownerId);
+
   const renderForm = () => (
     <Formik
       initialValues={initialValues}
@@ -113,7 +118,7 @@ export default function ModuleEditor({match: {params: {moduleId}}}: Props) {
             <Col className='d-flex justify-content-end align-items-center'>
               {editing && Boolean(values.id) && <Button style={{marginRight: '1rem'}} type='button' variant='danger' onClick={onCancel}>Cancel</Button>}
               {!editing && <Button type='button' onClick={() => setEditing(true)}>Edit</Button>}
-              {editing && <LoadingButton loading={isSubmitting} type='submit' label={values.id ? 'Save' : 'Create'}/>}
+              {editing && <LoadingButton loading={isSubmitting} type='submit' label={values.id ? 'Save' : 'Create'} disabledToolTipText={'This lab is currently disabled'}/>}
             </Col>
           </Row>
           <Col sm='12' className='m-auto'>
@@ -131,6 +136,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}/>
@@ -155,7 +165,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,11 +7,12 @@ 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(),
   type: string() as StringSchema<ModuleType>,
+  ownerId: number(),
   published: boolean(),
   labs: array(),
   moduleTags: array()

src/pages/PublicModule/PublicModule.tsx

@@ -29,9 +29,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: '',
@@ -108,6 +109,7 @@ class PublicModule extends Component<PublicModuleProps, MyModuleState> {
         loading={this.state.startingModule}
         className='btn btn-primary'
         onClick={this.hasUserModule() ? undefined : this.startModule}
+        disabledToolTipText={'This lab is currently disabled'}
       />
     );
   }

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/redux/selectors/hooks.ts

@@ -0,0 +1,7 @@
+import {getCurrentUser} from './entities';
+import {useSelector} from 'react-redux';
+import {User} from '../../types/User';
+
+export function useUser(): User | null {
+  return useSelector(getCurrentUser);
+}

src/types/Module.ts

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

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,5 +1,6 @@
 import * as React from 'react';
 import {Button, ButtonProps, Spinner} from 'react-bootstrap';
+import ReactTooltip from 'react-tooltip';
 
 type onClick = ((e: React.SyntheticEvent<HTMLButtonElement>) => void) | (() => void) | (() => any);
 
@@ -10,17 +11,36 @@ interface Props {
   type?: ButtonProps['type'];
   disabled?: boolean;
   onClick?: onClick;
+  disabledToolTipText?: string;
+}
+
+function renderButton(props: Props) {
+  const innerButton = (
+    <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>
+  );
+
+  if (props.disabled) {
+    return (<>
+      <ReactTooltip place='left' type='dark' effect='solid'/>
+      <span data-tip={props.disabledToolTipText}>
+        {innerButton}
+      </span>
+    </>);
+  }
+  return innerButton;
 }
 
 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>
+  <>
+    {renderButton(props)}
+  </>
 );