adding final step

Author: Mletter1

web-server/plugins/slycat-cca/js/components/CCAWizard.tsx

@@ -9,7 +9,7 @@ import {
   useHandleClosingCallback,
   useHandleWizardSetup,
 } from "./CCAWizardUtils";
-import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
+import { useAppSelector } from "./wizard-store/hooks";
 import { selectMid, selectPid } from "./wizard-store/reducers/cCAWizardSlice";
 
 interface CCAWizardParams {

web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx

@@ -32,8 +32,7 @@ export const CCAModalContent = (props: React.PropsWithChildren<ModalContentProps
     <div>
       <div className="modal-header">
         <h3 className="modal-title">{title}</h3>
-        <button type="button" className="close" aria-label="Close" onClick={handleCloseModal}>
-          <span aria-hidden="true">&times;</span>
+        <button type="button" className="btn-close" aria-label="Close" data-bs-dismiss="modal" onClick={handleCloseModal}>
         </button>
       </div>
       <div className="modal-body" id="slycat-wizard">

web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx

@@ -6,8 +6,9 @@ import { CCAWizardDataSelectionTab } from "./wizard-tabs/CCADataWizardSelectionT
 import { CCAWizardNavItems } from "./CCANavItems";
 import { useAppSelector } from "./wizard-store/hooks";
 import { selectTab, TabNames } from "./wizard-store/reducers/cCAWizardSlice";
-import { CCALocalBrowserTab } from "./wizard-tabs/CCSLocalBrowserTab";
+import { CCALocalBrowserTab } from "./wizard-tabs/CCALocalBrowserTab";
 import { CCATableIngestion } from "./wizard-tabs/CCATableIngestion";
+import { CCAModelCreation } from "./wizard-tabs/CCAModelCreation";
 
 export const CCAWizardSteps = () => {
   // The `state` arg is correctly typed as `RootState` already
@@ -19,6 +20,7 @@ export const CCAWizardSteps = () => {
         <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB)} />
         <CCALocalBrowserTab hidden={!(tabName === TabNames.CCA_LOCAL_BROWSER_TAB)} />
         <CCATableIngestion hidden={!(tabName === TabNames.CCA_TABLE_INGESTION)} />
+        <CCAModelCreation hidden={!(tabName === TabNames.CCA_FINISH_MODEL)}/>
         <div hidden={true}>
           <form role="form">
             {/* <slycat-remote-controls
@@ -55,13 +57,6 @@ export const CCAWizardSteps = () => {
               <slycat-parser-controls params="parser:parser,category:'table'"></slycat-parser-controls> */}
           </div>
         </div>
-        <div hidden={!(tabName === TabNames.CCA_FINISH_MODEL)}>
-          <form data-bind="submit: name_model" id="new-cca-name-model-form" noValidate>
-            {/* <slycat-model-controls
-                params="name:model.name,description:model.description,marking:model.marking"
-              ></slycat-model-controls> */}
-          </form>
-        </div>
       </div>
     </div>
   );

web-server/plugins/slycat-cca/js/components/wizard-store/reducers/cCAWizardSlice.tsx

@@ -5,7 +5,7 @@ export enum TabNames {
   CCA_DATA_WIZARD_SELECTION_TAB = "CCADataWizardSelectionTab",
   CCA_LOCAL_BROWSER_TAB = "CCSLocalBrowserTab",
   CCA_TABLE_INGESTION = "CCATableIngestion",
-  CCA_FINISH_MODEL= "CCAFinishModel"
+  CCA_FINISH_MODEL = "CCAFinishModel",
 }
 export enum dataLocationType {
   LOCAL = "local",
@@ -31,6 +31,7 @@ export interface CCAWizardState {
   fileUploaded: boolean;
   attributes: Attribute[];
   scaleInputs: boolean;
+  marking: string | undefined;
 }
 const initialState: CCAWizardState = {
   tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
@@ -39,7 +40,8 @@ const initialState: CCAWizardState = {
   pid: undefined,
   fileUploaded: false,
   attributes: [],
-  scaleInputs: false
+  scaleInputs: false,
+  marking: undefined,
 };
 export const cCAWizardSlice = createSlice({
   name: "cCAWizard",
@@ -66,6 +68,9 @@ export const cCAWizardSlice = createSlice({
     setScaleInputs: (state, action: PayloadAction<boolean>) => {
       state.scaleInputs = action.payload;
     },
+    setMarking: (state, action: PayloadAction<string>) => {
+      state.marking = action.payload;
+    },
     resetCCAWizard: () => initialState,
   },
 });
@@ -79,7 +84,8 @@ export const {
   resetCCAWizard: resetCCAWizard,
   setFileUploaded,
   setAttributes,
-  setScaleInputs
+  setScaleInputs,
+  setMarking
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
@@ -89,5 +95,6 @@ export const selectPid = (state: RootState) => state.cCAWizard.pid;
 export const selectMid = (state: RootState) => state.cCAWizard.mid;
 export const selectAttributes = (state: RootState) => state.cCAWizard.attributes;
 export const selectScaleInputs = (state: RootState) => state.cCAWizard.scaleInputs;
+export const selectMarking = (state: RootState) => state.cCAWizard.marking;
 
 export default cCAWizardSlice.reducer;

web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx renamed to web-server/plugins/slycat-cca/js/components/wizard-tabs/CCALocalBrowserTab.tsx

@@ -0,0 +1,63 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+import selectable_markings from "js/slycat-selectable-markings";
+import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
+import { selectMarking, setMarking } from "../wizard-store/reducers/cCAWizardSlice";
+
+export const CCAModelCreation = (props: { hidden?: boolean }) => {
+  const { hidden = false } = props;
+  const dispatch = useAppDispatch();
+  const marking = useAppSelector(selectMarking);
+  React.useEffect(() => {
+    if (!marking) {
+      const defaultMarking = selectable_markings?.allowed().find((marking: any) => !!marking);
+      if (defaultMarking?.type()) {
+        dispatch(setMarking(defaultMarking.type()));
+      }
+    }
+  }, [selectable_markings?.allowed()]);
+  const onOptionChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (event.target?.value) {
+      dispatch(setMarking(event.target?.value));
+    }
+  };
+  return (
+    <div hidden={hidden}>
+      <form data-bind="submit: name_model" id="new-cca-name-model-form" noValidate>
+        <div className="mb-3 row required">
+          <label className="col-sm-2 col-form-label">Name</label>
+          <div className="col-sm-10">
+            <input id="slycat-model-name" className="form-control" type="text" required />
+            <div className="invalid-feedback">Please enter a model name.</div>
+          </div>
+        </div>
+        <div className="mb-3 row">
+          <label className="col-sm-2 col-form-label">Description</label>
+          <div className="col-sm-10">
+            <textarea id="slycat-model-description" className="form-control" rows={5}></textarea>
+          </div>
+        </div>
+        <div className="mb-3 row">
+          <label className="col-sm-2 col-form-label">Marking</label>
+          <div className="col-sm-10">
+            <select
+              id="slycat-model-marking"
+              className="form-select"
+              onChange={onOptionChangeHandler}
+            >
+              {selectable_markings?.allowed().map((marking: any) => {
+                return (
+                  <option key={marking.type()} value={marking.type()}>
+                    {marking.label()}
+                  </option>
+                );
+              })}
+            </select>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};