Refactor: Extract CloseTabIcon, DraftTabIcon (#1166)

Co-authored-by: Anoop M D <anoop.md1421@gmail.com>

packages/bruno-app/src/components/RequestTabs/RequestTab/CloseTab/CloseTabIcon.js

@@ -0,0 +1,10 @@
+const CloseTabIcon = () => (
+  <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
+    <path
+      fill="currentColor"
+      d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
+    ></path>
+  </svg>
+);
+
+export default CloseTabIcon;

packages/bruno-app/src/components/RequestTabs/RequestTab/CloseTab/DraftTabIcon.js

@@ -0,0 +1,15 @@
+const DraftTabIcon = () => (
+  <svg
+    focusable="false"
+    xmlns="http://www.w3.org/2000/svg"
+    width="8"
+    height="16"
+    fill="#cc7b1b"
+    className="has-changes-icon"
+    viewBox="0 0 8 8"
+  >
+    <circle cx="4" cy="4" r="3" />
+  </svg>
+);
+
+export default DraftTabIcon;

packages/bruno-app/src/components/RequestTabs/RequestTab/RequestTabNotFound.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { IconAlertTriangle } from '@tabler/icons';
+import CloseTabIcon from './CloseTab/CloseTabIcon';
 
 const RequestTabNotFound = ({ handleCloseClick }) => {
   const [showErrorMessage, setShowErrorMessage] = useState(false);
@@ -28,12 +29,7 @@ const RequestTabNotFound = ({ handleCloseClick }) => {
         ) : null}
       </div>
       <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
-        <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
+        <CloseTabIcon />
-          <path
-            fill="currentColor"
-            d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
-          ></path>
-        </svg>
       </div>
     </>
   );

packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import CloseTabIcon from './CloseTab/CloseTabIcon';
 import { IconVariable, IconSettings, IconRun, IconFolder, IconShieldLock } from '@tabler/icons';
 
 const SpecialTab = ({ handleCloseClick, type, tabName }) => {
@@ -51,12 +52,7 @@ const SpecialTab = ({ handleCloseClick, type, tabName }) => {
     <>
       <div className="flex items-center tab-label pl-2">{getTabInfo(type, tabName)}</div>
       <div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e)}>
-        <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
+        <CloseTabIcon />
-          <path
-            fill="currentColor"
-            d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
-          ></path>
-        </svg>
       </div>
     </>
   );

packages/bruno-app/src/components/RequestTabs/RequestTab/index.js

@@ -15,6 +15,8 @@ import StyledWrapper from './StyledWrapper';
 import Dropdown from 'components/Dropdown';
 import CloneCollectionItem from 'components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index';
 import NewRequest from 'components/Sidebar/NewRequest/index';
+import CloseTabIcon from './CloseTab/CloseTabIcon';
+import DraftTabIcon from './CloseTab/DraftTabIcon';
 
 const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUid }) => {
   const dispatch = useDispatch();
@@ -180,24 +182,9 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
         }}
       >
         {!item.draft ? (
-          <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
+          <CloseTabIcon />
-            <path
-              fill="currentColor"
-              d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"
-            ></path>
-          </svg>
         ) : (
-          <svg
+          <DraftTabIcon />
-            focusable="false"
-            xmlns="http://www.w3.org/2000/svg"
-            width="8"
-            height="16"
-            fill="#cc7b1b"
-            className="has-changes-icon"
-            viewBox="0 0 8 8"
-          >
-            <circle cx="4" cy="4" r="3" />
-          </svg>
         )}
       </div>
     </StyledWrapper>