ucc_ui_lib: migrate to splunk-ui template structure and ci

splunk_add_on_ucc_framework/ucc_ui_lib/.babelrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ['@splunk/babel-preset'],
+};

splunk_add_on_ucc_framework/ucc_ui_lib/.editorconfig

@@ -0,0 +1,23 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 4
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2

splunk_add_on_ucc_framework/ucc_ui_lib/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    extends: '@splunk/eslint-config/browser-prettier',
+};

splunk_add_on_ucc_framework/ucc_ui_lib/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+.idea/
+node_modules
+npm-debug.log
+test-reports
+coverage_report
+yarn-error.log
+licenses.json
+functional-temp
+splunktional-temp
+stage/

splunk_add_on_ucc_framework/ucc_ui_lib/.npmignore

@@ -0,0 +1,37 @@
+# Source code
+/src/
+/test/
+/demo/
+
+# Tools
+/.babelrc*
+.eslintrc.*
+.eslintignore
+/stylelint.config.js
+.stylelintignore
+/webpack.config.js
+
+# Testing
+/coverage_report/
+/functional.settings.js
+/functional.*.conf.js
+/functional-temp
+/splunktional.settings.js
+/splunktional.*.conf.js
+/splunktional-temp
+/test-reports/
+/karma.conf.js
+/jest.config.js
+/webpack.test.config.js
+/*hooks.js
+/test-app
+
+# Misc
+/docs.manifest.json
+/docs
+/docs.gen*
+/.npmignore
+npm-debug.log
+yarn-error.log
+/licenses.json
+/*.tgz

splunk_add_on_ucc_framework/ucc_ui_lib/.prettierrc

@@ -0,0 +1,7 @@
+printWidth: 100
+singleQuote: true
+tabWidth: 4
+overrides:
+  - files: "*.json"
+    options:
+      tabWidth: 2

splunk_add_on_ucc_framework/ucc_ui_lib/README.md

@@ -0,0 +1,29 @@
+# Contributing to UCC UI Lib
+
+## Overview
+
+The project contains UI framework that renders UI components dynamically based on provided `globalConfig.json`.
+
+
+## Getting Started
+
+1. Clone the repo.
+2. Install yarn (>= 1.2) if you haven't already: `npm install --global yarn`.
+3. Run the setup task: `yarn run setup`.
+
+After this step, the following tasks will be available:
+
+* `start` – Run the `start` task
+* `build` – Create a production bundle
+* `test` – Run unit tests
+* `lint` – Run JS and CSS linters
+* `format` – Run prettier to auto-format `*.js`, `*.jsx` and `*.css` files. This command will overwrite files without 
+asking, `format:verify` won't.
+
+Running `yarn run setup` once is required to enable all other tasks. The command might take a few minutes to finish.
+
+
+## Code Formatting
+
+UCC UI Lib uses [prettier](https://github.com/prettier/prettier) to ensure consistent code formatting. It is recommended
+ to [add a prettier plugin to your editor/ide](https://github.com/prettier/prettier#editor-integration).

splunk_add_on_ucc_framework/ucc_ui_lib/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    testMatch: ['**/*.unit.[jt]s?(x)'],
+};

splunk_add_on_ucc_framework/ucc_ui_lib/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@splunk/ucc_ui_lib",
+  "version": "0.0.1",
+  "license": "UNLICENSED",
+  "private": true,
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack --bail",
+    "format": "git ls-files | grep -E \"\\.(jsx?|css)$\" | xargs prettier --write",
+    "format:verify": "git ls-files | grep -E \"\\.(jsx?|css)$\" | xargs prettier --list-different",
+    "eslint": "eslint src --ext \".js,.jsx\"",
+    "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml",
+    "eslint:fix": "eslint src --ext \".js, .jsx\" --fix",
+    "link:app": "ln -s $PWD/stage $SPLUNK_HOME/etc/apps/my-splunk-app",
+    "lint": "yarn run eslint && yarn run stylelint",
+    "lint:ci": "yarn run eslint:ci && yarn run stylelint",
+    "start": "webpack --watch",
+    "setup": "yarn && yarn run build",
+    "stylelint": "stylelint \"src/**/*.{js,jsx}\" --config stylelint.config.js",
+    "test": "jest",
+    "test:ci": "cross-env JEST_JUNIT_OUTPUT_DIR=./test-reports JEST_JUNIT_OUTPUT_NAME=unit-results.xml JEST_JUNIT_CLASSNAME=unit yarn run test --ci --reporters=default jest-junit --coverage --coverageDirectory=coverage_report/coverage_maps_unit --coverageReporters=json",
+    "test:watch": "jest --watch"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.2.0",
+    "@splunk/babel-preset": "^3.0.0",
+    "@splunk/eslint-config": "^4.0.0",
+    "@splunk/react-page": "^5.0.0",
+    "@splunk/react-ui": "^4.0.0",
+    "@splunk/splunk-utils": "^2.0.0",
+    "@splunk/stylelint-config": "^4.0.0",
+    "@splunk/themes": "^0.7.0",
+    "@splunk/webpack-configs": "^5.0.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.0.4",
+    "chai": "^3.5.0",
+    "copy-webpack-plugin": "^4.5.2",
+    "cross-env": "^7.0.3",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^7.14.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-import-resolver-webpack": "^0.13.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "jest": "^25.1.0",
+    "jest-junit": "^10.0.0",
+    "prettier": "^2.0.5",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "styled-components": "^5.1.1",
+    "stylelint": "^13.0.0",
+    "webpack": "^4.16.2",
+    "webpack-cli": "^3.1.0",
+    "webpack-merge": "^4.1.3"
+  },
+  "engines": {
+    "node": ">=6"
+  }
+}

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/appserver/templates/base.html

