Merge pull request #166 from canonical/WD-16247-dev-highlight-webpages-that-are-new-or-to-be-deleted

WD-16247 Dev highlight webpages that are new or to be deleted

Author: akbarkz

.env

@@ -17,4 +17,4 @@ GOOGLE_CREDENTIALS=googlecreds
 GOOGLE_DRIVE_FOLDER_ID=googlecreds
 COPYDOC_TEMPLATE_ID=googlecreds
 GOOGLE_PRIVATE_KEY=base64encodedprivatekey
-GOOGLE_PRIVATE_KEY_ID=privatekeyid
+GOOGLE_PRIVATE_KEY_ID=privatekeyid

package.json

@@ -24,7 +24,7 @@
     "react-dom": "18.3.1",
     "react-query": "3.39.3",
     "react-router-dom": "6.29.0",
-    "vanilla-framework": "4.16.0",
+    "vanilla-framework": "4.21.0",
     "zustand": "4.5.6"
   },
   "devDependencies": {

static/client/App.scss

@@ -19,6 +19,8 @@
 // Icons
 @include vf-p-icons;
 @include vf-p-icons-common;
+@include vf-p-icon-edit;
+@include vf-p-icon-archive;
 
 // Utilities
 @include vf-u-align;

static/client/components/Navigation/NavigationElement/NavigationElement.tsx

@@ -3,6 +3,7 @@ import React, { type MouseEvent, useCallback, useEffect, useRef, useState } from
 import { useLocation } from "react-router-dom";
 
 import { type INavigationElementProps } from "./NavigationElement.types";
+import NavigationElementBadge from "./NavigationElementBadge";
 
 import type { IPage } from "@/services/api/types/pages";
 import { NavigationServices } from "@/services/navigation";
@@ -74,6 +75,7 @@ const NavigationElement = ({ activePageName, page, project, onSelect }: INavigat
               ref={expandButtonRef}
             >
               {NavigationServices.formatPageName(page.name)}
+              <NavigationElementBadge page={page} />
             </button>
           </>
           <ul
@@ -93,6 +95,7 @@ const NavigationElement = ({ activePageName, page, project, onSelect }: INavigat
       ) : (
         <div className={`p-list-tree__link ${page.name === activePageName ? "is-active" : ""}`} onClick={handleSelect}>
           {NavigationServices.formatPageName(page.name)}
+          <NavigationElementBadge page={page} />
         </div>
       )}
     </li>

static/client/components/Navigation/NavigationElement/NavigationElement.types.ts

@@ -6,3 +6,7 @@ export interface INavigationElementProps {
   project: string;
   onSelect: (path: string) => void;
 }
+
+export interface INavigationElementBadgeProps {
+  page: IPage;
+}

static/client/components/Navigation/NavigationElement/NavigationElementBadge.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from "react";
+
+import { Tooltip } from "@canonical/react-components";
+
+import type { INavigationElementBadgeProps } from "./NavigationElement.types";
+
+import { PageStatus } from "@/services/api/types/pages";
+
+const NavigationElementBadge = ({ page }: INavigationElementBadgeProps): JSX.Element => {
+  const getIcon = useMemo(() => {
+    switch (page.status) {
+      case PageStatus.NEW:
+        return <i className="p-icon--edit is-dark" />;
+      case PageStatus.TO_DELETE:
+        return <i className="p-icon--archive is-dark" />;
+      default:
+        return <></>;
+    }
+  }, [page.status]);
+
+  const getTitle = useMemo(() => {
+    switch (page.status) {
+      case PageStatus.NEW:
+        return "In drafts";
+      case PageStatus.TO_DELETE:
+        return "To be deleted";
+      default:
+        return null;
+    }
+  }, [page.status]);
+
+  const getText = useMemo(() => {
+    switch (page.status) {
+      case PageStatus.NEW:
+        return "This page isn't live yet.";
+      case PageStatus.TO_DELETE:
+        return "This page is being deleted.";
+      default:
+        return null;
+    }
+  }, [page.status]);
+
+  return (
+    <Tooltip
+      autoAdjust
+      message={
+        <>
+          <b>{getTitle}</b>
+          <br />
+          {getText}
+        </>
+      }
+      position="right"
+      zIndex={1000}
+    >
+      <div>{getIcon}</div>
+    </Tooltip>
+  );
+};
+
+export default NavigationElementBadge;

static/client/components/Navigation/NavigationElement/_NavigationElement.scss

@@ -12,4 +12,9 @@
 .p-list-tree__toggle {
   margin-right: 0;
   padding-right: 0;
+}
+
+.p-list-tree__link {
+  display: flex;
+  gap: 0.3rem;
 }

static/client/components/RequestTaskModal/RequestTaskModal.tsx

@@ -77,25 +77,26 @@ const RequestTaskModal = ({
       })
         .then(() => {
           onClose();
-          if (webpage.status === PageStatus.NEW) {
-            if (refetch) {
-              refetch()
-                .then((data) => {
-                  if (data?.length) {
-                    const project = data.find((p) => p.data?.data?.name === selectedProject?.name);
-                    if (project && project.data?.data) {
-                      setSelectedProject(project.data.data);
-                    }
-                  }
-                })
-                .finally(() => {
-                  navigate("/app", { replace: true });
-                });
-            } else {
+          const afterRefetch = () => {
+            if (webpage.status === PageStatus.NEW) {
               navigate("/app", { replace: true });
+            } else {
+              window.location.reload();
             }
+          };
+          if (refetch) {
+            refetch()
+              .then((data) => {
+                if (data?.length) {
+                  const project = data.find((p) => p.data?.data?.name === selectedProject?.name);
+                  if (project && project.data?.data) {
+                    setSelectedProject(project.data.data);
+                  }
+                }
+              })
+              .finally(afterRefetch);
           } else {
-            window.location.reload();
+            afterRefetch();
           }
         })
         .catch((error) => {

yarn.lock

@@ -6941,10 +6941,10 @@ validate-npm-package-name@^5.0.1:
   resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz#a316573e9b49f3ccd90dbb6eb52b3f06c6d604e8"
   integrity sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==
 
-vanilla-framework@4.16.0:
-  version "4.16.0"
-  resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.16.0.tgz#54e7a51e073de043d45a7bac37ffaa4f4351ac4a"
-  integrity sha512-LrxZLiNOm0cTpG++1X4MMy2efg8Xhc08JUAwNAybeSQ5FaaBGiAodbV1Fx3QvJxlaPFQqsjOdT6uZDwuOD7YJg==
+vanilla-framework@4.21.0:
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.21.0.tgz#745e6d4cff71b9d2a976540fc8041478d43127ae"
+  integrity sha512-/qQu0J5L17Oumpd9AD+kqEYgkBm/JjOJNO3ArObnw9Hx9Dk1Vt3dIasYEo9IR6QFAMU64daOXqbFB+Dz8fZmxw==
 
 verbalize@^0.1.2:
   version "0.1.2"