Mono repo -> Master (#22553)

Combines the following repositories into one:

https://github.com/mattermost/mattermost-server
https://github.com/mattermost/mattermost-webapp
https://github.com/mattermost/focalboard
https://github.com/mattermost/mattermost-plugin-playbooks

webapp/platform/components/src/pulsating_dot/index.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {Coords} from '../common/hooks/useMeasurePunchouts';
+
+import './pulsating_dot.scss';
+
+type Props = {
+    targetRef?: React.RefObject<HTMLImageElement>;
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    coords?: Coords;
+}
+
+export class PulsatingDot extends React.PureComponent<Props> {
+    public render() {
+        let customStyles = {};
+        if (this.props?.coords) {
+            customStyles = {
+                transform: `translate(${this.props.coords?.x}px, ${this.props.coords?.y}px)`,
+            };
+        }
+        let effectiveClassName = 'pulsating_dot';
+        if (this.props.onClick) {
+            effectiveClassName += ' pulsating_dot-clickable';
+        }
+        if (this.props.className) {
+            effectiveClassName = effectiveClassName + ' ' + this.props.className;
+        }
+
+        return (
+            <span
+                className={effectiveClassName}
+                onClick={this.props.onClick}
+                ref={this.props.targetRef}
+                style={{...customStyles}}
+                data-testid={'pulsating_dot'}
+            />
+        );
+    }
+}

webapp/platform/components/src/pulsating_dot/pulsating_dot.scss

@@ -0,0 +1,37 @@
+.pulsating_dot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+
+    &-clickable {
+        cursor: pointer;
+    }
+
+    &,
+    &::before,
+    &::after {
+        width: 12px;
+        height: 12px;
+        background-color: var(--online-indicator);
+        border-radius: 50%;
+    }
+
+    &::before,
+    &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        content: "";
+    }
+
+    &::after {
+        animation: pulse1 2s ease 0s infinite;
+    }
+
+    &::before {
+        animation: pulse2 2s ease 0s infinite;
+    }
+}