1
/*
2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { useTypedRedux } from "@cocalc/frontend/app-framework";
7
import { Gap, Icon } from "@cocalc/frontend/components";
8
import { type CSSProperties, useEffect, useState } from "react";
9
import { version } from "@cocalc/util/smc-version";
10
import { webapp_client } from "@cocalc/frontend/webapp-client";
11

12
const VERSION_WARNING_STYLE = {
13
  fontSize: "12pt",
14
  position: "fixed",
15
  left: 12,
16
  backgroundColor: "#fcf8e3",
17
  color: "#8a6d3b",
18
  top: 20,
19
  borderRadius: 4,
20
  padding: "15px",
21
  zIndex: 900,
22
  boxShadow: "8px 8px 4px #888",
23
  width: "70%",
24
  marginTop: "1em",
25
} as CSSProperties;
26

27
export default function VersionWarning() {
28
  const [closed, setClosed] = useState<boolean>(false);
29
  const minVersion = useTypedRedux("customize", "version_min_browser");
30
  const recommendedVersion = useTypedRedux(
31
    "customize",
32
    "version_recommended_browser",
33
  );
34

35
  useEffect(() => {
36
    if (minVersion > version) {
37
      // immediately and permenantly disconnect user from conat
38
      webapp_client.conat_client.permanentlyDisconnect();
39
    }
40
  }, [minVersion]);
41

42
  if (version >= recommendedVersion) {
43
    return null;
44
  }
45

46
  if (version >= minVersion && closed) {
47
    return null;
48
  }
49

50
  const style = {
51
    ...VERSION_WARNING_STYLE,
52
    ...(version < minVersion
53
      ? { backgroundColor: "red", color: "#fff" }
54
      : undefined),
55
  };
56

57
  function render_critical() {
58
    if (version >= minVersion) {
59
      return;
60
    }
61
    return (
62
      <div>
63
        <br />
64
        THIS IS A CRITICAL UPDATE. YOU MUST <Gap />
65
        <a
66
          onClick={() => window.location.reload()}
67
          style={{
68
            cursor: "pointer",
69
            color: "white",
70
            fontWeight: "bold",
71
            textDecoration: "underline",
72
          }}
73
        >
74
          REFRESH THIS PAGE
75
        </a>
76
        <Gap /> IMMEDIATELY. Sorry for the inconvenience.
77
      </div>
78
    );
79
  }
80

81
  function render_suggested() {
82
    return (
83
      <>
84
        <Icon name={"refresh"} /> New Version Available: upgrade by <Gap />
85
        <a
86
          onClick={() => window.location.reload()}
87
          style={{
88
            cursor: "pointer",
89
            fontWeight: "bold",
90
            color: style.color,
91
            textDecoration: "underline",
92
          }}
93
        >
94
          reloading this page
95
        </a>
96
        .{render_close()}
97
      </>
98
    );
99
  }
100

101
  function render_close() {
102
    if (version >= minVersion) {
103
      return (
104
        <Icon
105
          name="times"
106
          className="pull-right"
107
          style={{ cursor: "pointer", marginTop: "5px" }}
108
          onClick={() => setClosed(true)}
109
        />
110
      );
111
    }
112
  }
113

114
  return (
115
    <div style={style}>
116
      {render_suggested()}
117
      {render_critical()}
118
    </div>
119
  );
120
}
121

122