Fleet UI: Add back to packs links (#7350)

frontend/components/forms/packs/EditPackForm/_styles.scss

@@ -1,6 +1,6 @@
 .edit-pack-form {
   h1 {
-    margin: 0 0 20px;
+    margin: $pad-medium 0;
   }
 
   &__pack-title {

frontend/components/forms/packs/PackForm/PackForm.tsx

@@ -1,15 +1,18 @@
 import React, { useState } from "react";
+import { Link } from "react-router";
 import classnames from "classnames";
 
 import Button from "components/buttons/Button";
 import { IQuery } from "interfaces/query";
 import { ITarget, ITargetsAPIResponse } from "interfaces/target";
 import { IEditPackFormData } from "interfaces/pack";
+import PATHS from "router/paths";
 
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
 // @ts-ignore
 import SelectTargetsDropdown from "components/forms/fields/SelectTargetsDropdown";
+import BackChevron from "../../../../../assets/images/icon-chevron-down-9x6@2x.png";
 
 const baseClass = "pack-form";
 
@@ -67,43 +70,53 @@ const EditPackForm = ({
   const packFormClass = classnames(baseClass, className);
 
   return (
-    <form className={packFormClass} onSubmit={onFormSubmit} autoComplete="off">
-      <h1>New pack</h1>
-      <InputField
-        onChange={onChangePackName}
-        value={packName}
-        placeholder="Name"
-        label="Name"
-        name="name"
-        error={errors.name}
-        inputWrapperClass={`${baseClass}__pack-title`}
-      />
-      <InputField
-        onChange={onChangePackDescription}
-        value={packDescription}
-        inputWrapperClass={`${baseClass}__pack-description`}
-        label="Description"
-        name="description"
-        placeholder="Add a description of your pack"
-        type="textarea"
-      />
-      <div className={`${baseClass}__pack-targets`}>
-        <SelectTargetsDropdown
-          label="Select pack targets"
-          name="selected-pack-targets"
-          onFetchTargets={onFetchTargets}
-          onSelect={onChangePackTargets}
-          selectedTargets={packFormTargets}
-          targetsCount={selectedTargetsCount}
-          isPremiumTier={isPremiumTier}
+    <div className={`${baseClass}__form`}>
+      <Link to={PATHS.MANAGE_PACKS} className={`${baseClass}__back-link`}>
+        <img src={BackChevron} alt="back chevron" id="back-chevron" />
+        <span>Back to packs</span>
+      </Link>
+      <form
+        className={packFormClass}
+        onSubmit={onFormSubmit}
+        autoComplete="off"
+      >
+        <h1>New pack</h1>
+        <InputField
+          onChange={onChangePackName}
+          value={packName}
+          placeholder="Name"
+          label="Name"
+          name="name"
+          error={errors.name}
+          inputWrapperClass={`${baseClass}__pack-title`}
         />
-      </div>
-      <div className={`${baseClass}__pack-buttons`}>
-        <Button onClick={onFormSubmit} variant="brand">
-          Save query pack
-        </Button>
-      </div>
-    </form>
+        <InputField
+          onChange={onChangePackDescription}
+          value={packDescription}
+          inputWrapperClass={`${baseClass}__pack-description`}
+          label="Description"
+          name="description"
+          placeholder="Add a description of your pack"
+          type="textarea"
+        />
+        <div className={`${baseClass}__pack-targets`}>
+          <SelectTargetsDropdown
+            label="Select pack targets"
+            name="selected-pack-targets"
+            onFetchTargets={onFetchTargets}
+            onSelect={onChangePackTargets}
+            selectedTargets={packFormTargets}
+            targetsCount={selectedTargetsCount}
+            isPremiumTier={isPremiumTier}
+          />
+        </div>
+        <div className={`${baseClass}__pack-buttons`}>
+          <Button onClick={onFormSubmit} variant="brand">
+            Save query pack
+          </Button>
+        </div>
+      </form>
+    </div>
   );
 };
 

frontend/components/forms/packs/PackForm/_styles.scss

@@ -1,6 +1,6 @@
 .pack-form {
   h1 {
-    margin: 0 0 20px;
+    margin: $pad-medium 0;
   }
 
   label {
@@ -29,4 +29,17 @@
     margin: 25px 0;
     text-align: right;
   }
+
+  &__back-link {
+    font-size: $x-small;
+    color: $core-vibrant-blue;
+    font-weight: $bold;
+    text-decoration: none;
+
+    #back-chevron {
+      width: 16px;
+      margin-right: $pad-small;
+      vertical-align: text-top;
+    }
+  }
 }

frontend/pages/packs/EditPackPage/EditPackPage.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useContext } from "react";
+import { Link } from "react-router";
 import { useQuery } from "react-query";
 import { InjectedRouter, Params } from "react-router/lib/Router";
 
@@ -24,6 +25,7 @@ import EditPackForm from "components/forms/packs/EditPackForm";
 import MainContent from "components/MainContent";
 import PackQueryEditorModal from "./components/PackQueryEditorModal";
 import RemovePackQueryModal from "./components/RemovePackQueryModal";
+import BackChevron from "../../../../assets/images/icon-chevron-down-9x6@2x.png";
 
 interface IEditPacksPageProps {
   router: InjectedRouter; // v3
@@ -225,6 +227,10 @@ const EditPacksPage = ({
   return (
     <MainContent className={baseClass}>
       <div className={`${baseClass}__wrapper`}>
+        <Link to={PATHS.MANAGE_PACKS} className={`${baseClass}__back-link`}>
+          <img src={BackChevron} alt="back chevron" id="back-chevron" />
+          <span>Back to packs</span>
+        </Link>
         {storedPack && storedPackQueries && (
           <EditPackForm
             className={`${baseClass}__pack-form`}

frontend/pages/packs/EditPackPage/_styles.scss

@@ -1,4 +1,17 @@
 .edit-pack-page {
+  &__back-link {
+    font-size: $x-small;
+    color: $core-vibrant-blue;
+    font-weight: $bold;
+    text-decoration: none;
+
+    #back-chevron {
+      width: 16px;
+      margin-right: $pad-small;
+      vertical-align: text-top;
+    }
+  }
+
   @at-root .has-sidebar > &__content {
     display: flex;
     flex-direction: column;

frontend/router/paths.ts

@@ -19,7 +19,6 @@ export default {
   ADMIN_SETTINGS_STATISTICS: `${URL_PREFIX}/settings/organization/statistics`,
   ADMIN_SETTINGS_ADVANCED: `${URL_PREFIX}/settings/organization/advanced`,
   ADMIN_SETTINGS_FLEET_DESKTOP: `${URL_PREFIX}/settings/organization/fleet-desktop`,
-  ALL_PACKS: `${URL_PREFIX}/packs/all`,
   EDIT_PACK: (packId: number): string => {
     return `${URL_PREFIX}/packs/${packId}/edit`;
   },