[7.5] [Newsfeed] UI plugin for Kibana (elastic#49579) (elastic#50504)

* [Newsfeed] UI plugin for Kibana (elastic#49579)

* Added base folder structure for Newsfeed plugin

* Added base folders for lib and component

* Added newsfeed button to navigation controls on the right side

* add getApi() to return api data observable (elastic#49581)

* Added flyout base body and provided EuiHeaderAlert component inside the newsfeed plugin

* Moved newsfeed plugin to OSS and added for the styles purpose new folder for legacy plugin 'newsfeed' with the same id to support this

* Added subscribe on fetch newsfeed change

* Add NewsfeedApiDriver class (elastic#49710)

* add NewsfeedApiDriver class

* fix xpack prefix

* add corner case handling

* Added data binding to the ui

* added EuiHeaderAlert style overrides (elastic#49739)

* Fixed due to comments on PR

* add missing fields to NewsfeedItem and FetchResult

* fix templating of service url

* gracefully handle temporary request failure

* Mapped missing fields for data and badge

* Fixed typos issues

* integrate i18n.getLocale()

* allow service url root to be changed in dev mode

* replace a lot of consts with config

* fix flyout height (elastic#49809)

* Add "error" field to FetchResult: Error | null

* simplify fetch error handling

* Do not store hash for items that are filtered out

* add expireOn in case it is useful to UI

* always use staging url for dev config

* unit test for newsfeed api driver

* simplify modelItems

* Fixed eslint errors

* Fixed label translations

* Add unit test for concatenating the stored hashes with the new

* add newsfeed to i18n.json

* Fixed expression error

* --wip-- [skip ci]

* fix parse error

* fix test

* test(newsfeed): Added testing endpoint which simulates the Elastic Newsfeed for consumption in functional tests

* add tests for getApi()

* add tests for getApi

* Added no news page

* fix fetch not happening after page refresh with sessionStorage primed

* test(newsfeed): Added testing endpoint which simulates the Elastic Newsfeed for consumption in functional tests

* Added loading screen

* Small fixes due to comments

* Fixed issue with stop fetching news on error catch

* test(newsfeed): Configure FTS to point newsfeed to the simulated newsfeed endpoit

* Fixed browser error message: Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

* Fixed typo issue in label name

* polish the code changes

* Add simple jest/enzyme tests for the components

* honor utc format

* Filter pre-published items

* Fall back to en

* retry tests

* comment clarfication

* Setup newsfeed service fixture from test/common/config

* Added base functional tests for newsfeed functionality

* valid urlroot is for prod

* add documentation for the supported enabled setting

* more urlRoot

* --wip-- [skip ci]

* add the before for fn

* add ui_capabilties test

* update jest snapshot

* Fixed failing test

* finish newsfeed error functional test

* include ui_capability config

* error case testing in ci group 6

* refactor(newsfeed): moved newsfeed api call so that it is done before its use

* code polish

* enabled newsfeed_err test in CI

* correct bad merge resolve

* allow default export for ftr file

* fix type check error

.i18nrc.json

@@ -21,6 +21,7 @@
     "visTypeMetric": "src/legacy/core_plugins/vis_type_metric",
     "visTypeVega": "src/legacy/core_plugins/vis_type_vega",
     "visTypeTable": "src/legacy/core_plugins/vis_type_table",
+    "newsfeed": "src/plugins/newsfeed",
     "regionMap": "src/legacy/core_plugins/region_map",
     "statusPage": "src/legacy/core_plugins/status_page",
     "tileMap": "src/legacy/core_plugins/tile_map",

docs/setup/settings.asciidoc

@@ -243,6 +243,10 @@ override this parameter to use their own Tile Map Service. For example:
 `ops.interval:`:: *Default: 5000* Set the interval in milliseconds to sample
 system and process performance metrics. The minimum value is 100.
 
+`newsfeed.enabled:` :: *Default: `true`* Controls whether to enable the newsfeed
+system for the Kibana UI notification center. Set to `false` to disable the
+newsfeed system.
+
 `path.data:`:: *Default: `data`* The path where Kibana stores persistent data
 not saved in Elasticsearch.
 

scripts/functional_tests.js

@@ -23,4 +23,5 @@ require('@kbn/test').runTestsCli([
   require.resolve('../test/api_integration/config.js'),
   require.resolve('../test/plugin_functional/config.js'),
   require.resolve('../test/interpreter_functional/config.js'),
+  require.resolve('../test/ui_capabilities/newsfeed_err/config.ts'),
 ]);

src/legacy/core_plugins/newsfeed/constants.ts

@@ -0,0 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const PLUGIN_ID = 'newsfeed';
+export const DEFAULT_SERVICE_URLROOT = 'https://feeds.elastic.co';
+export const DEV_SERVICE_URLROOT = 'https://feeds-staging.elastic.co';
+export const DEFAULT_SERVICE_PATH = '/kibana/v{VERSION}.json';

src/legacy/core_plugins/newsfeed/index.ts

@@ -0,0 +1,71 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { resolve } from 'path';
+import { LegacyPluginApi, LegacyPluginSpec, ArrayOrItem } from 'src/legacy/plugin_discovery/types';
+import { Legacy } from 'kibana';
+import { NewsfeedPluginInjectedConfig } from '../../../plugins/newsfeed/types';
+import {
+  PLUGIN_ID,
+  DEFAULT_SERVICE_URLROOT,
+  DEV_SERVICE_URLROOT,
+  DEFAULT_SERVICE_PATH,
+} from './constants';
+
+// eslint-disable-next-line import/no-default-export
+export default function(kibana: LegacyPluginApi): ArrayOrItem<LegacyPluginSpec> {
+  const pluginSpec: Legacy.PluginSpecOptions = {
+    id: PLUGIN_ID,
+    config(Joi: any) {
+      // NewsfeedPluginInjectedConfig in Joi form
+      return Joi.object({
+        enabled: Joi.boolean().default(true),
+        service: Joi.object({
+          pathTemplate: Joi.string().default(DEFAULT_SERVICE_PATH),
+          urlRoot: Joi.when('$prod', {
+            is: true,
+            then: Joi.string().default(DEFAULT_SERVICE_URLROOT),
+            otherwise: Joi.string().default(DEV_SERVICE_URLROOT),
+          }),
+        }).default(),
+        defaultLanguage: Joi.string().default('en'),
+        mainInterval: Joi.number().default(120 * 1000), // (2min) How often to retry failed fetches, and/or check if newsfeed items need to be refreshed from remote
+        fetchInterval: Joi.number().default(86400 * 1000), // (1day) How often to fetch remote and reset the last fetched time
+      }).default();
+    },
+    uiExports: {
+      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
+      injectDefaultVars(server): NewsfeedPluginInjectedConfig {
+        const config = server.config();
+        return {
+          newsfeed: {
+            service: {
+              pathTemplate: config.get('newsfeed.service.pathTemplate') as string,
+              urlRoot: config.get('newsfeed.service.urlRoot') as string,
+            },
+            defaultLanguage: config.get('newsfeed.defaultLanguage') as string,
+            mainInterval: config.get('newsfeed.mainInterval') as number,
+            fetchInterval: config.get('newsfeed.fetchInterval') as number,
+          },
+        };
+      },
+    },
+  };
+  return new kibana.Plugin(pluginSpec);
+}

src/legacy/core_plugins/newsfeed/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "newsfeed",
+  "version": "kibana"
+}

src/legacy/core_plugins/newsfeed/public/index.scss

@@ -0,0 +1,3 @@
+@import 'src/legacy/ui/public/styles/styling_constants';
+
+@import './np_ready/components/header_alert/_index';

src/legacy/core_plugins/newsfeed/public/np_ready/components/header_alert/_index.scss

@@ -0,0 +1,27 @@
+@import '@elastic/eui/src/components/header/variables';
+
+.kbnNews__flyout {
+  top: $euiHeaderChildSize + 1px;
+  height: calc(100% - #{$euiHeaderChildSize});
+}
+
+.kbnNewsFeed__headerAlert.euiHeaderAlert {
+  margin-bottom: $euiSizeL;
+  padding: 0 $euiSizeS $euiSizeL;
+  border-bottom: $euiBorderThin;
+  border-top: none;
+
+  .euiHeaderAlert__title {
+    @include euiTitle('xs');
+    margin-bottom: $euiSizeS;
+  }
+
+  .euiHeaderAlert__text {
+    @include euiFontSizeS;
+    margin-bottom: $euiSize;
+  }
+
+  .euiHeaderAlert__action {
+    @include euiFontSizeS;
+  }
+}

src/legacy/core_plugins/newsfeed/public/np_ready/components/header_alert/header_alert.tsx

@@ -0,0 +1,76 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { EuiFlexGroup, EuiFlexItem, EuiI18n } from '@elastic/eui';
+
+interface IEuiHeaderAlertProps {
+  action: JSX.Element;
+  className?: string;
+  date: string;
+  text: string;
+  title: string;
+  badge?: JSX.Element;
+  rest?: string[];
+}
+
+export const EuiHeaderAlert = ({
+  action,
+  className,
+  date,
+  text,
+  title,
+  badge,
+  ...rest
+}: IEuiHeaderAlertProps) => {
+  const classes = classNames('euiHeaderAlert', 'kbnNewsFeed__headerAlert', className);
+
+  const badgeContent = badge || null;
+
+  return (
+    <EuiI18n token="euiHeaderAlert.dismiss" default="Dismiss">
+      {(dismiss: any) => (
+        <div className={classes} {...rest}>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem>
+              <div className="euiHeaderAlert__date">{date}</div>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>{badgeContent}</EuiFlexItem>
+          </EuiFlexGroup>
+
+          <div className="euiHeaderAlert__title">{title}</div>
+          <div className="euiHeaderAlert__text">{text}</div>
+          <div className="euiHeaderAlert__action euiLink">{action}</div>
+        </div>
+      )}
+    </EuiI18n>
+  );
+};
+
+EuiHeaderAlert.propTypes = {
+  action: PropTypes.node,
+  className: PropTypes.string,
+  date: PropTypes.node.isRequired,
+  text: PropTypes.node,
+  title: PropTypes.node.isRequired,
+  badge: PropTypes.node,
+};

src/plugins/newsfeed/constants.ts

@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const NEWSFEED_FALLBACK_LANGUAGE = 'en';
+export const NEWSFEED_LAST_FETCH_STORAGE_KEY = 'newsfeed.lastfetchtime';
+export const NEWSFEED_HASH_SET_STORAGE_KEY = 'newsfeed.hashes';

src/plugins/newsfeed/kibana.json

@@ -0,0 +1,6 @@
+{
+  "id": "newsfeed",
+  "version": "kibana",
+  "server": false,
+  "ui": true
+}

src/plugins/newsfeed/public/components/empty_news.test.tsx

@@ -0,0 +1,32 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import { NewsEmptyPrompt } from './empty_news';
+
+describe('empty_news', () => {
+  describe('rendering', () => {
+    it('renders the default Empty News', () => {
+      const wrapper = shallow(<NewsEmptyPrompt />);
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+  });
+});

src/plugins/newsfeed/public/components/empty_news.tsx

@@ -0,0 +1,44 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiEmptyPrompt } from '@elastic/eui';
+
+export const NewsEmptyPrompt = () => {
+  return (
+    <EuiEmptyPrompt
+      iconType="documents"
+      titleSize="s"
+      data-test-subj="emptyNewsfeed"
+      title={
+        <h2>
+          <FormattedMessage id="newsfeed.emptyPrompt.noNewsTitle" defaultMessage="No news?" />
+        </h2>
+      }
+      body={
+        <p>
+          <FormattedMessage
+            id="newsfeed.emptyPrompt.noNewsText"
+            defaultMessage="If your Kibana instance doesn’t have internet access, ask your administrator to disable this feature. Otherwise, we’ll keep trying to fetch the news."
+          />
+        </p>
+      }
+    />
+  );
+};