✨ Create Alerts page

nest_frontend/PageSwitcher.js

@@ -15,6 +15,9 @@ import PageShare from "./routes/PageShare"
 export default function PageSwitcher({ ...props }) {
     return (
         <Switch {...props}>
+            <Route path={"/repositories/:id/alerts"} exact={true}>
+                <PageAlerts/>
+            </Route>
             <Route path={"/repositories/:id/share"} exact={true}>
                 <PageShare/>
             </Route>
@@ -33,9 +36,6 @@ export default function PageSwitcher({ ...props }) {
             <Route path={"/repositories"} exact={true}>
                 <PageRepositories/>
             </Route>
-            <Route path={"/alerts"} exact={true}>
-                <PageAlerts/>
-            </Route>
             <Route path={"/settings"} exact={true}>
                 <PageSettings/>
             </Route>

nest_frontend/components/interactive/BoxRepositories.js

@@ -11,6 +11,7 @@ import ContextUser from "../../contexts/ContextUser"
  *
  * @param repositories - The repositories to list.
  * @param view - Function with a single "id" parameter to call when the view repository button is clicked.
+ * @param alerts - Function with a single "id" parameter to call when the alerts button is clicked.
  * @param archive - Function with a single "id" parameter to call when the archive repository button is clicked.
  * @param edit - Function with a single "id" parameter to call when the edit repository button is clicked.
  * @param destroy - Function with a single "id" parameter to call when the delete repository button is clicked.
@@ -25,6 +26,7 @@ export default function BoxRepositories(
     {
         repositories,
         view,
+        alerts,
         share,
         archive,
         edit,
@@ -50,6 +52,7 @@ export default function BoxRepositories(
                 key={repo["id"]}
                 repo={repo}
                 view={view ? () => view(repo["id"]) : null}
+                alerts={alerts ? () => alerts(repo["id"]) : null}
                 share={(share && user["email"] === repo["owner"]["email"]) ? () => share(repo["id"]) : null}
                 archive={archive ? () => archive(repo["id"]) : null}
                 edit={edit ? () => edit(repo["id"]) : null}

nest_frontend/components/interactive/Sidebar.js

@@ -28,7 +28,6 @@ export default function Sidebar({ className, ...props }) {
                 <>
                     <ButtonSidebar to={"/dashboard"} icon={faHome}>{strings.dashboard}</ButtonSidebar>
                     <ButtonSidebar to={"/repositories"} icon={faFolder}>{strings.repositories}</ButtonSidebar>
-                    <ButtonSidebar to={"/alerts"} icon={faExclamationTriangle}>{strings.alerts}</ButtonSidebar>
                     <ButtonSidebar to={"/settings"} icon={faCog}>{strings.settings}</ButtonSidebar>
                 </>
                      :

nest_frontend/components/interactive/SummaryRepository.js

@@ -1,5 +1,13 @@
 import React, { useContext } from "react"
-import { faArchive, faFolder, faFolderOpen, faPencilAlt, faShare, faTrash } from "@fortawesome/free-solid-svg-icons"
+import {
+    faArchive,
+    faBell,
+    faFolder,
+    faFolderOpen,
+    faPencilAlt,
+    faShare,
+    faTrash,
+} from "@fortawesome/free-solid-svg-icons"
 import ContextLanguage from "../../contexts/ContextLanguage"
 import SummaryBase from "../base/summary/SummaryBase"
 import SummaryLeft from "../base/summary/SummaryLeft"
@@ -13,7 +21,8 @@ import SummaryRight from "../base/summary/SummaryRight"
  *
  * @param repo - The repository to display.
  * @param view - Function with no parameters to call when the view repository button is clicked.
- * @param share - Function with no parameters to call when the archive repository button is clicked.
+ * @param alerts - Function with no parameters to call when the alerts button is clicked.
+ * @param share - Function with no parameters to call when the share repository button is clicked.
  * @param archive - Function with no parameters to call when the archive repository button is clicked.
  * @param edit - Function with no parameters to call when the edit repository button is clicked.
  * @param destroy - Function with no parameters to call when the delete repository button is clicked.
@@ -24,7 +33,7 @@ import SummaryRight from "../base/summary/SummaryRight"
  * @constructor
  */
 export default function SummaryRepository(
-    { repo, view, share, archive, edit, destroy, running, className, ...props },
+    { repo, view, alerts, share, archive, edit, destroy, running, className, ...props },
 ) {
     const { strings } = useContext(ContextLanguage)
 
@@ -47,7 +56,7 @@ export default function SummaryRepository(
 
             {share ?
                 <SummaryButton
-                    color={"Green"}
+                    color={"Grey"}
                     icon={faShare}
                     onClick={() => share()}
                     disabled={running}
@@ -56,25 +65,14 @@ export default function SummaryRepository(
                 </SummaryButton>
             : null}
 
-            {destroy ?
+            {alerts ?
              <SummaryButton
-                 color={"Red"}
+                 color={"Green"}
-                 icon={faTrash}
+                 icon={faBell}
-                 onClick={() => destroy()}
+                 onClick={() => alerts()}
                  disabled={running}
              >
-                 {strings.delete}
+                 {strings.alerts}
-             </SummaryButton>
-                     : null}
-
-            {archive ?
-             <SummaryButton
-                 color={"Grey"}
-                 icon={faArchive}
-                 onClick={() => archive()}
-                 disabled={running}
-             >
-                 {strings.archive}
              </SummaryButton>
                     : null}
 
@@ -89,6 +87,28 @@ export default function SummaryRepository(
              </SummaryButton>
                   : null}
 
+            {archive ?
+             <SummaryButton
+                 color={"Grey"}
+                 icon={faArchive}
+                 onClick={() => archive()}
+                 disabled={running}
+             >
+                 {strings.archive}
+             </SummaryButton>
+                     : null}
+
+            {destroy ?
+             <SummaryButton
+                 color={"Red"}
+                 icon={faTrash}
+                 onClick={() => destroy()}
+                 disabled={running}
+             >
+                 {strings.delete}
+             </SummaryButton>
+                     : null}
+
             <SummaryRight/>
         </SummaryBase>
     )

nest_frontend/routes/PageAlerts.js

@@ -3,13 +3,19 @@ import Style from "./PageAlerts.module.css"
 import classNames from "classnames"
 import BoxFull from "../components/base/BoxFull"
 import ContextLanguage from "../contexts/ContextLanguage"
+import BoxHeader from "../components/base/BoxHeader"
+import { useParams } from "react-router"
 
 
 export default function PageAlerts({ children, className, ...props }) {
     const { strings } = useContext(ContextLanguage)
+    const { id } = useParams()
 
     return (
         <div className={classNames(Style.PageAlerts, className)} {...props}>
+            <BoxHeader className={Style.Header}>
+                {strings.alerts}
+            </BoxHeader>
             <BoxFull header={strings.alertTitle} className={Style.YourAlerts}>
                 {strings.notImplemented}
             </BoxFull>

nest_frontend/routes/PageAlerts.module.css

@@ -3,7 +3,9 @@
 
     grid-template-areas:
         "a"
-        "b";
+        "b"
+        "c";
+    grid-template-rows: auto 1fr 1fr;
 
     grid-gap: 10px;
 
@@ -11,10 +13,14 @@
     height: 100%;
 }
 
-.YourAlerts {
+.Header {
     grid-area: a;
 }
 
-.CreateAlert {
+.YourAlerts {
     grid-area: b;
 }
+
+.CreateAlert {
+    grid-area: c;
+}

nest_frontend/routes/PageRepositories.js

@@ -32,6 +32,7 @@ export default function PageRepositories({ children, className, ...props }) {
                 repositories={bv.resources.filter(r => r.is_active)}
                 view={pk => history.push(`/repositories/${pk}`)}
                 share={pk => history.push(`/repositories/${pk}/share`)}
+                alerts={pk => history.push(`/repositories/${pk}/alerts`)}
                 archive={archive}
                 edit={pk => history.push(`/repositories/${pk}/edit`)}
             />

nest_frontend/routes/PageShare.js

@@ -11,22 +11,15 @@ import ContextUser from "../contexts/ContextUser"
 
 export default function PageShare({ className, ...props }) {
     const { strings } = useContext(ContextLanguage)
-    const {user: loggedUser} = useContext(ContextUser)
+    const { user: loggedUser } = useContext(ContextUser)
     const { id } = useParams()
-    const {resources: users, running: usersBvRunning} = useBackendViewset(
+
-        "/api/v1/users/",
+    const {
-        "email",
+        resources: authorizations,
-        {
+        createResource: createAuthorization,
-            list: true,
+        destroyResource: destroyAuthorization,
-            create: false,
+        running: authBvRunning
-            retrieve: false,
+    } = useBackendViewset(
-            edit: false,
-            destroy: false,
-            command: false,
-            action: false,
-        }
-    )
-    const {resources: authorizations, createResource: createAuthorization, destroyResource: destroyAuthorization, running: authBvRunning} = useBackendViewset(
         `/api/v1/repositories/${id}/authorizations/`,
         "email",
         {
@@ -40,6 +33,23 @@ export default function PageShare({ className, ...props }) {
         }
     )
 
+    const {
+        resources: users,
+        running: usersBvRunning
+    } = useBackendViewset(
+        "/api/v1/users/",
+        "email",
+        {
+            list: true,
+            create: false,
+            retrieve: false,
+            edit: false,
+            destroy: false,
+            command: false,
+            action: false,
+        }
+    )
+
     const shareWith = useCallback(
         user => {
             console.info("Authorizing ", user, " ...")