1 files changed, 200 insertions, 0 deletions
diff --git a/web/src/containers/freezejob/FreezeJobToolbar.jsx b/web/src/containers/freezejob/FreezeJobToolbar.jsx
new file mode 100644
index 000000000..c067b7205
--- /dev/null
+++ b/web/src/containers/freezejob/FreezeJobToolbar.jsx
@@ -0,0 +1,200 @@
+// Copyright 2020 BMW Group
+// Copyright 2022 Acme Gating, LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may
+// not use this file except in compliance with the License. You may obtain
+// a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations
+// under the License.
+
+import React, { useEffect, useState } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import {
+  Button,
+  TextInput,
+  Dropdown,
+  DropdownItem,
+  DropdownPosition,
+  DropdownToggle,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  ToolbarToggleGroup,
+} from '@patternfly/react-core'
+
+import { fetchPipelinesIfNeeded } from '../../actions/pipelines'
+
+function FreezeJobToolbar(props) {
+  const { tenant, fetchPipelinesIfNeeded } = props
+
+  useEffect(() => {
+    fetchPipelinesIfNeeded(tenant)
+  }, [fetchPipelinesIfNeeded, tenant])
+
+  const tenantPipelines = props.pipelines.pipelines[tenant.name]
+  const pipelines = tenantPipelines ? tenantPipelines.map(p => { return p.name }) : []
+
+  const [isPipelineOpen, setIsPipelineOpen] = useState(false)
+  const [currentPipeline, setCurrentPipeline] = useState(props.defaultPipeline || '')
+  const [currentProject, setCurrentProject] = useState(props.defaultProject || '')
+  const [currentBranch, setCurrentBranch] = useState(props.defaultBranch || '')
+  const [currentJob, setCurrentJob] = useState(props.defaultJob || '')
+
+  if (!currentPipeline && pipelines.length) {
+    // We may have gotten a list of pipelines after we loaded the page
+    setCurrentPipeline(pipelines[0])
+  }
+
+  function handlePipelineSelect(event) {
+    setCurrentPipeline(event.target.innerText)
+    setIsPipelineOpen(false)
+  }
+
+  function handlePipelineToggle(isOpen) {
+    setIsPipelineOpen(isOpen)
+  }
+
+  function handleProjectChange(newValue) {
+    setCurrentProject(newValue)
+  }
+
+  function handleBranchChange(newValue) {
+    setCurrentBranch(newValue)
+  }
+
+  function handleJobChange(newValue) {
+    setCurrentJob(newValue)
+  }
+
+  function handleInputSend(event) {
+    // In case the event comes from a key press, only accept "Enter"
+    if (event.key && event.key !== 'Enter') {
+      return
+    }
+
+    // Ignore empty values
+    if (!currentBranch || !currentProject || !currentJob) {
+      return
+    }
+
+    // Notify the parent component about the filter change
+    props.onChange(currentPipeline, currentProject, currentBranch, currentJob)
+  }
+
+  function renderFreezeJobToolbar () {
+    return <>
+      <Toolbar collapseListedFiltersBreakpoint="md">
+        <ToolbarContent>
+          <ToolbarToggleGroup breakpoint="md">
+            <ToolbarGroup variant="filter-group">
+
+              <ToolbarItem key="pipeline">
+                <Dropdown
+                  onSelect={handlePipelineSelect}
+                  position={DropdownPosition.left}
+                  toggle={
+                    <DropdownToggle
+                      onToggle={handlePipelineToggle}
+                      style={{ width: '100%' }}
+                    >
+                      Pipeline: {currentPipeline}
+                    </DropdownToggle>
+                  }
+                  isOpen={isPipelineOpen}
+                  dropdownItems={pipelines.map((pipeline) => (
+                    <DropdownItem key={pipeline}>{pipeline}</DropdownItem>
+                  ))}
+                  style={{ width: '100%' }}
+                  menuAppendTo={document.body}
+                />
+              </ToolbarItem>
+
+              <ToolbarItem key="project">
+                <TextInput
+                  name="project"
+                  id="project-input"
+                  type="search"
+                  placeholder="Project"
+                  defaultValue={props.defaultProject}
+                  onChange={handleProjectChange}
+                  onKeyDown={(event) => handleInputSend(event)}
+                />
+              </ToolbarItem>
+
+              <ToolbarItem key="branch">
+                <TextInput
+                  name="branch"
+                  id="branch-input"
+                  type="search"
+                  placeholder="Branch"
+                  defaultValue={props.defaultBranch}
+                  onChange={handleBranchChange}
+                  onKeyDown={(event) => handleInputSend(event)}
+                />
+              </ToolbarItem>
+
+              <ToolbarItem key="job">
+                <TextInput
+                  name="job"
+                  id="job-input"
+                  type="search"
+                  placeholder="Job"
+                  defaultValue={props.defaultJob}
+                  onChange={handleJobChange}
+                  onKeyDown={(event) => handleInputSend(event)}
+                />
+              </ToolbarItem>
+
+              <ToolbarItem key="button">
+                <Button
+                  onClick={(event) => handleInputSend(event)}
+                >
+                  Freeze Job
+                </Button>
+              </ToolbarItem>
+
+            </ToolbarGroup>
+          </ToolbarToggleGroup>
+        </ToolbarContent>
+      </Toolbar>
+    </>
+  }
+
+  return (
+    <div>
+      {renderFreezeJobToolbar()}
+    </div>
+  )
+}
+
+FreezeJobToolbar.propTypes = {
+  fetchPipelinesIfNeeded: PropTypes.func,
+  tenant: PropTypes.object,
+  pipelines: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  defaultPipeline: PropTypes.string,
+  defaultProject: PropTypes.string,
+  defaultBranch: PropTypes.string,
+  defaultJob: PropTypes.string,
+}
+
+function mapStateToProps(state) {
+  return {
+    tenant: state.tenant,
+    pipelines: state.pipelines,
+  }
+}
+
+const mapDispatchToProps = {
+  fetchPipelinesIfNeeded
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FreezeJobToolbar)