Add latest changes from gitlab-org/gitlab@master

1 files changed, 15 insertions, 15 deletions

diff --git a/doc/development/fe_guide/customizable_dashboards.md b/doc/development/fe_guide/customizable_dashboards.md
index 62dd974cccb..26c73b26126 100644
--- a/doc/development/fe_guide/customizable_dashboards.md
+++ b/doc/development/fe_guide/customizable_dashboards.md
@@ -19,7 +19,7 @@ To use customizable dashboards:
 
 1. Create your dashboard component.
 1. Render an instance of `CustomizableDashboard`.
-1. Pass a list of widgets to render.
+1. Pass a list of panels to render.
 
 For example, a customizable dashboard for users over time:
 
@@ -35,10 +35,10 @@ export default {
   },
   data() {
     return {
-      widgets: [
+      panels: [
         {
-          component: 'CubeLineChart', // The name of the widget component.
-          title: s__('ProductAnalytics|Users / Time'), // The title shown on the widget component.
+          component: 'CubeLineChart', // The name of the panel component.
+          title: s__('ProductAnalytics|Users / Time'), // The title shown on the panel component.
           // Gridstack settings based upon https://github.com/gridstack/gridstack.js/tree/master/doc#item-options.
           // All values are grid row/column numbers up to 12.
           // We use the default 12 column grid https://github.com/gridstack/gridstack.js#change-grid-columns.
@@ -50,17 +50,17 @@ export default {
             xPos: 0,
             yPos: 0,
           },
-          // Options that are used to set bespoke values for each widget.
-          // Available customizations are determined by the widget itself.
+          // Options that are used to set bespoke values for each panel.
+          // Available customizations are determined by the panel itself.
           customizations: {},
-          // Chart options defined by the charting library being used by the widget.
+          // Chart options defined by the charting library being used by the panel.
           chartOptions: {
             xAxis: { name: __('Time'), type: 'time' },
             yAxis: { name: __('Counts') },
           },
-          // The data for the widget.
-          // This could be imported or in this case, a query passed to be used by the widgets API.
-          // Each widget type determines how it handles this property.
+          // The data for the panel.
+          // This could be imported or in this case, a query passed to be used by the panels API.
+          // Each panel type determines how it handles this property.
           data: {
             query: {
               users: {
@@ -78,20 +78,20 @@ export default {
 
 <template>
   <h1>{{ s__('ProductAnalytics|Analytics dashboard') }}</h1>
-  <customizable-dashboard :widgets="widgets" />
+  <customizable-dashboard :panels="panels" />
 </template>
 ```
 
-The widgets data can be retrieved from a file or API request, or imported through HTML data attributes.
+The panels data can be retrieved from a file or API request, or imported through HTML data attributes.
 
-For each widget, a `component` is defined. Each `component` is a component declaration and should be included in
-[`vue_shared/components/customizable_dashboard/widgets_base.vue`](https://gitlab.com/gitlab-org/gitlab/blob/master/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/widgets_base.vue)
+For each panel, a `component` is defined. Each `component` is a component declaration and should be included in
+[`vue_shared/components/customizable_dashboard/panels_base.vue`](https://gitlab.com/gitlab-org/gitlab/blob/master/ee/app/assets/javascripts/vue_shared/components/customizable_dashboard/panels_base.vue)
 as a dynamic import, to keep the memory usage down until it is used.
 
 For example:
 
 ```javascript
 components: {
-  CubeLineChart: () => import('ee/product_analytics/dashboards/components/widgets/cube_line_chart.vue')
+  CubeLineChart: () => import('ee/product_analytics/dashboards/components/panels/cube_line_chart.vue')
 }
 ```