fixing button styling for controls

sandialabs · Jul 22, 2020 · dfbc219 · dfbc219
1 parent 79a0449
commit dfbc219
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 18 deletions.
diff --git a/...plugins/slycat-timeseries-model/plugin-components/__snapshots__/LoadingPage.test.tsx.snap b/...plugins/slycat-timeseries-model/plugin-components/__snapshots__/LoadingPage.test.tsx.snap
@@ -37,6 +37,11 @@ exports[`Timeseries LoadingPage we have expected props on initial load 2`] = `
     <div
       className="row justify-content-center"
     >
+      <ConnectModal
+        callBack={[Function]}
+        hostname="hostname"
+        modalId="ConnectModal"
+      />
       <div
         className="btn-group col-8"
         role="group"

diff --git a/web-server/components/ControlsButton.js b/web-server/components/ControlsButton.js
@@ -8,7 +8,7 @@ const ControlsButton = (props) => {
   })
   return props.hidden ? null : (
     <button
-      className={`${props.button_style} ${props.class}`}
+      className={`btn ${props.button_type || 'btn-sm'} ${props.button_style}`}
       id={props.id}
       type="button"
       title={props.title}

diff --git a/web-server/plugins/slycat-timeseries-model/plugin-components/LoadButton.tsx b/web-server/plugins/slycat-timeseries-model/plugin-components/LoadButton.tsx
@@ -6,7 +6,7 @@ import { LoadButtonProps } from "./types.ts";
  */
 const LoadButton: React.FC<LoadButtonProps> = (props) => (
   <button
-    className={`btn btn btn-outline-primary`}
+    className={`btn btn-outline-primary`}
     id={"pullbtn"}
     type="button"
     title={"Send a command to try manually pulling the data from the HPC and loading it the server"}

diff --git a/web-server/plugins/slycat-timeseries-model/plugin-components/LoadingPage.tsx b/web-server/plugins/slycat-timeseries-model/plugin-components/LoadingPage.tsx
@@ -6,6 +6,7 @@ import { JobCodes } from "./JobCodes.tsx";
 import LogList from "./LogList.tsx";
 import LoadingPageButtons from "./LoadingPageButtons.tsx";
 import InfoBar from "./InfoBar.tsx";
+import ConnectModal from "components/ConnectModal.tsx";
 /**
  * react component used to create a loading page
  *
@@ -206,6 +207,11 @@ export default class LoadingPage extends React.Component<LoadingPageProps, Loadi
             />
           </div>
           <div className="row justify-content-center">
+            <ConnectModal
+              hostname={this.props.hostname}
+              modalId={this.state.modalId}
+              callBack={this.connectModalCallBack}
+            />
             <div className="btn-group col-8" role="group">
               <LoadingPageButtons
                 hostname={this.props.hostname}

diff --git a/web-server/plugins/slycat-timeseries-model/plugin-components/LoadingPageButtons.tsx b/web-server/plugins/slycat-timeseries-model/plugin-components/LoadingPageButtons.tsx
@@ -1,26 +1,20 @@
 import * as React from "react";
-import ConnectModal from "components/ConnectModal.tsx";
 import ControlsButton from "components/ControlsButton.js";
 import LoadButton from "./LoadButton.tsx";
 import { LoadingPageButtonsProps } from "./types.ts";
 
 /**
  *  loads the buttons for the loading page for timeseries model
- * @param props 
+ * @param props
  */
 const LoadingPageButtons: React.FC<LoadingPageButtonsProps> = (props) => {
   // wait until all the jquery stuff is loaded
-  $( document ).ready(function( $ ) {
+  $(document).ready(function ($) {
     // enable tooltips
     $('[data-toggle="tooltip"]').tooltip();
-  })
+  });
   return (
     <React.Fragment>
-      <ConnectModal
-        hostname={props.hostname}
-        modalId={props.modalId}
-        callBack={props.connectModalCallBack}
-      />
       <button
         className="btn btn-outline-primary"
         type="button"
@@ -33,13 +27,13 @@ const LoadingPageButtons: React.FC<LoadingPageButtonsProps> = (props) => {
         Job status meanings
       </button>
       <button
-        className={`btn btn btn-outline-primary`}
+        className={`btn btn-outline-primary`}
         id={"pullbtn"}
         type="button"
-        title={"Send command to the HPC to cancel the current job if the status is pending or running"}
-        disabled={
-          !props.jobStatus.includes("PENDING") && !props.jobStatus.includes("RUNNING")
+        title={
+          "Send command to the HPC to cancel the current job if the status is pending or running"
         }
+        disabled={!props.jobStatus.includes("PENDING") && !props.jobStatus.includes("RUNNING")}
         onClick={() => props.cancelJob()}
       >
         {"Cancel job"}
@@ -54,7 +48,7 @@ const LoadingPageButtons: React.FC<LoadingPageButtonsProps> = (props) => {
           title={"Connect to HPC"}
           data_toggle="modal"
           data_target={"#" + props.modalId}
-          button_style={"btn btn-outline-primary"}
+          button_type={"btn-outline-primary"}
           id="controls-button-death"
         />
       )}

diff --git a/web-server/plugins/slycat-timeseries-model/plugin-components/types.ts b/web-server/plugins/slycat-timeseries-model/plugin-components/types.ts
@@ -60,9 +60,7 @@ export interface InfoBarProps {
 }
 
 export interface LoadingPageButtonsProps {
-  hostname: string
   modalId: string
-  connectModalCallBack: (sessionExists: boolean, loadingData: boolean) => void
   jobStatus: string
   cancelJob: () => void
   pullHPCData: () => void