feat(client):pending changes badge

Author: yuval-hazaz

Diff for: packages/amplication-client/src/Application/ApplicationLayout.tsx

@@ -59,7 +59,7 @@ function ApplicationLayout({ match }: Props) {
   const [pendingChanges, setPendingChanges] = useState<PendingChangeItem[]>([]);
 
   const [selectedFixedPanel, setSelectedFixedPanel] = useState<string>(
-    EnumFixedPanelKeys.PendingChanges
+    EnumFixedPanelKeys.None
   );
 
   const handleMenuItemWithFixedPanelClicked = useCallback(
@@ -146,6 +146,9 @@ function ApplicationLayout({ match }: Props) {
     [pendingChanges, addEntity, addBlock, addChange, refetch]
   );
 
+  const pendingChangesBadge =
+    (pendingChanges.length && pendingChanges.length.toString()) || null;
+
   return (
     <PendingChangesContext.Provider value={pendingChangesContextValue}>
       <MainLayout className={CLASS_NAME}>
@@ -168,6 +171,7 @@ function ApplicationLayout({ match }: Props) {
             icon="pending_changes_outline"
             isOpen={selectedFixedPanel === EnumFixedPanelKeys.PendingChanges}
             panelKey={EnumFixedPanelKeys.PendingChanges}
+            badgeValue={pendingChangesBadge}
             onClick={handleMenuItemWithFixedPanelClicked}
           >
             <PendingChangesBar applicationId={application} />

Diff for: packages/amplication-client/src/Layout/MenuItem.scss

@@ -29,6 +29,10 @@ $inverted-border-radius: 6px;
     width: 0;
     letter-spacing: normal;
   }
+  &__badge {
+    @include counterBadge;
+    background-color: var(--negative-light);
+  }
 
   &:hover {
     background-color: transparent !important;

Diff for: packages/amplication-client/src/Layout/MenuItemWithFixedPanel.tsx

@@ -18,6 +18,8 @@ type Props = {
   children?: ReactNode;
   /* the key of the panel to be returned to the menu component when this item is clicked*/
   panelKey: string;
+  /* The value to show on a badge. When null or undefined the badge is hidden*/
+  badgeValue?: string | null;
   onClick: (panelKey: string) => void;
 };
 
@@ -30,6 +32,7 @@ const MenuItemWithFixedPanel = ({
   isOpen,
   children,
   panelKey,
+  badgeValue,
   onClick,
 }: Props) => {
   const handleClick = useCallback(() => {
@@ -57,6 +60,9 @@ const MenuItemWithFixedPanel = ({
               }}
             />
           </Button>
+          {badgeValue && (
+            <span className="amp-menu-item__badge">{badgeValue}</span>
+          )}
         </Tooltip>
       </div>
       {isOpen && <MenuFixedPanel.Source>{children}</MenuFixedPanel.Source>}

Diff for: packages/amplication-client/src/VersionControl/PendingChangesBar.scss

@@ -11,9 +11,6 @@
     border-top: $border-black10;
     margin: 0;
   }
-  &__counter {
-    @include counterBadge;
-  }
 
   .build-header {
     margin-top: var(--double-spacing);

Diff for: packages/amplication-client/src/style/css-variables.css

@@ -8,4 +8,6 @@
   --theme-turquoise: #41cadd;
   --theme-green: #8dd9b9;
   --theme-blue: #20a4f3;
+
+  --negative-light: #f85b6e;
 }

Diff for: packages/amplication-client/src/style/mixin.scss

@@ -139,6 +139,7 @@ $bullet-size: 6px;
   top: -8px;
   left: calc(100% - 14px);
   height: 16px;
+  min-width: 16px;
   background-color: var(--primary);
   color: var(--white);
   border-radius: 8px;