feat: general semiotics improvements [WD-15264] (#956)

## Done - Add map icon to dismiss all button in toast notification list - Add plus icon to all create resource buttons (icon is hidden on small screen) - Adjusted "Upload custom ISO", "Upload image" and "Custom ISOs" buttons with icons - Added the delete icon to all delete buttons on resource detail pages
canonical · Oct 18, 2024 · 1eb5b32 · 1eb5b32
2 parents 5cbd061 + efeca32
commit 1eb5b32
Show file tree

Hide file tree

Showing 16 changed files with 96 additions and 41 deletions.
diff --git a/src/components/ToastNotificationList.tsx b/src/components/ToastNotificationList.tsx
@@ -1,4 +1,9 @@
-import { Icon, Notification, ValueOf } from "@canonical/react-components";
+import {
+  Button,
+  Icon,
+  Notification,
+  ValueOf,
+} from "@canonical/react-components";
 import {
   DefaultTitles,
   NotificationSeverity,
@@ -224,12 +229,14 @@ const ToastNotificationList: FC<Props> = ({
         {notificationEls}
         <div className="dismiss">
           {getSeverityFilters()}
-          <button
+          <Button
             className="u-no-margin--bottom dismiss-button"
             onClick={handleGroupedDismiss}
+            hasIcon
           >
+            <Icon name="tidy" />
             {getDismissText()}
-          </button>
+          </Button>
         </div>
       </ul>
     </Animate>,

diff --git a/src/pages/images/actions/UploadCustomIsoBtn.tsx b/src/pages/images/actions/UploadCustomIsoBtn.tsx
@@ -1,11 +1,12 @@
 import { FC } from "react";
-import { Button, Modal } from "@canonical/react-components";
+import { Button, Icon, Modal } from "@canonical/react-components";
 import UploadCustomIso from "pages/storage/UploadCustomIso";
 import usePortal from "react-useportal";
 import { useQueryClient } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { useToastNotification } from "context/toastNotificationProvider";
 import ResourceLink from "components/ResourceLink";
+import { useSmallScreen } from "context/useSmallScreen";
 
 interface Props {
   className?: string;
@@ -16,6 +17,7 @@ const UploadCustomIsoBtn: FC<Props> = ({ className, project }) => {
   const toastNotify = useToastNotification();
   const { openPortal, closePortal, isOpen, Portal } = usePortal();
   const queryClient = useQueryClient();
+  const isSmallScreen = useSmallScreen();
 
   const handleCancel = () => closePortal();
 
@@ -37,8 +39,14 @@ const UploadCustomIsoBtn: FC<Props> = ({ className, project }) => {
 
   return (
     <>
-      <Button appearance="positive" onClick={openPortal} className={className}>
-        Upload custom ISO
+      <Button
+        appearance="positive"
+        onClick={openPortal}
+        className={className}
+        hasIcon={!isSmallScreen}
+      >
+        {!isSmallScreen && <Icon name="upload" light />}
+        <span>Upload custom ISO</span>
       </Button>
       {isOpen && (
         <Portal>

diff --git a/src/pages/images/actions/UploadImageBtn.tsx b/src/pages/images/actions/UploadImageBtn.tsx
@@ -1,14 +1,16 @@
 import { FC } from "react";
-import { ActionButton } from "@canonical/react-components";
+import { Button, Icon } from "@canonical/react-components";
 import usePortal from "react-useportal";
 import UploadImageForm from "./forms/UploadImageForm";
+import { useSmallScreen } from "context/useSmallScreen";
 
 interface Props {
   project: string;
 }
 
 const UploadImageBtn: FC<Props> = ({ project }) => {
   const { openPortal, closePortal, isOpen, Portal } = usePortal();
+  const isSmallScreen = useSmallScreen();
 
   return (
     <>
@@ -17,9 +19,14 @@ const UploadImageBtn: FC<Props> = ({ project }) => {
           <UploadImageForm close={closePortal} project={project} />
         </Portal>
       )}
-      <ActionButton className="u-no-margin--bottom" onClick={openPortal}>
+      <Button
+        className="u-no-margin--bottom"
+        onClick={openPortal}
+        hasIcon={!isSmallScreen}
+      >
+        {!isSmallScreen && <Icon name="upload" />}
         <span>Upload image</span>
-      </ActionButton>
+      </Button>
     </>
   );
 };

diff --git a/src/pages/instances/InstanceList.tsx b/src/pages/instances/InstanceList.tsx
@@ -57,6 +57,7 @@ import { LxdInstanceStatus } from "types/instance";
 import useSortTableData from "util/useSortTableData";
 import PageHeader from "components/PageHeader";
 import InstanceDetailPanel from "./InstanceDetailPanel";
+import { useSmallScreen } from "context/useSmallScreen";
 
 const loadHidden = () => {
   const saved = localStorage.getItem("instanceListHiddenColumns");
@@ -94,6 +95,7 @@ const InstanceList: FC = () => {
   const [sizeHidden, setSizeHidden] = useState<string[]>([]);
   const [selectedNames, setSelectedNames] = useState<string[]>([]);
   const [processingNames, setProcessingNames] = useState<string[]>([]);
+  const isSmallScreen = useSmallScreen();
 
   if (!project) {
     return <>Missing project</>;
@@ -535,8 +537,10 @@ const InstanceList: FC = () => {
                   onClick={() =>
                     navigate(`/ui/project/${project}/instances/create`)
                   }
+                  hasIcon={!isSmallScreen}
                 >
-                  {createButtonLabel}
+                  {!isSmallScreen && <Icon name="plus" light />}
+                  <span>{createButtonLabel}</span>
                 </Button>
               </PageHeader.BaseActions>
             )}

diff --git a/src/pages/networks/NetworkList.tsx b/src/pages/networks/NetworkList.tsx
@@ -17,12 +17,14 @@ import NotificationRow from "components/NotificationRow";
 import HelpLink from "components/HelpLink";
 import { useDocs } from "context/useDocs";
 import NetworkForwardCount from "pages/networks/NetworkForwardCount";
+import { useSmallScreen } from "context/useSmallScreen";
 
 const NetworkList: FC = () => {
   const docBaseLink = useDocs();
   const navigate = useNavigate();
   const notify = useNotify();
   const { project } = useParams<{ project: string }>();
+  const isSmallScreen = useSmallScreen();
 
   if (!project) {
     return <>Missing project</>;
@@ -143,16 +145,20 @@ const NetworkList: FC = () => {
               <Button
                 className="u-no-margin--bottom"
                 onClick={() => navigate(`/ui/project/${project}/networks/map`)}
+                hasIcon={!isSmallScreen}
               >
-                See map
+                {!isSmallScreen && <Icon name="map" />}
+                <span>See network map</span>
               </Button>
             )}
             <Button
               appearance="positive"
               className="u-no-margin--bottom"
               onClick={() => navigate(`/ui/project/${project}/networks/create`)}
+              hasIcon={!isSmallScreen}
             >
-              Create network
+              {!isSmallScreen && <Icon name="plus" light />}
+              <span>Create network</span>
             </Button>
           </>
         }

diff --git a/src/pages/networks/actions/DeleteNetworkBtn.tsx b/src/pages/networks/actions/DeleteNetworkBtn.tsx
@@ -5,9 +5,15 @@ import { LxdNetwork } from "types/network";
 import { deleteNetwork } from "api/networks";
 import { queryKeys } from "util/queryKeys";
 import { useQueryClient } from "@tanstack/react-query";
-import { ConfirmationButton, useNotify } from "@canonical/react-components";
+import {
+  ConfirmationButton,
+  Icon,
+  useNotify,
+} from "@canonical/react-components";
 import { useToastNotification } from "context/toastNotificationProvider";
 import ResourceLabel from "components/ResourceLabel";
+import { useSmallScreen } from "context/useSmallScreen";
+import classnames from "classnames";
 
 interface Props {
   network: LxdNetwork;
@@ -20,6 +26,7 @@ const DeleteNetworkBtn: FC<Props> = ({ network, project }) => {
   const queryClient = useQueryClient();
   const [isLoading, setLoading] = useState(false);
   const navigate = useNavigate();
+  const isSmallScreen = useSmallScreen();
 
   const handleDelete = () => {
     setLoading(true);
@@ -70,13 +77,16 @@ const DeleteNetworkBtn: FC<Props> = ({ network, project }) => {
         ),
         onConfirm: handleDelete,
       }}
-      className="u-no-margin--bottom"
+      className={classnames("u-no-margin--bottom", {
+        "has-icon": !isSmallScreen,
+      })}
       loading={isLoading}
       disabled={isUsed || !isManaged}
       shiftClickEnabled
       showShiftClickHint
     >
-      Delete network
+      {!isSmallScreen && <Icon name="delete" />}
+      <span>Delete network</span>
     </ConfirmationButton>
   );
 };

diff --git a/src/pages/profiles/ProfileList.tsx b/src/pages/profiles/ProfileList.tsx
@@ -2,6 +2,7 @@ import { FC, useState } from "react";
 import {
   Button,
   Col,
+  Icon,
   MainTable,
   Notification,
   Row,
@@ -28,6 +29,7 @@ import { useDocs } from "context/useDocs";
 import useSortTableData from "util/useSortTableData";
 import PageHeader from "components/PageHeader";
 import ProfileDetailPanel from "./ProfileDetailPanel";
+import { useSmallScreen } from "context/useSmallScreen";
 
 const ProfileList: FC = () => {
   const docBaseLink = useDocs();
@@ -36,6 +38,7 @@ const ProfileList: FC = () => {
   const panelParams = usePanelParams();
   const { project: projectName } = useParams<{ project: string }>();
   const [query, setQuery] = useState<string>("");
+  const isSmallScreen = useSmallScreen();
 
   if (!projectName) {
     return <>Missing project</>;
@@ -204,8 +207,10 @@ const ProfileList: FC = () => {
                   onClick={() =>
                     navigate(`/ui/project/${projectName}/profiles/create`)
                   }
+                  hasIcon={!isSmallScreen}
                 >
-                  Create profile
+                  {!isSmallScreen && <Icon name="plus" light />}
+                  <span>Create profile</span>
                 </Button>
               </PageHeader.BaseActions>
             )}

diff --git a/src/pages/profiles/actions/DeleteProfileBtn.tsx b/src/pages/profiles/actions/DeleteProfileBtn.tsx
@@ -26,7 +26,7 @@ const DeleteProfileBtn: FC<Props> = ({
   project,
   featuresProfiles,
 }) => {
-  const isDeleteIcon = useSmallScreen();
+  const isSmallScreen = useSmallScreen();
   const notify = useNotify();
   const toastNotify = useToastNotification();
   const queryClient = useQueryClient();
@@ -68,9 +68,8 @@ const DeleteProfileBtn: FC<Props> = ({
   return (
     <ConfirmationButton
       onHoverText={getHoverText()}
-      appearance={isDeleteIcon ? "base" : "default"}
       className={classnames("u-no-margin--bottom", {
-        "has-icon": isDeleteIcon,
+        "has-icon": !isSmallScreen,
       })}
       disabled={isDefaultProfile || !featuresProfiles}
       loading={isLoading}
@@ -89,8 +88,8 @@ const DeleteProfileBtn: FC<Props> = ({
       shiftClickEnabled
       showShiftClickHint
     >
-      {isDeleteIcon && <Icon name="delete" />}
-      {!isDeleteIcon && <span>Delete</span>}
+      {!isSmallScreen && <Icon name="delete" />}
+      <span>Delete</span>
     </ConfirmationButton>
   );
 };

diff --git a/src/pages/projects/actions/DeleteProjectBtn.tsx b/src/pages/projects/actions/DeleteProjectBtn.tsx
@@ -76,7 +76,7 @@ const generateProjectUsedByTooltip = (project: LxdProject) => {
 };
 
 const DeleteProjectBtn: FC<Props> = ({ project }) => {
-  const isDeleteIcon = useSmallScreen();
+  const isSmallScreen = useSmallScreen();
   const notify = useNotify();
   const toastNotify = useToastNotification();
   const queryClient = useQueryClient();
@@ -121,9 +121,8 @@ const DeleteProjectBtn: FC<Props> = ({ project }) => {
   return (
     <ConfirmationButton
       onHoverText={getHoverText()}
-      appearance={isDeleteIcon ? "base" : "default"}
       className={classnames("u-no-margin--bottom", {
-        "has-icon": isDeleteIcon,
+        "has-icon": !isSmallScreen,
       })}
       loading={isLoading}
       disabled={isDefaultProject || !isEmpty}
@@ -149,8 +148,8 @@ const DeleteProjectBtn: FC<Props> = ({ project }) => {
             : ""
         }
       >
-        {isDeleteIcon && <Icon name="delete" />}
-        {!isDeleteIcon && <span>Delete project</span>}
+        {!isSmallScreen && <Icon name="delete" />}
+        <span>Delete project</span>
       </Tooltip>
     </ConfirmationButton>
   );

diff --git a/src/pages/storage/StoragePoolHeader.tsx b/src/pages/storage/StoragePoolHeader.tsx
@@ -73,10 +73,10 @@ const StoragePoolHeader: FC<Props> = ({ name, pool, project }) => {
           key="delete"
           pool={pool}
           project={project}
-          shouldExpand={true}
+          shouldExpand
         />,
       ]}
-      isLoaded={true}
+      isLoaded
       formik={formik}
       renameDisabledReason="Cannot rename storage pools"
     />

diff --git a/src/pages/storage/actions/CreateStoragePoolBtn.tsx b/src/pages/storage/actions/CreateStoragePoolBtn.tsx
@@ -1,6 +1,7 @@
 import { FC } from "react";
-import { Button } from "@canonical/react-components";
+import { Button, Icon } from "@canonical/react-components";
 import { useNavigate } from "react-router-dom";
+import { useSmallScreen } from "context/useSmallScreen";
 
 interface Props {
   project: string;
@@ -9,15 +10,17 @@ interface Props {
 
 const CreateStoragePoolBtn: FC<Props> = ({ project, className }) => {
   const navigate = useNavigate();
+  const isSmallScreen = useSmallScreen();
 
   return (
     <Button
       appearance="positive"
       className={className}
-      hasIcon
+      hasIcon={!isSmallScreen}
       onClick={() => navigate(`/ui/project/${project}/storage/pools/create`)}
     >
-      Create pool
+      {!isSmallScreen && <Icon name="plus" light />}
+      <span>Create pool</span>
     </Button>
   );
 };

diff --git a/src/pages/storage/actions/CreateVolumeBtn.tsx b/src/pages/storage/actions/CreateVolumeBtn.tsx
@@ -1,6 +1,7 @@
 import { FC } from "react";
-import { Button } from "@canonical/react-components";
+import { Button, Icon } from "@canonical/react-components";
 import { useNavigate } from "react-router-dom";
+import { useSmallScreen } from "context/useSmallScreen";
 
 interface Props {
   project: string;
@@ -10,6 +11,7 @@ interface Props {
 
 const CreateVolumeBtn: FC<Props> = ({ project, className, defaultPool }) => {
   const navigate = useNavigate();
+  const isSmallScreen = useSmallScreen();
 
   const handleAdd = () => {
     navigate(
@@ -22,11 +24,12 @@ const CreateVolumeBtn: FC<Props> = ({ project, className, defaultPool }) => {
   return (
     <Button
       appearance="positive"
-      hasIcon
+      hasIcon={!isSmallScreen}
       onClick={handleAdd}
       className={className}
     >
-      Create volume
+      {!isSmallScreen && <Icon name="plus" light />}
+      <span>Create volume</span>
     </Button>
   );
 };