@@ -0,0 +1,31 @@
+<%!
+app_name = cherrypy.request.path_info.split('/')[3]
+
+%>\
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>${_('Loading...')}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+</head>
+
+<body>
+    <script src="${make_url('/config?autoload=1')}" crossorigin="use-credentials"></script>
+    <script src="${make_url('/static/js/i18n.js')}"></script>
+    <script src="${make_url('/i18ncatalog?autoload=1')}"></script>
+    <script>
+        __splunkd_partials__ = ${json_decode(splunkd)};
+    </script>
+
+    <%
+    page_path = "/static/app/" + app_name + "/pages/" + page + ".js"
+    %>
+
+    <script src="${make_url(page_path)}"></script>
+</body>
+
+</html>

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/app.conf

@@ -0,0 +1,25 @@
+######################################################
+#
+# ${package.name}
+#
+# ${copyright}
+#
+######################################################
+
+[install]
+is_configured = true
+state = enabled
+build = ${version.build}
+
+[launcher]
+author = Splunk Inc.
+version = ${version.major}.${version.minor}.${version.revision}
+description = ${friendly.name}
+
+[ui]
+is_visible = true
+label = ${friendly.name}
+docs_section_override=AddOns:released
+
+[package]
+id = ${package.name}

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/nav/default.xml

@@ -0,0 +1,5 @@
+<nav>
+    <view name="inputs" />
+    <view name="configuration" default="true"/>
+    <view name="search" />
+</nav>

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/configuration.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<view template="${package.name}:/templates/base.html" type="html" isDashboard="False">
+	<label>Configuration</label>
+</view>

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/resources/splunk/default/data/ui/views/inputs.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<view template="${package.name}:/templates/base.html" type="html" isDashboard="False">
+	<label>Inputs</label>
+</view>

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TestComponent.jsx

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@splunk/react-ui/Button';
+import { StyledContainer, StyledGreeting } from './TestComponentStyles';
+
+class TestComponent extends Component {
+    static propTypes = {
+        name: PropTypes.string,
+    };
+
+    static defaultProps = {
+        name: 'User',
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = { counter: 0 };
+    }
+
+    render() {
+        const { name } = this.props;
+        const { counter } = this.state;
+
+        const message =
+            counter === 0
+                ? 'You should try clicking the button.'
+                : `You've clicked the button ${counter} time${counter > 1 ? 's' : ''}.`;
+        // const requireFunc = typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
+        function requireDynamically(path) {
+            return eval(`require`); // Ensure Webpack does not analyze the require statement
+        }
+        requireDynamically(['custom/' + module], (CustomRow) => {
+            this.CustomRow = CustomRow;
+        });
+
+        return (
+            <StyledContainer>
+                <StyledGreeting>Hello, {name}!</StyledGreeting>
+                <div>{message}</div>
+                <Button
+                    label="Click here"
+                    appearance="primary"
+                    onClick={() => {
+                        this.setState({ counter: counter + 1 });
+                    }}
+                />
+            </StyledContainer>
+        );
+    }
+}
+
+export default TestComponent;

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/TestComponentStyles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { variables, mixins } from '@splunk/themes';
+
+const StyledContainer = styled.div`
+    ${mixins.reset('inline-block')};
+    font-size: ${variables.fontSizeLarge};
+    line-height: 200%;
+    margin: ${variables.spacing} ${variables.spacingHalf};
+    padding: ${variables.spacing} calc(${variables.spacing} * 2);
+    border-radius: ${variables.borderRadius};
+    box-shadow: ${variables.overlayShadow};
+    background-color: ${variables.backgroundColor};
+`;
+
+const StyledGreeting = styled.div`
+    font-weight: bold;
+    color: ${variables.brandColor};
+    font-size: ${variables.fontSizeXXLarge};
+`;
+
+export { StyledContainer, StyledGreeting };

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/tests/TestComponent.unit.jsx

@@ -0,0 +1,33 @@
+/* eslint-env jest */
+
+import React from 'react';
+import { assert } from 'chai';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeAdapterReact16 from 'enzyme-adapter-react-16';
+import TestComponent from '../TestComponent';
+
+// This sets up the enzyme adapter
+const adapter = new EnzymeAdapterReact16();
+Enzyme.configure({ adapter });
+
+describe('TestComponent', () => {
+    it('renders with default name', () => {
+        const wrapper = mount(<TestComponent />);
+        assert.include(wrapper.text(), 'Hello, User!');
+        wrapper.unmount();
+    });
+
+    it('renders with custom name', () => {
+        const wrapper = mount(<TestComponent name="World" />);
+        assert.include(wrapper.text(), 'Hello, World!');
+        wrapper.unmount();
+    });
+
+    it('increases the counter when button is clicked', () => {
+        const wrapper = mount(<TestComponent name="World" />);
+        assert.equal(wrapper.state('counter'), 0);
+        wrapper.find('button').simulate('click');
+        assert.equal(wrapper.state('counter'), 1);
+        wrapper.unmount();
+    });
+});

splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/configuration/StartStyles.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { variables, mixins } from '@splunk/themes';
+
+const StyledContainer = styled.div`
+    ${mixins.reset('inline')};
+    display: block;
+    font-size: ${variables.fontSizeLarge};
+    line-height: 200%;
+    margin: calc(${variables.spacing} * 2) calc(${variables.spacing} * 2);
+`;
+
+const StyledGreeting = styled.div`
+    font-weight: bold;
+    color: ${variables.infoColor};
+    font-size: ${variables.fontSizeXXLarge};
+`;
+
+export { StyledContainer, StyledGreeting };