General catalog category (#3106)

* Adding General Entities and General Category

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Usign material icons for general entities

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Setting background for hotbar icon explicitly

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding Catalog initially to first hotbar

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Tuning hotbar store tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Changing type from GeneralEntity to General

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Search for catalog hotbar item in tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing Catalog link from bottom bar

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Waiting for hotbar catalog entity

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Opening cluster list by data-testId

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Replacing types on interfaces

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing integration tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding general entities throught initializers

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing icon refs from CatalogEntitySpec

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/avatar/avatar.tsx

@@ -32,6 +32,7 @@ interface Props extends DOMAttributes<HTMLElement>, Partial<AvatarTypeMap> {
   height?: number;
   src?: string;
   className?: string;
+  background?: string;
 }
 
 function getNameParts(name: string): string[] {
@@ -69,11 +70,11 @@ function getIconString(title: string) {
 }
 
 export function Avatar(props: Props) {
-  const { title, src, width = 32, height = 32, colorHash, ...settings } = props;
+  const { title, width = 32, height = 32, colorHash, children, background, ...settings } = props;
 
   const generateAvatarStyle = (): React.CSSProperties => {
     return {
-      backgroundColor: randomColor({ seed: colorHash, luminosity: "dark" }),
+      backgroundColor: background || randomColor({ seed: colorHash, luminosity: "dark" }),
       width,
       height,
       textTransform: "uppercase"
@@ -86,7 +87,7 @@ export function Avatar(props: Props) {
       style={generateAvatarStyle()}
       {...settings}
     >
-      {getIconString(title)}
+      {children || getIconString(title)}
     </MaterialAvatar>
   );
 }