Merge pull request #7909 from plotly/update-server-config

Update plot config to show 'upload to cloud' button by default

Author: emilykl

draftlogs/7909_change.md

@@ -0,0 +1 @@
+- Update plot_config to show the "Upload to Cloud" button by default, and set the default server URL to cloud.plotly.com via [[#7909](https://github.com/plotly/plotly.js/pull/7909)]

src/components/modebar/buttons.js

@@ -72,7 +72,7 @@ modeBarButtons.toImage = {
 modeBarButtons.sendChartToCloud = {
     name: 'sendChartToCloud',
     title: function (gd) {
-        return _(gd, 'Share with Plotly Cloud');
+        return _(gd, 'Share Chart');
     },
     icon: Icons.cloudupload,
     click: function (gd) {

src/components/modebar/cloud_confirm.js

@@ -32,9 +32,13 @@ module.exports = function confirmCloudDialog(gd, serverUrl, onConfirm) {
         .classed('plotly-cloud-dialog-title', true)
         .text(_(gd, 'Share with Plotly Cloud'));
 
-    dialog.append('div')
-        .classed('plotly-cloud-dialog-message', true)
-        .text(_(gd, 'This chart and its data will be sent to') + ' ' + serverUrl + '.');
+    var serverUrlText = new URL(serverUrl).hostname;
+
+    var description = dialog.append('div');
+    description.classed('plotly-cloud-dialog-message', true);
+    description.append('span').text(_(gd, 'This chart and its data will be sent to '));
+    description.append('span').text(serverUrlText).classed('plotly-cloud-dialog-message--hostname', true);
+    description.append('span').text('. ');
 
     var buttons = dialog.append('div')
         .classed('plotly-cloud-dialog-buttons', true);

src/css/_cloud_dialog.scss

@@ -41,6 +41,10 @@
             line-height: 1.5;
             overflow-wrap: break-word;
             word-wrap: break-word;
+
+            &--hostname {
+                font-weight: bold;
+            }
         }
 
         .plotly-cloud-dialog-buttons {
@@ -63,24 +67,24 @@
                 outline: 2px solid vars.$color-brand-primary;
                 outline-offset: 1px;
             }
-        }
 
-        .plotly-cloud-dialog-btn--cancel {
-            background-color: vars.$color-bg-light;
-            border-color: vars.$color-bg-darker;
-            color: vars.$color-muted-text;
-
-            &:hover {
+            &--cancel {
                 background-color: vars.$color-bg-base;
+                margin-left: auto;
+                color: vars.$color-muted-text;
+
+                &:hover {
+                    background-color: vars.$color-bg-darker;
+                }
             }
-        }
 
-        .plotly-cloud-dialog-btn--confirm {
-            background-color: vars.$color-brand-primary;
-            color: vars.$color-bg-light;
+            &--confirm {
+                background-color: vars.$color-brand-primary;
+                color: vars.$color-bg-light;
 
-            &:hover {
-                background-color: vars.$color-brand-accent;
+                &:hover {
+                    background-color: vars.$color-brand-accent;
+                }
             }
         }
     }

src/fonts/ploticon.js

@@ -106,7 +106,7 @@ module.exports = {
     cloudupload: {
         width: 640,
         height: 640,
-        path: 'M176 544C96.5 544 32 479.5 32 400C32 336.6 73 282.8 129.9 263.5C128.6 255.8 128 248 128 240C128 160.5 192.5 96 272 96C327.4 96 375.5 127.3 399.6 173.1C413.8 164.8 430.4 160 448 160C501 160 544 203 544 256C544 271.7 540.2 286.6 533.5 299.7C577.5 320 608 364.4 608 416C608 486.7 550.7 544 480 544L176 544zM337 255C327.6 245.6 312.4 245.6 303.1 255L231.1 327C221.7 336.4 221.7 351.6 231.1 360.9C240.5 370.2 255.7 370.3 265 360.9L296 329.9L296 432C296 445.3 306.7 456 320 456C333.3 456 344 445.3 344 432L344 329.9L375 360.9C384.4 370.3 399.6 370.3 408.9 360.9C418.2 351.5 418.3 336.3 408.9 327L336.9 255z',
+        path: 'M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z',
         transform: 'matrix(1 0 0 1 -15 -15)'
     },
     drawopenpath: {

src/plot_api/plot_config.js

@@ -33,7 +33,7 @@ var configAttributes = {
 
     plotlyServerURL: {
         valType: 'string',
-        dflt: '',
+        dflt: 'https://cloud.plotly.com/newchart',
         description: [
             'Sets the URL for the `sendChartToCloud` modebar button.',
             'When clicked, the button will send the chart data to this URL.',
@@ -237,7 +237,7 @@ var configAttributes = {
     },
     showSendToCloud: {
         valType: 'boolean',
-        dflt: false,
+        dflt: true,
         description: [
             'Should we include a modebar button that sends this chart to a URL',
             'specified by `plotlyServerURL`, for sharing the chart with others?',

src/types/generated/schema.d.ts

@@ -16540,7 +16540,10 @@ export interface ConfigBase {
      * Range: [1, 4]
      */
     plotGlPixelRatio?: number;
-    /** Sets the URL for the `sendChartToCloud` modebar button. When clicked, the button will send the chart data to this URL. */
+    /**
+     * Sets the URL for the `sendChartToCloud` modebar button. When clicked, the button will send the chart data to this URL.
+     * @default 'https://cloud.plotly.com/newchart'
+     */
     plotlyServerURL?: string;
     /**
      * Sets the length of the undo/redo queue.
@@ -16575,7 +16578,7 @@ export interface ConfigBase {
     showAxisRangeEntryBoxes?: boolean;
     /**
      * Should we include a modebar button that sends this chart to a URL specified by `plotlyServerURL`, for sharing the chart with others? Note that this button will (after a confirmation step) send chart data to an external server.
-     * @default false
+     * @default true
      */
     showSendToCloud?: boolean;
     /**

test/jasmine/tests/config_test.js

@@ -500,16 +500,6 @@ describe('config argument', function() {
 
         afterEach(destroyGraphDiv);
 
-        it('should default to an empty string', function(done) {
-            Plotly.newPlot(gd, [], {})
-            .then(function() {
-                expect(gd._context.plotlyServerURL).not.toBe('https://plot.ly');
-                expect(gd._context.plotlyServerURL).not.toBe('https://chart-studio.plotly.com');
-                expect(gd._context.plotlyServerURL).toBe('');
-            })
-            .then(done, done.fail);
-        });
-
         it('should open confirmation dialog when set to a correctly-formatted URL', function(done) {
             Plotly.newPlot(gd, [], {}, {
                 plotlyServerURL: 'https://example.plotly.com/endpoint'
@@ -519,7 +509,7 @@ describe('config argument', function() {
                 modeBarButtons.sendChartToCloud.click(gd);
                 var msg = document.querySelector('.plotly-cloud-dialog-message');
                 expect(msg).not.toBe(null, 'confirmation dialog should be shown');
-                expect(msg.textContent).toContain('https://example.plotly.com/endpoint');
+                expect(msg.textContent).toContain('example.plotly.com');
             })
             .then(done, done.fail);
         });
@@ -570,8 +560,8 @@ describe('config argument', function() {
 
                 var msg = document.querySelector('.plotly-cloud-dialog-message');
                 expect(msg).not.toBe(null, 'confirmation dialog should be shown');
-                expect(msg.textContent).toContain('https://yo.plotly.com/endpoint');
-                expect(msg.textContent).not.toContain('https://example.plotly.com/endpoint2');
+                expect(msg.textContent).toContain('yo.plotly.com');
+                expect(msg.textContent).not.toContain('example.plotly.com');
             })
             .catch(failTest)
             .then(function() {

test/jasmine/tests/modebar_test.js

@@ -1584,7 +1584,7 @@ describe('ModeBar', function() {
                 return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size();
             }
 
-            var initial = 10;
+            var initial = 11;
             Plotly.newPlot(gd, [{y: [1, 2]}], {})
             .then(function() {
                 expect(countButtons()).toBe(initial);
@@ -1669,7 +1669,7 @@ describe('ModeBar', function() {
                 return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size();
             }
 
-            var initial = 10;
+            var initial = 11;
             Plotly.newPlot(gd, [{y: [1, 2]}], {})
             .then(function() {
                 expect(countButtons()).toBe(initial);
@@ -1715,10 +1715,10 @@ describe('ModeBar', function() {
         it('remove buttons using template', function(done) {
             function countButtons() {
                 var modeBarEl = gd._fullLayout._modeBar.element;
-                return d3Select(modeBarEl).selectAll('a.modebar-btn').size();
+                return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size();
             }
 
-            var initial = 10;
+            var initial = 11;
             Plotly.newPlot(gd, [{y: [1, 2]}], {
                 template: {
                     layout: {
@@ -1750,7 +1750,7 @@ describe('ModeBar', function() {
                 return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size();
             }
 
-            var initial = 10;
+            var initial = 11;
             Plotly.newPlot(gd, [{y: [1, 2]}], {
                 template: {
                     layout: {
@@ -1773,7 +1773,7 @@ describe('ModeBar', function() {
                     return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size();
                 }
 
-                var initial = 10;
+                var initial = 11;
                 Plotly.newPlot(gd, [{y: [1, 2]}], {
                     modebar: {
                         remove: t
@@ -1794,7 +1794,7 @@ describe('ModeBar', function() {
                 return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size();
             }
 
-            var initial = 10;
+            var initial = 11;
             Plotly.newPlot(gd, [{y: [1, 2]}], {
                 modebar: {
                     add: 'drawline'

test/plot-schema.json

@@ -269,7 +269,7 @@
     },
     "plotlyServerURL": {
       "description": "Sets the URL for the `sendChartToCloud` modebar button. When clicked, the button will send the chart data to this URL.",
-      "dflt": "",
+      "dflt": "https://cloud.plotly.com/newchart",
       "valType": "string"
     },
     "queueLength": {
@@ -315,7 +315,7 @@
     },
     "showSendToCloud": {
       "description": "Should we include a modebar button that sends this chart to a URL specified by `plotlyServerURL`, for sharing the chart with others? Note that this button will (after a confirmation step) send chart data to an external server.",
-      "dflt": false,
+      "dflt": true,
       "valType": "boolean"
     },
     "showTips": {