Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move apps and team page scripts out of landing-page.js #27137

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion templates/corporate/apps.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends "zerver/portico.html" %}
{% set entrypoint = "landing-page" %}
{% set entrypoint = "apps-download" %}

{% set PAGE_TITLE = "Download the Zulip app for your device" %}

Expand Down
2 changes: 1 addition & 1 deletion templates/corporate/team.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends "zerver/portico.html" %}
{% set entrypoint = "landing-page" %}
{% set entrypoint = "teams-page" %}

{% set PAGE_TITLE = "The Zulip team" %}

Expand Down
1 change: 1 addition & 0 deletions tools/test-js-with-node
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@ EXEMPT_FILES = make_set(
"web/src/search.js",
"web/src/sent_messages.ts",
"web/src/sentry.ts",
"web/src/sentry_util.ts",
"web/src/server_events.js",
"web/src/settings.js",
"web/src/settings_account.js",
Expand Down
9 changes: 5 additions & 4 deletions web/src/blueslip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import * as Sentry from "@sentry/browser";
import $ from "jquery";

import {BlueslipError, display_stacktrace} from "./blueslip_stacktrace";
import {page_params} from "./page_params";

const development_environment = $("#page-params").data("params").development_environment;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change seems dangerous, in that page_params.ts removes it from the DOM in the web app itself. Also, we really really don't want to have jQuery parse the params twice; it is an expensive operation for large organizations like chat.zulip.org.

Probably a good #frontend conversation about what we want to do with this detail.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the most likely theory for how to fix this is to put the actual app parameters into a separate data-app-params bucket from the "common" stuff used by Sentry/Blueslip and smaller pages, and those things can be parsed multiple times safely as they would not be huge. But I'm not sure and it deserves a proper discussion.


if (Error.stackTraceLimit !== undefined) {
Error.stackTraceLimit = 100000;
Expand Down Expand Up @@ -81,7 +82,7 @@ export function info(msg: string, more_info?: unknown): void {
export function warn(msg: string, more_info?: unknown): void {
const args = build_arg_list(msg, more_info);
logger.warn(...args);
if (page_params.development_environment) {
if (development_environment) {
console.trace();
}
}
Expand All @@ -100,7 +101,7 @@ export function error(msg: string, more_info?: object | undefined, original_erro
logger.error(...args);

// Throw an error in development; this will show a dialog (see below).
if (page_params.development_environment) {
if (development_environment) {
throw new BlueslipError(msg, more_info, original_error);
}
// This function returns to its caller in production! To raise a
Expand All @@ -109,7 +110,7 @@ export function error(msg: string, more_info?: object | undefined, original_erro

// Install a window-wide onerror handler in development to display the stacktraces, to make them
// hard to miss
if (page_params.development_environment) {
if (development_environment) {
$(window).on("error", (event: JQuery.TriggeredEvent) => {
const {originalEvent} = event;
if (!(originalEvent instanceof ErrorEvent)) {
Expand Down
6 changes: 3 additions & 3 deletions web/src/channel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import _ from "lodash";
import * as blueslip from "./blueslip";
import {page_params} from "./page_params";
import * as reload_state from "./reload_state";
import {normalize_path, shouldCreateSpanForRequest} from "./sentry";
import * as sentry_util from "./sentry_util";
import * as spectators from "./spectators";

// We omit `success` handler from original `AjaxSettings` type because it types
Expand Down Expand Up @@ -46,7 +46,7 @@ function call(args: AjaxRequestHandlerOptions): JQuery.jqXHR<unknown> | undefine
}

const existing_span = Sentry.getCurrentHub().getScope().getSpan();
const txn_title = `call ${args.type} ${normalize_path(args.url)}`;
const txn_title = `call ${args.type} ${sentry_util.normalize_path(args.url)}`;
const span_data = {
op: "function",
description: txn_title,
Expand All @@ -56,7 +56,7 @@ function call(args: AjaxRequestHandlerOptions): JQuery.jqXHR<unknown> | undefine
},
};
let span: Sentry.Span | undefined;
if (!shouldCreateSpanForRequest(args.url)) {
if (!sentry_util.shouldCreateSpanForRequest(args.url)) {
// Leave the span unset, so we don't record a transaction
} else {
if (!existing_span) {
Expand Down
5 changes: 0 additions & 5 deletions web/src/page_params.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ export const page_params: {
realm_plan_type: number;
realm_private_message_policy: number;
realm_push_notifications_enabled: boolean;
realm_sentry_key: string | undefined;
realm_enable_guest_user_indicator: boolean;
realm_upload_quota_mib: number | null;
realm_uri: string;
Expand All @@ -89,10 +88,6 @@ export const page_params: {
server_name_changes_disabled: boolean;
server_needs_upgrade: boolean;
server_presence_offline_threshold_seconds: number;
server_sentry_dsn: string | undefined;
server_sentry_environment: string | undefined;
server_sentry_sample_rate: number | undefined;
server_sentry_trace_rate: number | undefined;
server_web_public_streams_enabled: boolean;
show_billing: boolean;
show_plans: boolean;
Expand Down
118 changes: 118 additions & 0 deletions web/src/portico/apps_download.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import $ from "jquery";

import macbook_image from "../../images/app-screenshots/macbook.png";
import microsoft_image from "../../images/app-screenshots/microsoft.png";
import ubuntu_image from "../../images/app-screenshots/ubuntu.png";
import android_image from "../../images/app-screenshots/zulip-android.png";
import iphone_image from "../../images/app-screenshots/zulip-iphone-rough.png";

import {path_parts} from "./landing-page";
import {detect_user_os} from "./tabbed-instructions";

const apps_events = function () {
const info = {
windows: {
image: microsoft_image,
alt: "Windows",
description:
"Zulip for Windows is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
download_link: "/apps/download/windows",
show_instructions: true,
install_guide: "/help/desktop-app-install-guide",
app_type: "desktop",
},
mac: {
image: macbook_image,
alt: "macOS",
description:
"Zulip on macOS is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
download_link: "/apps/download/mac",
mac_arm64_link: "/apps/download/mac-arm64",
show_instructions: true,
install_guide: "/help/desktop-app-install-guide",
app_type: "desktop",
},
android: {
image: android_image,
alt: "Android",
description: "Zulip's native Android app makes it easy to keep up while on the go.",
show_instructions: false,
play_store_link: "https://play.google.com/store/apps/details?id=com.zulipmobile",
download_link: "https://github.com/zulip/zulip-mobile/releases/latest",
app_type: "mobile",
},
ios: {
image: iphone_image,
alt: "iOS",
description: "Zulip's native iOS app makes it easy to keep up while on the go.",
show_instructions: false,
app_store_link: "https://itunes.apple.com/us/app/zulip/id1203036395",
app_type: "mobile",
},
linux: {
image: ubuntu_image,
alt: "Linux",
description:
"Zulip on the Linux desktop is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
download_link: "/apps/download/linux",
show_instructions: true,
install_guide: "/help/desktop-app-install-guide",
app_type: "desktop",
},
};

let version;

function get_version_from_path() {
let result;
const parts = path_parts();

for (const version of Object.keys(info)) {
if (parts.includes(version)) {
result = version;
}
}

result = result || detect_user_os();
return result;
}

const update_page = function () {
const $download_instructions = $(".download-instructions");
const $third_party_apps = $("#third-party-apps");
const $download_android_apk = $("#download-android-apk");
const $download_from_google_play_store = $(".download-from-google-play-store");
const $download_from_apple_app_store = $(".download-from-apple-app-store");
const $download_from_microsoft_store = $("#download-from-microsoft-store");
const $download_mac_arm64 = $("#download-mac-arm64");
const $desktop_download_link = $(".desktop-download-link");
const version_info = info[version];

$(".info .platform").text(version_info.alt);
$(".info .description").text(version_info.description);
$desktop_download_link.attr("href", version_info.download_link);
$download_from_google_play_store.attr("href", version_info.play_store_link);
$download_from_apple_app_store.attr("href", version_info.app_store_link);
$download_android_apk.attr("href", version_info.download_link);
$download_mac_arm64.attr("href", version_info.mac_arm64_link);
$(".image img").addClass(`app-screenshot-${version_info.app_type}`);
$(".image img").attr("src", version_info.image);
$download_instructions.find("a").attr("href", version_info.install_guide);

$download_instructions.toggle(version_info.show_instructions);

$third_party_apps.toggle(version_info.app_type === "desktop");
$desktop_download_link.toggle(version_info.app_type === "desktop");
$download_android_apk.toggle(version === "android");
$download_from_google_play_store.toggle(version === "android");
$download_from_apple_app_store.toggle(version === "ios");
$download_from_microsoft_store.toggle(version === "windows");
$download_mac_arm64.toggle(version === "mac");
};

// init
version = get_version_from_path();
update_page();
};

apps_events();
10 changes: 5 additions & 5 deletions web/src/portico/google-analytics.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import {gtag, install} from "ga-gtag";

import {page_params} from "../page_params";
import $ from "jquery";

export let config;
const google_analytics_id = $("#page-params").data("params").google_analytics_id;

if (page_params.google_analytics_id !== undefined) {
install(page_params.google_analytics_id);
config = (info) => gtag("config", page_params.google_analytics_id, info);
if (google_analytics_id !== undefined) {
install(google_analytics_id);
config = (info) => gtag("config", google_analytics_id, info);
} else {
config = () => {};
}
133 changes: 0 additions & 133 deletions web/src/portico/landing-page.js
Original file line number Diff line number Diff line change
@@ -1,142 +1,9 @@
import $ from "jquery";

import macbook_image from "../../images/app-screenshots/macbook.png";
import microsoft_image from "../../images/app-screenshots/microsoft.png";
import ubuntu_image from "../../images/app-screenshots/ubuntu.png";
import android_image from "../../images/app-screenshots/zulip-android.png";
import iphone_image from "../../images/app-screenshots/zulip-iphone-rough.png";
import {page_params} from "../page_params";

import {detect_user_os} from "./tabbed-instructions";
import render_tabs from "./team";

export function path_parts() {
return window.location.pathname.split("/").filter((chunk) => chunk !== "");
}

const apps_events = function () {
const info = {
windows: {
image: microsoft_image,
alt: "Windows",
description:
"Zulip for Windows is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
download_link: "/apps/download/windows",
show_instructions: true,
install_guide: "/help/desktop-app-install-guide",
app_type: "desktop",
},
mac: {
image: macbook_image,
alt: "macOS",
description:
"Zulip on macOS is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
download_link: "/apps/download/mac",
mac_arm64_link: "/apps/download/mac-arm64",
show_instructions: true,
install_guide: "/help/desktop-app-install-guide",
app_type: "desktop",
},
android: {
image: android_image,
alt: "Android",
description: "Zulip's native Android app makes it easy to keep up while on the go.",
show_instructions: false,
play_store_link: "https://play.google.com/store/apps/details?id=com.zulipmobile",
download_link: "https://github.com/zulip/zulip-mobile/releases/latest",
app_type: "mobile",
},
ios: {
image: iphone_image,
alt: "iOS",
description: "Zulip's native iOS app makes it easy to keep up while on the go.",
show_instructions: false,
app_store_link: "https://itunes.apple.com/us/app/zulip/id1203036395",
app_type: "mobile",
},
linux: {
image: ubuntu_image,
alt: "Linux",
description:
"Zulip on the Linux desktop is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
download_link: "/apps/download/linux",
show_instructions: true,
install_guide: "/help/desktop-app-install-guide",
app_type: "desktop",
},
};

let version;

function get_version_from_path() {
let result;
const parts = path_parts();

for (const version of Object.keys(info)) {
if (parts.includes(version)) {
result = version;
}
}

result = result || detect_user_os();
return result;
}

const update_page = function () {
const $download_instructions = $(".download-instructions");
const $third_party_apps = $("#third-party-apps");
const $download_android_apk = $("#download-android-apk");
const $download_from_google_play_store = $(".download-from-google-play-store");
const $download_from_apple_app_store = $(".download-from-apple-app-store");
const $download_from_microsoft_store = $("#download-from-microsoft-store");
const $download_mac_arm64 = $("#download-mac-arm64");
const $desktop_download_link = $(".desktop-download-link");
const version_info = info[version];

$(".info .platform").text(version_info.alt);
$(".info .description").text(version_info.description);
$desktop_download_link.attr("href", version_info.download_link);
$download_from_google_play_store.attr("href", version_info.play_store_link);
$download_from_apple_app_store.attr("href", version_info.app_store_link);
$download_android_apk.attr("href", version_info.download_link);
$download_mac_arm64.attr("href", version_info.mac_arm64_link);
$(".image img").addClass(`app-screenshot-${version_info.app_type}`);
$(".image img").attr("src", version_info.image);
$download_instructions.find("a").attr("href", version_info.install_guide);

$download_instructions.toggle(version_info.show_instructions);

$third_party_apps.toggle(version_info.app_type === "desktop");
$desktop_download_link.toggle(version_info.app_type === "desktop");
$download_android_apk.toggle(version === "android");
$download_from_google_play_store.toggle(version === "android");
$download_from_apple_app_store.toggle(version === "ios");
$download_from_microsoft_store.toggle(version === "windows");
$download_mac_arm64.toggle(version === "mac");
};

// init
version = get_version_from_path();
update_page();
};

const events = function () {
if (path_parts().includes("apps")) {
apps_events();
}
};

$(() => {
// Set up events / categories / search
events();

if (window.location.pathname === "/team/") {
const contributors = page_params.contributors;
delete page_params.contributors;
render_tabs(contributors);
}
});

// Scroll to anchor link when clicked. Note that help.js has a similar
// function; this file and help.js are never included on the same
// page.
Expand Down
Loading