Add stereotype visibility toggle button

[farisd16]

Checklist

• [ ] I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes
• [ ] I translated all the newly inserted strings into German and English

Motivation and Context

Closes #361

Description

I have added a button to the popups of Components and Subsystems in a Component diagram, and to the popups of Components and Nodes in a Deployment diagram, which toggles the visibility of the stereotype.

Steps for Testing

1. Create a component/deployment diagram
2. Add a new component/subsystem/node
3. Open the popup of the newly added element by clicking on it and then on the pencil icon
4. Click on the stereotype visibility toggle button
5. Assert that the button works as expected

Test Coverage

File	Branch	Line
stereotype-off.tsx	100%	43.75%
stereotype-on.tsx	100%	100%
stereotype-toggle.tsx	50%	100%
main/packages/common/uml-component/uml-component-component.tsx	75%	100%
uml-component-update.tsx	100%	47.19%
main/packages/common/uml-component/uml-component.ts	100%	100%
popups.ts	100%	100%
uml-component-subsystem-component.tsx	25%	100%
uml-component-subsystem-update.tsx	100%	48.35%
uml-component-subsystem.ts	100%	64.58%
main/packages/uml-component-diagram/uml-component/uml-component-component.ts	100%	60.52%
main/packages/uml-deployment-diagram/uml-deployment-component/uml-component.ts	100%	62.5%
uml-deployment-node-component.tsx	80%	100%
uml-deployment-node-update.tsx	100%	97.8%
uml-deployment-node.ts	100%	66%
typings.ts	100%	100%

Screenshots

[FelixTJDietrich]

Can you explain to my why the changes so many changes are necessary? Maybe you can remove some changes that you did 🤔
I thought you just added the new svg icons, added a button, hid the stereotype in the elements, and persisted it. Why are the other changes necessary?

[farisd16]

I will try to clarify my changes

• components/controls/icon: I added icons for the toggle button in this directory
• stereotype-toggle.tsx: File for the new toggle button
• packages/common/uml-component: I added a popup for the Component and made sure stereotype visibility is adjusted by the toggle (both in Deployment and Component diagram, as this is in the common directory)
• popups.ts: Registered new popups accordingly
• packages/uml-component-diagram: Analogue to changes in packages/common/uml-component
• packages/uml-deployment-diagram: Analogue to changes in packages/common/uml-component
• typints.ts: Adjusted types accordingly
• tests: Updated snapshots

[GODrums]

Looks generally good to me.
I added an improvment suggestion regarding the alignment whenever the stereotype is hidden.

Also have a look at the results of the Codacy Static Code Analysis, you are explicitly declaring a few types that can be inferred from the context.

[FelixTJDietrich]

Code and functionality look good to me now 👍

[GODrums]

LGTM!