sdc-workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowHeader.jsx

   1 /*
   2 * Copyright © 2018 European Support Limited
   3 *
   4 * Licensed under the Apache License, Version 2.0 (the "License");
   5 * you may not use this file except in compliance with the License.
   6 * You may obtain a copy of the License at
   7 *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9 *
  10  * Unless required by applicable law or agreed to in writing, software
  11 * distributed under the License is distributed on an "AS IS" BASIS,
  12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 * See the License for the specific language governing permissions and
  14 * limitations under the License.
  15 */
  16 import React from 'react';
  17 import PropTypes from 'prop-types';
  18 import { I18n } from 'react-redux-i18n';
  19 import { SVGIcon, Button } from 'onap-ui-react';
  20 import ArchiveLabel from 'shared/archiveLabel/ArchiveLabel';
  21
  22 const Buttons = ({ history, archiveWorkflow, restoreWorkflow, isArchive }) => (
  23     <div className="header-buttons">
  24         <SVGIcon
  25             onClick={() => history.push('/workflows/')}
  26             label={I18n.t('workflow.overview.backBtnLabel')}
  27             className="go-catalog-btn"
  28             labelPosition="right"
  29             name="back"
  30         />
  31         <ArchiveBtn
  32             isArchive={isArchive}
  33             restoreWorkflow={restoreWorkflow}
  34             archiveWorkflow={archiveWorkflow}
  35         />
  36     </div>
  37 );
  38
  39 Buttons.propTypes = {
  40     history: PropTypes.object,
  41     archiveWorkflow: PropTypes.func,
  42     isArchive: PropTypes.bool,
  43     restoreWorkflow: PropTypes.func
  44 };
  45
  46 const Title = ({ name, isArchive }) => (
  47     <div className="title">
  48         {name} - {I18n.t('workflow.overview.title')}
  49         {isArchive && <ArchiveLabel />}
  50     </div>
  51 );
  52 Title.propTypes = {
  53     name: PropTypes.string,
  54     isArchive: PropTypes.bool
  55 };
  56
  57 const ArchiveBtn = ({ isArchive, archiveWorkflow, restoreWorkflow }) => {
  58     return !isArchive ? (
  59         <SVGIcon
  60             onClick={archiveWorkflow}
  61             title="Archive workflow"
  62             className="archive-btn"
  63             name="archiveBox"
  64         />
  65     ) : (
  66         <Button className="restore-btn" onClick={restoreWorkflow}>
  67             RESTORE
  68         </Button>
  69     );
  70 };
  71 ArchiveBtn.propTypes = {
  72     status: PropTypes.string,
  73     archiveWorkflow: PropTypes.func,
  74     restoreWorkflow: PropTypes.func,
  75     isArchive: PropTypes.bool
  76 };
  77
  78 const WorkflowHeader = ({
  79     name,
  80     history,
  81     archiveWorkflow,
  82     restoreWorkflow,
  83     isArchive
  84 }) => {
  85     return (
  86         <div className="overview-header">
  87             <Title isArchive={isArchive} name={name} />
  88             <Buttons
  89                 restoreWorkflow={restoreWorkflow}
  90                 archiveWorkflow={archiveWorkflow}
  91                 isArchive={isArchive}
  92                 history={history}
  93             />
  94         </div>
  95     );
  96 };
  97
  98 WorkflowHeader.propTypes = {
  99     name: PropTypes.string,
 100     history: PropTypes.object,
 101     archiveWorkflow: PropTypes.func,
 102     restoreWorkflow: PropTypes.func,
 103     isArchive: PropTypes.bool
 104 };
 105
 106 export default WorkflowHeader;