Merge branch 'Simon-Initiative:master' into master

assets/src/apps/authoring/components/AdaptiveRulesList/AdaptiveRulesList.tsx

@@ -11,6 +11,7 @@ import {
   selectCopiedItem,
   selectCopiedType,
 } from 'apps/authoring/store/clipboard/slice';
+import { setCurrentPartPropertyFocus } from 'apps/authoring/store/parts/slice';
 import guid from 'utils/guid';
 import { useToggle } from '../../../../components/hooks/useToggle';
 import { clone } from '../../../../utils/common';
@@ -467,8 +468,14 @@ const IRulesList: React.FC<any> = (props: any) => {
                         value={ruleToEdit.name}
                         onClick={(e) => e.preventDefault()}
                         onChange={(e) => setRuleToEdit({ ...rule, name: e.target.value })}
-                        onFocus={(e) => e.target.select()}
-                        onBlur={() => handleRenameRule(rule)}
+                        onFocus={(e) => {
+                          e.target.select();
+                          dispatch(setCurrentPartPropertyFocus({ focus: false }));
+                        }}
+                        onBlur={() => {
+                          handleRenameRule(rule);
+                          dispatch(setCurrentPartPropertyFocus({ focus: true }));
+                        }}
                         onKeyDown={(e) => {
                           if (e.key === 'Enter') handleRenameRule(rule);
                           if (e.key === 'Escape') setRuleToEdit(undefined);

assets/src/apps/authoring/components/AdaptivityEditor/ConditionItemEditor.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { useDispatch } from 'react-redux';
+import { setCurrentPartPropertyFocus } from 'apps/authoring/store/parts/slice';
 import { CapiVariableTypes, JanusConditionProperties } from '../../../../adaptivity/capi';
 import ConfirmDelete from '../Modal/DeleteConfirmationModal';
 import {
@@ -22,7 +24,7 @@ interface ConditionItemEditorProps {
 
 const ConditionItemEditor: React.FC<ConditionItemEditorProps> = (props) => {
   const { condition, parentIndex, onChange, onDelete } = props;
-
+  const dispatch = useDispatch();
   const [fact, setFact] = useState<string>(condition.fact);
   const [targetType, setTargetType] = useState<CapiVariableTypes>(
     condition.type || inferTypeFromOperatorAndValue(condition.operator, condition.value),
@@ -120,7 +122,11 @@ const ConditionItemEditor: React.FC<ConditionItemEditorProps> = (props) => {
           placeholder="Target"
           value={fact}
           onChange={(e) => setFact(e.target.value)}
-          onBlur={(e) => handleFactChange(e.target.value)}
+          onFocus={(e) => dispatch(setCurrentPartPropertyFocus({ focus: false }))}
+          onBlur={(e) => {
+            handleFactChange(e.target.value);
+            dispatch(setCurrentPartPropertyFocus({ focus: true }));
+          }}
           title={fact.toString()}
           tabIndex={0}
         />
@@ -171,7 +177,11 @@ const ConditionItemEditor: React.FC<ConditionItemEditorProps> = (props) => {
         key={`value-${parentIndex}`}
         id={`value-${parentIndex}`}
         defaultValue={value}
-        onBlur={(e) => handleValueChange(e)}
+        onBlur={(e) => {
+          handleValueChange(e);
+          dispatch(setCurrentPartPropertyFocus({ focus: true }));
+        }}
+        onFocus={(e) => dispatch(setCurrentPartPropertyFocus({ focus: false }))}
         title={value.toString()}
         placeholder="Value"
         tabIndex={0}

assets/src/apps/authoring/components/ComponentToolbar/AddComponentToolbar.tsx

@@ -115,7 +115,16 @@ const AddComponentToolbar: React.FC<{
     dispatch(setCopiedPart({ copiedPart: null }));
   };
 
-  useKeyDown(handlePartPasteClick, ['KeyV'], { ctrlKey: true }, [copiedPart, currentActivityTree]);
+  useKeyDown(
+    () => {
+      if (copiedPart) {
+        handlePartPasteClick();
+      }
+    },
+    ['KeyV'],
+    { ctrlKey: true },
+    [copiedPart, currentActivityTree],
+  );
 
   return (
     <Fragment>

assets/src/apps/authoring/components/EditingCanvas/EditingCanvas.tsx

@@ -3,9 +3,15 @@ import { useDispatch, useSelector } from 'react-redux';
 import { EntityId } from '@reduxjs/toolkit';
 import { updatePart } from 'apps/authoring/store/parts/actions/updatePart';
 import { NotificationType } from 'apps/delivery/components/NotificationContext';
+import { useKeyDown } from 'hooks/useKeyDown';
 import { selectCurrentActivityTree } from '../../../delivery/store/features/groups/selectors/deck';
 import { selectBottomPanel, setCopiedPart, setRightPanelActiveTab } from '../../store/app/slice';
-import { selectCurrentSelection, setCurrentSelection } from '../../store/parts/slice';
+import {
+  selectCurrentPartPropertyFocus,
+  selectCurrentSelection,
+  setCurrentPartPropertyFocus,
+  setCurrentSelection,
+} from '../../store/parts/slice';
 import { RightPanelTabs } from '../RightMenu/RightMenu';
 import AuthoringActivityRenderer from './AuthoringActivityRenderer';
 import ConfigurationModal from './ConfigurationModal';
@@ -16,15 +22,15 @@ const EditingCanvas: React.FC = () => {
   const _bottomPanelState = useSelector(selectBottomPanel);
   const currentActivityTree = useSelector(selectCurrentActivityTree);
   const _currentPartSelection = useSelector(selectCurrentSelection);
-
+  const _currentPartPropertyFocus = useSelector(selectCurrentPartPropertyFocus);
   const [_currentActivity] = (currentActivityTree || []).slice(-1);
 
   const [currentActivityId, setCurrentActivityId] = useState<EntityId>('');
 
   const [showConfigModal, setShowConfigModal] = useState<boolean>(false);
   const [configModalFullscreen, setConfigModalFullscreen] = useState<boolean>(false);
   const [configPartId, setConfigPartId] = useState<string>('');
-
+  const [currentSelectedPartId, setCurrentSelectedPartId] = useState<string>('');
   const [notificationStream, setNotificationStream] = useState<{
     stamp: number;
     type: NotificationType;
@@ -74,13 +80,13 @@ const EditingCanvas: React.FC = () => {
   const handlePartSelect = async (id: string) => {
     /* console.log('[handlePartSelect]', { id }); */
     dispatch(setCurrentSelection({ selection: id }));
-
+    setCurrentSelectedPartId(id);
     dispatch(
       setRightPanelActiveTab({
         rightPanelActiveTab: !id.length ? RightPanelTabs.SCREEN : RightPanelTabs.COMPONENT,
       }),
     );
-
+    dispatch(setCurrentPartPropertyFocus({ focus: true }));
     return true;
   };
 
@@ -126,6 +132,39 @@ const EditingCanvas: React.FC = () => {
     dispatch(setRightPanelActiveTab({ rightPanelActiveTab: RightPanelTabs.SCREEN }));
   }, [currentActivityId]);
 
+  useKeyDown(
+    () => {
+      if (currentSelectedPartId && !configPartId?.length && _currentPartPropertyFocus) {
+        setNotificationStream({
+          stamp: Date.now(),
+          type: NotificationType.CHECK_SHORTCUT_ACTIONS,
+          payload: { id: currentSelectedPartId, type: 'Delete' },
+        });
+      }
+    },
+    ['Delete', 'Backspace'],
+    {},
+    [currentSelectedPartId, configPartId, _currentPartPropertyFocus],
+  );
+
+  useKeyDown(
+    () => {
+      if (currentSelectedPartId && !configPartId?.length && _currentPartPropertyFocus) {
+        setNotificationStream({
+          stamp: Date.now(),
+          type: NotificationType.CHECK_SHORTCUT_ACTIONS,
+          payload: { id: currentSelectedPartId, type: 'Copy' },
+        });
+      } else if (!_currentPartPropertyFocus) {
+        //if user first copies a part and then before pasting it, if they click on the properties and do a cntrl+c, we need to clear the existing cntrl+c for part
+        dispatch(setCopiedPart({ copiedPart: null }));
+      }
+    },
+    ['KeyC'],
+    { ctrlKey: true },
+    [currentSelectedPartId, _currentPartPropertyFocus],
+  );
+
   const configEditorId = `config-editor-${currentActivityId}`;
 
   return (

assets/src/apps/authoring/components/Flowchart/toolbar/FlowchartHeaderNav.tsx

@@ -207,7 +207,16 @@ export const FlowchartHeaderNav: React.FC<HeaderNavProps> = () => {
     ['KeyZ'],
     { ctrlKey: true },
   );
-  useKeyDown(handlePartPasteClick, ['KeyV'], { ctrlKey: true }, [copiedPart, currentActivityTree]);
+  useKeyDown(
+    () => {
+      if (copiedPart) {
+        handlePartPasteClick();
+      }
+    },
+    ['KeyV'],
+    { ctrlKey: true },
+    [copiedPart, currentActivityTree],
+  );
 
   const handleAddComponent = useCallback(
     (partComponentType: string) => () => {

assets/src/apps/authoring/components/PropertyEditor/PropertyEditor.tsx

@@ -22,7 +22,9 @@ interface PropertyEditorProps {
   uiSchema: UiSchema;
   onChangeHandler: (changes: unknown) => void;
   value: unknown;
+  onClickHandler?: (changes: unknown) => void;
   triggerOnChange?: boolean | string[];
+  onfocusHandler?: (changes: boolean) => void;
 }
 
 const widgets: any = {
@@ -46,6 +48,7 @@ const PropertyEditor: React.FC<PropertyEditorProps> = ({
   value,
   onChangeHandler,
   triggerOnChange = false,
+  onfocusHandler,
 }) => {
   const [formData, setFormData] = useState<any>(value);
 
@@ -92,6 +95,11 @@ const PropertyEditor: React.FC<PropertyEditorProps> = ({
           }
         }
       }}
+      onFocus={() => {
+        if (onfocusHandler) {
+          onfocusHandler(false);
+        }
+      }}
       onBlur={(key, changed) => {
         // key will look like root_Position_x
         // changed will be the new value
@@ -106,6 +114,8 @@ const PropertyEditor: React.FC<PropertyEditorProps> = ({
           // console.log('ONBLUR TRIGGER SAVE');
 
           onChangeHandler(formData);
+        } else if (onfocusHandler) {
+          onfocusHandler(true);
         }
       }}
       uiSchema={uiSchema}

assets/src/apps/authoring/components/PropertyEditor/custom/MCQCustomErrorFeedbackAuthoring.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { getNodeText } from '../../../../../components/parts/janus-mcq/mcq-util';
 import { selectCurrentActivityTree } from '../../../../delivery/store/features/groups/selectors/deck';
-import { selectCurrentSelection } from '../../../store/parts/slice';
+import { selectCurrentSelection, setCurrentPartPropertyFocus } from '../../../store/parts/slice';
 
 /*
  This component handles editing advanced feedback for a question type that has a fixed set of options.
@@ -115,15 +115,22 @@ const OptionFeedback: React.FC<OptionFeedbackProps> = ({
   feedback,
   onChange,
 }) => {
+  const dispatch = useDispatch();
   const labelOption = option || `Option ${index + 1}`;
   return (
     <div className="form-group">
       <label>{labelOption}</label>
       <input
-        onBlur={onBlur}
+        onBlur={() => {
+          onBlur();
+          dispatch(setCurrentPartPropertyFocus({ focus: true }));
+        }}
         className="form-control"
         value={feedback}
         onChange={(e) => onChange(e.target.value)}
+        onFocus={() => {
+          dispatch(setCurrentPartPropertyFocus({ focus: false }));
+        }}
       />
     </div>
   );

assets/src/apps/authoring/components/PropertyEditor/custom/MCQOptionsEditor.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { Modal } from 'react-bootstrap';
+import { useDispatch } from 'react-redux';
+import { setCurrentPartPropertyFocus } from 'apps/authoring/store/parts/slice';
 import { useToggle } from '../../../../../components/hooks/useToggle';
 import { getNodeText } from '../../../../../components/parts/janus-mcq/mcq-util';
 import { QuillEditor } from '../../../../../components/parts/janus-text-flow/QuillEditor';
@@ -76,6 +78,7 @@ const OptionsEditor: React.FC<{
 }> = ({ value, onChange, onDelete }) => {
   const [editorOpen, , openEditor, closeEditor] = useToggle(false);
   const [tempValue, setTempValue] = useState<{ value: OptionsNodes }>({ value: [] });
+  const dispatch = useDispatch();
 
   const onSave = useCallback(() => {
     closeEditor();
@@ -85,11 +88,13 @@ const OptionsEditor: React.FC<{
     };
     onChange(newValue);
     console.info('onSave', newValue);
+    dispatch(setCurrentPartPropertyFocus({ focus: true }));
   }, [closeEditor, onChange, tempValue.value, value]);
 
   const onEdit = useCallback(() => {
     openEditor();
     setTempValue({ value: value.nodes });
+    dispatch(setCurrentPartPropertyFocus({ focus: false }));
   }, [openEditor, value.nodes]);
 
   return (

assets/src/apps/authoring/components/RightMenu/PartPropertyEditor.tsx

@@ -10,7 +10,7 @@ import { clone } from '../../../../utils/common';
 import { IActivity } from '../../../delivery/store/features/activities/slice';
 import { saveActivity } from '../../store/activities/actions/saveActivity';
 import { selectAppMode, setCopiedPart, setRightPanelActiveTab } from '../../store/app/slice';
-import { setCurrentSelection } from '../../store/parts/slice';
+import { setCurrentPartPropertyFocus, setCurrentSelection } from '../../store/parts/slice';
 import ConfirmDelete from '../Modal/DeleteConfirmationModal';
 import PropertyEditor from '../PropertyEditor/PropertyEditor';
 import AccordionTemplate from '../PropertyEditor/custom/AccordionTemplate';
@@ -317,6 +317,13 @@ export const PartPropertyEditor: React.FC<Props> = ({
     [currentActivity.id, currentPartInstance, currentPartSelection, dispatch],
   );
 
+  const componentPropertyFocusHandler = useCallback(
+    (partPropertyElementFocus: boolean) => {
+      dispatch(setCurrentPartPropertyFocus({ focus: partPropertyElementFocus }));
+    },
+    [currentActivity.id, currentPartInstance, currentPartSelection, dispatch],
+  );
+
   if (!partDef) return null;
 
   return (
@@ -360,6 +367,7 @@ export const PartPropertyEditor: React.FC<Props> = ({
         value={currentComponentData}
         onChangeHandler={componentPropertyChangeHandler}
         triggerOnChange={true}
+        onfocusHandler={componentPropertyFocusHandler}
       />
     </div>
   );

assets/src/apps/authoring/components/SequenceEditor/SequenceEditor.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Accordion, Dropdown, ListGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
 import { saveActivity } from 'apps/authoring/store/activities/actions/saveActivity';
+import { setCurrentPartPropertyFocus } from 'apps/authoring/store/parts/slice';
 import { clone } from 'utils/common';
 import guid from 'utils/guid';
 import { useToggle } from '../../../../components/hooks/useToggle';
@@ -88,6 +89,7 @@ const SequenceEditor: React.FC<any> = (props: any) => {
 
   const handleItemClick = (e: any, entry: SequenceEntry<SequenceEntryChild>) => {
     e.stopPropagation();
+    dispatch(setCurrentPartPropertyFocus({ focus: true }));
     dispatch(setCurrentActivityFromSequence(entry.custom.sequenceId));
     dispatch(
       setRightPanelActiveTab({
@@ -505,8 +507,14 @@ const SequenceEditor: React.FC<any> = (props: any) => {
                           custom: { ...itemToRename.custom, sequenceName: e.target.value },
                         })
                       }
-                      onFocus={(e) => e.target.select()}
-                      onBlur={() => handleRenameItem(item)}
+                      onFocus={(e) => {
+                        e.target.select();
+                        dispatch(setCurrentPartPropertyFocus({ focus: false }));
+                      }}
+                      onBlur={() => {
+                        handleRenameItem(item);
+                        dispatch(setCurrentPartPropertyFocus({ focus: true }));
+                      }}
                       onKeyDown={(e) => {
                         if (e.key === 'Enter') handleRenameItem(item);
                         if (e.key === 'Escape') setItemToRename(undefined);

assets/src/apps/authoring/store/parts/slice.ts

@@ -4,10 +4,12 @@ import PartsSlice from './name';
 
 export interface PartState {
   currentSelection: string;
+  currentPartPropertyFocus?: boolean;
 }
 
 const initialState: PartState = {
   currentSelection: '',
+  currentPartPropertyFocus: false,
 };
 
 const slice: Slice<PartState> = createSlice({
@@ -17,12 +19,19 @@ const slice: Slice<PartState> = createSlice({
     setCurrentSelection(state, action: PayloadAction<{ selection: string }>) {
       state.currentSelection = action.payload.selection;
     },
+    setCurrentPartPropertyFocus(state, action: PayloadAction<{ focus: boolean }>) {
+      state.currentPartPropertyFocus = action.payload.focus;
+    },
   },
 });
 
-export const { setCurrentSelection } = slice.actions;
+export const { setCurrentSelection, setCurrentPartPropertyFocus } = slice.actions;
 
 export const selectState = (state: AuthoringRootState): PartState => state[PartsSlice] as PartState;
 export const selectCurrentSelection = createSelector(selectState, (s) => s.currentSelection);
+export const selectCurrentPartPropertyFocus = createSelector(
+  selectState,
+  (s) => s.currentPartPropertyFocus,
+);
 
 export default slice.reducer;