From 8b59aefbc51ff9781f53a3a90e84e556813a1e80 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Tue, 23 May 2023 19:56:07 +0200
Subject: [PATCH] Moved the entire integration item header ->
 IntegrationItem.jsx

---
 .../IntegrationItem/IntegrationItem.jsx       | 39 ++++---------------
 1 file changed, 7 insertions(+), 32 deletions(-)

diff --git a/client/src/common/components/IntegrationDialog/components/IntegrationItem/IntegrationItem.jsx b/client/src/common/components/IntegrationDialog/components/IntegrationItem/IntegrationItem.jsx
index edfdde9c..dbf2a419 100644
--- a/client/src/common/components/IntegrationDialog/components/IntegrationItem/IntegrationItem.jsx
+++ b/client/src/common/components/IntegrationDialog/components/IntegrationItem/IntegrationItem.jsx
@@ -1,10 +1,8 @@
-import "./styles.sass";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import i18n, {t} from "i18next";
-import {faCheck, faChevronDown, faChevronUp, faFloppyDisk, faTrash, faTrashArrowUp} from "@fortawesome/free-solid-svg-icons";
 import {useState} from "react";
 import {deleteRequest, patchRequest, putRequest} from "@/common/utils/RequestUtil";
-import {generateRelativeTime} from "@/pages/Home/components/LatestTest/utils";
+import IntegrationItemHeader from "./components/IntegrationItemHeader";
+import "./styles.sass";
 
 export const IntegrationItem = ({integration, data, remove, isOpen}) => {
     const [open, setOpen] = useState(isOpen);
@@ -77,39 +75,16 @@ export const IntegrationItem = ({integration, data, remove, isOpen}) => {
 
     return (
         <div className={"integration-item"+(changesConfirmed ? " green-border" : "")}>
-            <div className="integration-item-header">
-                <div className="integration-item-left">
-                    <FontAwesomeIcon icon={integration.icon} className="integration-item-icon"/>
-                    <div className="integration-title-container">
-                        <h3>{displayName}</h3>
-                        <div className="integration-item-activity">
-                            <div className={"integration-item-activity-circle circle-"+(data.activityFailed ? "error"
-                                : (data.lastActivity === null || !data.lastActivity ? "inactive" : "active"))} />
-                            <p>{data.activityFailed ? t("failed") : (data.lastActivity === null || !data.lastActivity
-                                ? "Nie ausgeführt" : "Zuletzt vor " + generateRelativeTime(data.lastActivity))}</p>
-                        </div>
-                    </div>
+            <IntegrationItemHeader open={open} setOpen={setOpen} displayName={displayName}
+                                   changesConfirmed={changesConfirmed} deleteConfirmed={deleteConfirmed}
+                                   deleteIntegration={deleteIntegration} saveIntegration={saveIntegration}
+                                   unsavedChanges={unsavedChanges} integration={integration} data={data}/>
 
-                </div>
-                <div className="integration-item-right">
-                    {unsavedChanges && !changesConfirmed && <FontAwesomeIcon icon={faFloppyDisk} onClick={saveIntegration}
-                                                        className="integration-green" />}
-                    {changesConfirmed && <FontAwesomeIcon icon={faCheck} className="icon-green" />}
-
-                    {!deleteConfirmed && <FontAwesomeIcon icon={faTrash} className="integration-red" onClick={deleteIntegration} />}
-                    {deleteConfirmed && <FontAwesomeIcon icon={faTrashArrowUp} className="integration-red" onClick={deleteIntegration} />}
-
-                    <FontAwesomeIcon icon={open ? faChevronUp : faChevronDown} onClick={() => setOpen(!open)}
-                                     className="integration-green" />
-                </div>
-            </div>
             {open && <div className="integration-body">
-
                 <div className="integration-field">
                     <p className="integration-field-title">{t(`integrations.display_name`)}</p>
                     <input className="integration-field-input" type="text" value={displayName}
-                           onChange={updateDisplayName}
-                           placeholder={t(`integrations.display_name`)}/>
+                           onChange={updateDisplayName} placeholder={t(`integrations.display_name`)}/>
                 </div>
 
                 {integration.fields.map((field, index) => <div className="integration-field" key={index}>