diff --git a/frontend/components/forms/packs/EditPackForm/_styles.scss b/frontend/components/forms/packs/EditPackForm/_styles.scss
index f84825b5d0..571e28af19 100644
--- a/frontend/components/forms/packs/EditPackForm/_styles.scss
+++ b/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 {
diff --git a/frontend/components/forms/packs/PackForm/PackForm.tsx b/frontend/components/forms/packs/PackForm/PackForm.tsx
index c1a7be4a64..5c41c21a5e 100644
--- a/frontend/components/forms/packs/PackForm/PackForm.tsx
+++ b/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 (
-
+
+
+
+
+
+
+
+
+
);
};
diff --git a/frontend/components/forms/packs/PackForm/_styles.scss b/frontend/components/forms/packs/PackForm/_styles.scss
index 95ea764cad..c6412422b4 100644
--- a/frontend/components/forms/packs/PackForm/_styles.scss
+++ b/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;
+ }
+ }
}
diff --git a/frontend/pages/packs/EditPackPage/EditPackPage.tsx b/frontend/pages/packs/EditPackPage/EditPackPage.tsx
index b873ea2865..4e15e592c3 100644
--- a/frontend/pages/packs/EditPackPage/EditPackPage.tsx
+++ b/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 (
+
+

+
Back to packs
+
{storedPack && storedPackQueries && (
&__content {
display: flex;
flex-direction: column;
diff --git a/frontend/router/paths.ts b/frontend/router/paths.ts
index 10a418d918..c339b8bd36 100644
--- a/frontend/router/paths.ts
+++ b/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`;
},