Add tooltip marker to category headings

If category is excluded from weight, there is a help icon and a hover message

Author: Callisto13

frontend/src/app/Inventory/Table.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
+import { Icon, Tooltip } from 'antd';
 
 import { Category } from "types/category";
 import { Item as ItemType } from 'types/item';
 import { Update } from "types/api/item";
 
 import Item from './Item';
 import ExpandablePanel from "../components/ExpandablePanel";
+import { helpIconStyles } from "styles/common";
 
 interface TableProps {
     category: Category;
@@ -22,15 +24,25 @@ const Table: React.FC<TableProps> = ({ category, items, updateItem, fetchItems }
               fetchItems={fetchItems}/>
     );
 
-    const Header = <h3>{category.name}</h3>;
+    function setHeader(category: Category): JSX.Element {
+        if (category.exclude_weight) {
+            return <h3> {category.name}
+                <Tooltip title={"Items in this category will be excluded from base weight"}
+                                 mouseEnterDelay={.1}>
+                    <Icon type="stop-o" style={helpIconStyles}/>
+                </Tooltip>
+            </h3>;
+        }
+        return <h3>{category.name}</h3>
+    }
 
     return (
         <div key={category.id} style={{ marginBottom: '24px' }}>
-            <ExpandablePanel Header={Header}>
+            <ExpandablePanel Header={setHeader(category)}>
                 {itemList}
             </ExpandablePanel>
         </div>
     )
 };
 
-export default Table;
+export default Table;

frontend/src/app/Pack/Items.tsx

@@ -10,6 +10,7 @@ import { getItemWeight, getWeightByCategory } from "lib/utils/weight";
 import { getCategories } from "lib/utils/categories";
 
 import { ItemList, ItemName, ItemNotes, ItemDescription, ItemQuantity, ItemWeight, CategorySection } from "./styles";
+import { helpIconStyles } from "styles/common";
 import ExpandablePanel from 'app/components/ExpandablePanel';
 
 interface ItemsProps {
@@ -42,7 +43,14 @@ const Items: React.FC<ItemsProps> = ({ items, unit }) => {
 
                 const Header = (
                     <>
-                        <h3>{cat.name}</h3>
+                        <h3>
+                            {cat.name}
+                            {cat.exclude_weight &&
+                            <Tooltip title={"Items in this category are excluded from base weight"}
+                                             mouseEnterDelay={.1}>
+                                <Icon type="stop-o" style={helpIconStyles}/>
+                            </Tooltip>}
+                        </h3>
                         <strong>{catWeight!.total.label} {unit}</strong>
                     </>
                 )
@@ -99,4 +107,4 @@ const Items: React.FC<ItemsProps> = ({ items, unit }) => {
 
 };
 
-export default Items;
+export default Items;

frontend/src/app/components/FormFields/SwitchInput.tsx

@@ -15,13 +15,13 @@ const SwitchInput: React.FC<SwitchProps> = ({ checked, checkedText, uncheckedTex
     return (
         <InputContainer {...{ label, tip, style }} labelStyle = {{display:"inline", paddingRight: '8px'}}>
             <Switch
-                checked = {checked}   
+                checked={checked}
                 checkedChildren={checkedText}
-                unCheckedChildren={uncheckedText} 
+                unCheckedChildren={uncheckedText}
                 onChange={handleChange}
             />
         </InputContainer>
     );
 };
 
-export default SwitchInput;
+export default SwitchInput;

frontend/src/app/components/ItemForm/ItemForm.tsx

@@ -101,7 +101,7 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
                         {isNewCategory &&
                            <SwitchInput
                                     label="Exclude category from base weight"
-                                    checked = {values.excludeWeight}
+                                    checked={values.excludeWeight}
                                     checkedText="Yes"
                                     uncheckedText="No"
                                     tip="All items added to this category will be excluded from base weight"

frontend/src/app/components/PackItems/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Icon, Tooltip } from 'antd';
 
 import { WeightUnit } from "enums";
 import { PackItem } from "types/item";
@@ -9,6 +10,7 @@ import Item from './Item';
 
 import { getCategories } from "lib/utils/categories";
 import { getWeightByCategory } from "lib/utils/weight";
+import { helpIconStyles } from "styles/common";
 
 import { CategoryGroup } from "styles/common";
 import ExpandablePanel from '../ExpandablePanel';
@@ -42,7 +44,14 @@ const PackItems: React.FC<PackItemProps> = ({ items, removeItem, updateItem, wei
             const catWeight = weightByCategory.find(c => c.id === cat.id);
             const Header = (
                 <>
-                    <h3>{cat.name}</h3>
+                    <h3>
+                        {cat.name}
+                        {cat.exclude_weight &&
+                        <Tooltip title={"Items in this category are excluded from base weight"}
+                                         mouseEnterDelay={.1}>
+                            <Icon type="stop-o" style={helpIconStyles}/>
+                        </Tooltip>}
+                    </h3>
                     <strong>{catWeight!.total.label} {weightUnit}</strong>
                 </>
             );
@@ -71,4 +80,4 @@ const PackItems: React.FC<PackItemProps> = ({ items, removeItem, updateItem, wei
     )
 };
 
-export default PackItems;
+export default PackItems;