@betterview/integration-toolkit 0.1.0

package/component-harness-server/src/styles/fonts.styl

@@ -0,0 +1,208 @@
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-black-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-black-webfont.woff') format('woff')
+  font-weight: 900
+  font-style: normal
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-blackitalic-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-blackitalic-webfont.woff') format('woff')
+  font-weight: 900
+  font-style: italic
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-bold-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-bold-webfont.woff') format('woff')
+  font-weight: 700
+  font-style: normal
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-bolditalic-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-bolditalic-webfont.woff') format('woff')
+  font-weight: 700
+  font-style: italic
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-book-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-book-webfont.woff') format('woff')
+  font-weight: 300
+  font-style: normal
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-bookitalic-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-bookitalic-webfont.woff') format('woff')
+  font-weight: 300
+  font-style: italic
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-extrabold-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-extrabold-webfont.woff') format('woff')
+  font-weight: 800
+  font-style: normal
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-extrabolditalic-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-extrabolditalic-webfont.woff') format('woff')
+  font-weight: 800
+  font-style: italic
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-light-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-light-webfont.woff') format('woff')
+  font-weight: 200
+  font-style: normal
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-lightitalic-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-lightitalic-webfont.woff') format('woff')
+  font-weight: 200
+  font-style: italic
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-medium-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-medium-webfont.woff') format('woff')
+  font-weight: 500
+  font-style: normal
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-mediumitalic-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-mediumitalic-webfont.woff') format('woff')
+  font-weight: 500
+  font-style: italic
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-regular-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-regular-webfont.woff') format('woff')
+  font-weight: 400
+  font-style: normal
+
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-regularitalic-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-regularitalic-webfont.woff') format('woff')
+  font-weight: 400
+  font-style: italic
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-semibold-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-semibold-webfont.woff') format('woff')
+  font-weight: 600
+  font-style: normal
+
+@font-face
+  font-family: 'Biotif'
+  src: url('../fonts/biotif-semibolditalic-webfont.woff2') format('woff2'),
+       url('../fonts/biotif-semibolditalic-webfont.woff') format('woff')
+  font-weight: 600
+  font-style: italic
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-black.otf') format('opentype')
+  font-weight: 900
+  font-style: normal
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-blackitalic.otf') format('opentype')
+  font-weight: 900
+  font-style: italic
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-bold.otf') format('opentype')
+  font-weight: 800
+  font-style: normal
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-bolditalic.otf') format('opentype')
+  font-weight: 800
+  font-style: italic
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-book.otf') format('opentype')
+  font-weight: 700
+  font-style: normal
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-bookitalic.otf') format('opentype')
+  font-weight: 700
+  font-style: italic
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-extralight.otf') format('opentype')
+  font-weight: 500
+  font-style: normal
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-extralightitalic.otf') format('opentype')
+  font-weight: 500
+  font-style: italic
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-light.otf') format('opentype')
+  font-weight: 400
+  font-style: normal
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-lightitalic.otf') format('opentype')
+  font-weight: 400
+  font-style: italic
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-medium.otf') format('opentype')
+  font-weight: 300
+  font-style: normal
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-mediumitalic.otf') format('opentype')
+  font-weight: 300
+  font-style: italic
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-regular.otf') format('opentype')
+  font-weight: 200
+  font-style: normal
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-regularitalic.otf') format('opentype')
+  font-weight: 200
+  font-style: italic
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-thin.otf') format('opentype')
+  font-weight: 100
+  font-style: normal
+
+@font-face
+  font-family: 'Pensum Pro'
+  src: url('../fonts/pensumpro-thinitalic.otf') format('opentype')
+  font-weight: 100
+  font-style: italic

package/component-harness-server/src/styles/mixins.styl

@@ -0,0 +1,23 @@
+disableSelect()
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -khtml-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
+visibleScrollbar()
+  &::-webkit-scrollbar
+    -webkit-appearance: none
+    width: 7px
+    
+  &::-webkit-scrollbar-thumb
+    border-radius: 4px
+    background-color: rgba(0, 0, 0, .5)
+    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5)
+
+fillAvailableSpace()
+  width: 100%
+  width: -moz-available          /* WebKit-based browsers will ignore this. */
+  width: -webkit-fill-available  /* Mozilla-based browsers will ignore this. */
+  width: fill-available

package/component-harness-server/src/styles/reset.styl

@@ -0,0 +1,28 @@
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section
+  display: block
+
+body
+  line-height: 1
+
+ol, ul
+  list-style: none
+
+blockquote, q
+  quotes: none
+
+blockquote:before, blockquote:after,
+q:before, q:after
+  content: ''
+  content: none
+
+table
+  border-collapse: collapse
+  border-spacing: 0
+
+button:focus
+  outline: 0
+
+ins, del
+  text-decoration: none

package/component-harness-server/src/styles/vars.styl

@@ -0,0 +1,77 @@
+// colors
+$betterviewBlue = rgba(0, 144, 218, 1) // #0090DA
+$blueHoverState = rgba(0, 144, 218, 0.08)
+$blueLightHoverState = rgba(0, 144, 218, 0.04)
+$betterviewRed =  rgb(255, 10, 57)
+$betterviewGreen =  rgb(0, 220, 79)
+$betterviewOrange = rgb(255, 145, 0)
+$betterviewYellow = rgb(255, 235, 59)
+//this is the same as charcoal, but since we refer to it so much i think its worth calling it a betterview color.
+$betterviewBlack = rgb(37,40,42)
+
+$navy = #1c2851
+$black = #23272b
+$charcoal = rgb(37,40,42)
+$blue = rgba(0, 144, 218, 1)
+$borderColor = #eff0ed
+$gray = #c6c8c5
+$grayText = rgba(37, 40, 42, 0.6)
+$grayUnderline = #B0B8BF
+$green = rgb(0, 220, 79) // #00DC4F
+$inputHighlightColor = #f8fbff
+$inputSelectionColor = #fdfad8
+$inputLabelColor = rgba(37, 40, 42, 1)
+$inputPlaceholderColor = rgba(37, 40, 42, 0.3)
+$inputGroupBorderColor = rgba(37, 40, 42, 0.2)
+$lightBlue = #5bceff
+$lightGray = #eeefee
+$orange = #ff8200
+$red = rgb(255, 10, 57) // #FF0A39
+$redError = #e04e39
+$searchColor = #fff
+$secondaryBorderColor = #447d95
+$sidebarBorderColor = #4A4A4A
+$trueblack = #000
+$white = #fff
+$yellow = #fdd835
+
+// colors based on others
+$disabledText = rgba($black, .6)
+$placeholderText = lighten($black, 40%)
+
+// fonts
+$primaryFont = Biotif, -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif
+$primaryBoldFont = Biotif-Bold, -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif
+$primaryBookFont = Biotif-Book, -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif
+$secondaryFont = Biotif, 'Montserrat', sans-serif
+$mediumFont = Biotif, -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif
+$lightFont = Biotif, -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif
+
+$subtextFont = Pensum, -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif
+$subtextFontPro = Pensum Pro, -apple-system, BlinkMacSystemFont, 'Open Sans', sans-serif
+
+// global light direction
+$lightOffsetX = 0
+$lightOffsetY = .2rem
+
+// z-index
+$layer0 = 0
+$layer1 = 1000
+$layer2 = 2000
+$layer3 = 3000
+$layer4 = 4000
+$layer5 = 5000
+$layer6 = 6000
+$layer7 = 7000
+$layer8 = 8000
+$layer9 = 9000
+
+//global heights      
+$primaryNavbarHeight = 6.4rem
+$propertyProfileTopBarHeight = 11.4rem
+
+$xs = 0px
+$sm = 600px
+$md = 960px
+$lg = 1280px
+$xl = 1920px

package/component-harness-server/src/styles.styl

@@ -0,0 +1,29 @@
+
+@import './styles/betterview.styl'
+
+body 
+  background-color: rgba(230, 230, 230, 1)
+
+.root
+  margin-left: auto
+  margin-right: auto
+  width: 497px
+  background-color: white
+  margin-top: 40px
+  padding: 30px
+  
+
+.contentWrapper
+  margin-top: 20px
+
+.componentContainer
+  margin-top: 20px 
+  margin-left: auto
+  margin-right: auto
+  padding-bottom: 500px;
+
+.showBorder
+  border: solid 1px rgba(125, 125, 125, 1)
+
+.hideBorder
+  border: solid 1px  rgba(125, 125, 125, 0)

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@betterview/integration-toolkit",
+  "version": "0.1.0",
+  "description": "Supports integration packages.  This should be the only import from our integrations",
+  "scripts": {
+    "build": "rm -rf lib && npm run lint && tsc -p tsconfig.build.json",
+    "lint": "eslint . --ext .ts,.js",
+    "lint:fix": "npm run lint -- --fix",
+    "test": "jest --runInBand",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --forceExit --detectOpenHandles --verbose",
+    "test:debug:watch": "node --inspect-brk node_modules/.bin/jest --watch --forceExit --detectOpenHandles --verbose",
+    "test:coverage": "npm test -- --collectCoverage && open ./coverage/lcov-report/index.html",
+    "test:watch": "jest --watch --detectOpenHandles"
+  },
+  "author": "",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "async": "^2.6.3",
+    "axios": "^0.21.1",
+    "classnames": "^2.3.1",
+    "css-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "json-colorizer": "^2.2.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "style-loader": "^3.2.1",
+    "stylus": "^0.54.8",
+    "stylus-loader": "^6.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
+    "@types/jest": "26.0.24",
+    "@types/webpack": "^4.41.30",
+    "@types/webpack-dev-server": "^4.0.3",
+    "@typescript-eslint/eslint-plugin": "4.26.1",
+    "@typescript-eslint/eslint-plugin-tslint": "4.26.1",
+    "@typescript-eslint/parser": "4.26.1",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "6.10.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsdoc": "30.7.13",
+    "eslint-plugin-prefer-arrow": "1.2.3",
+    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-react": "7.22.0",
+    "eslint-plugin-sonarjs": "0.6.0",
+    "html-webpack-plugin": "^5.3.2",
+    "jest": "26.6.3",
+    "ts-jest": "26.5.5",
+    "ts-node": "8.8.2",
+    "tslint": "^6.1.3",
+    "tslint-config-prettier": "1.18.0",
+    "typescript": "4.3.2",
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.0.0"
+  },
+  "engines": {
+    "node": "^10 || ^14"
+  }
+}

package/src/ComponentHarness/index.ts

@@ -0,0 +1,93 @@
+import path from 'path';
+import webpack, { Configuration as CompilerConfig } from 'webpack';
+import WebpackDevServer, { Configuration as ServerConfig } from 'webpack-dev-server';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+
+// we are attempting to get our bas /integration-toolkit directory here
+
+const basePath = path.join(__dirname, '../../');
+const enrichmentIntegrationBasePath = path.join(path.dirname(require.main!.filename), '../');
+const rootPath = path.join(basePath, '/component-harness-server/');
+const node_modules_path = path.join(basePath, '/node_modules/');
+
+const serverConfig: ServerConfig = {
+  port: 3000,
+  open: true,
+  client: {
+    progress: true
+  },
+  host: '127.0.0.1'
+};
+const compilerConfig: CompilerConfig = {
+  entry: [path.join(rootPath, '/src/index.js')],
+  mode: 'development',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  resolve: {
+    alias: {
+      main: path.resolve(node_modules_path),
+      components: path.resolve(enrichmentIntegrationBasePath, 'enrichmentComponent')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.?js$/,
+        exclude: /node_modules/,
+        include: [path.join(rootPath, '/src'), path.join(enrichmentIntegrationBasePath, 'enrichmentComponent')],
+        use: {
+          loader: path.join(node_modules_path, 'babel-loader'),
+          options: {
+            presets: [
+              path.join(node_modules_path, '@babel/preset-env'),
+              path.join(node_modules_path, '@babel/preset-react')
+            ]
+          }
+        }
+      },
+      {
+        test: /\.styl$/,
+        include: [path.join(rootPath, '/src'), path.join(enrichmentIntegrationBasePath, 'enrichmentComponent')],
+        exclude: /node_modules/,
+        parser: {
+          node: true
+        },
+        use: [
+          path.join(node_modules_path, 'style-loader'),
+          {
+            loader: path.join(node_modules_path, 'css-loader'),
+            options: {
+              importLoaders: 1,
+              modules: {
+                localIdentName: '[path]__[local]'
+              },
+              sourceMap: true
+            }
+          },
+          {
+            loader: path.join(node_modules_path, 'stylus-loader'),
+            options: {
+              stylusOptions: {
+                outputStyle: 'expanded',
+                include: [path.join(rootPath, '/src'), path.join(enrichmentIntegrationBasePath, 'enrichmentComponent')]
+              }
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(rootPath, 'index.html')
+    })
+  ]
+};
+
+export default async function ComponentServer() {
+  const compiler = webpack(compilerConfig);
+  const s = new WebpackDevServer(serverConfig, compiler);
+  s.start();
+}

package/src/Deployment/index.ts

@@ -0,0 +1,72 @@
+import { IEnrichmentIntegration } from '../Types';
+
+export type DatabaseScript = {
+  run: string;
+  rollback: string;
+};
+
+export type PartnerHubInstallScripts = {
+  install_partner: DatabaseScript;
+  install_flags: DatabaseScript;
+};
+
+export function generateDatabaseScripts(
+  integration: IEnrichmentIntegration,
+  billingProviderId: number
+): PartnerHubInstallScripts {
+  const { offering, partner } = integration.registration;
+  const intName = `${partner.toLowerCase()}_${offering.toLowerCase()}`;
+
+  const ph_create = `
+    create table if not exists ph.${intName} (
+      id bigint not null primary key default id_generator(1),
+      property_id int not null,
+      request_url text,
+      response jsonb,
+      added timestamptz not null default now()
+    );
+
+    insert into billing.provider (id, name) values (${billingProviderId}, '${partner}');
+    insert into ph.partner_offering (partner, offering, table_name, matrix_option, credentials_schema) values ('${partner}', '${offering}', '${intName}', 'include_${intName}', '{}');
+    ;
+  `;
+
+  const ph_rollback = `
+    drop table ph.${intName};
+    delete from billing.provider where id = ${billingProviderId};
+  `;
+
+  const flag_create = `
+      do $$
+      declare
+        sectionid bigint;
+        subsectionid bigint;
+      begin
+        insert into flags.options_section (display, position, color) values ('${partner}', 999, '#000000') returning id into sectionid;
+
+        insert into flags.options_subsection(options_section_id, display)
+        values (sectionid, '${partner} ${offering}')
+        returning id into subsectionid;
+
+        insert into flags.option(options_subsection_id, display, type, source, key, placeholder)
+        values (subsectionid, 'Match Value(s)', 'value', '${intName}', 'custom', 'Case-insesitive, comma separated');
+      end $$;
+    `;
+
+  const flag_rollback = `
+    delete from flags.option where source = '${intName}' and key = 'custom';
+    delete from flags.options_subsection where display = '${partner} ${offering}';
+    delete from flags.options_section where display = '${partner}' and position = 999;
+  `;
+
+  return {
+    install_partner: {
+      run: ph_create,
+      rollback: ph_rollback
+    },
+    install_flags: {
+      run: flag_create,
+      rollback: flag_rollback
+    }
+  };
+}

package/src/Network/axios-error-handling.ts

@@ -0,0 +1,76 @@
+import { AxiosError, AxiosResponse } from 'axios';
+
+export type FriendlyName =
+  | 'server error'
+  | 'no response'
+  | 'request init failure'
+  | 'auth error'
+  | 'endpoint not found';
+
+export interface SimplifiedError {
+  /** the status code number (e.g. 500) */
+  statusCode?: number;
+  data?: any;
+  /** the status code name (e.g. ETIMEDOUT) */
+  code?: string;
+  responseHeaders?: Record<string, string>;
+  /**
+   * server error: the server responded with an error
+   * no repsonse: no response was received from the server
+   * request init failure: axios failed to create the request to send
+   */
+  friendly: FriendlyName;
+}
+
+/** simplifies an axios error, exposing the properties that are commonly used and friendly name to help decision trees */
+export function simplifyError(err: AxiosError): SimplifiedError {
+  let friendly: FriendlyName = 'request init failure';
+  const statusCode = `${err.code ?? err.response?.status}`;
+  if (err.response) friendly = convertStatusCode(statusCode);
+  else if (err.request) friendly = 'no response';
+
+  return {
+    statusCode: err.response?.status,
+    data: err.response?.data,
+    code: statusCode,
+    responseHeaders: err.response?.headers,
+    friendly
+  };
+}
+
+export interface IWrapResult<T> {
+  data?: T;
+  headers?: Record<string, string>;
+  err?: SimplifiedError;
+}
+
+function convertStatusCode(code: string): FriendlyName {
+  switch (code) {
+    case '401':
+      return 'auth error';
+    case '500':
+      return 'server error';
+    case '404':
+      return 'endpoint not found';
+    default:
+      return 'no response';
+  }
+}
+
+/** wraps an axios api call, resulting in a successful promise containing either the requested data or a simplfied error */
+export async function wrap<T>(axiosApiCall: Promise<AxiosResponse<T> | AxiosError<T>>): Promise<IWrapResult<T>> {
+  const result: IWrapResult<T> = {};
+  try {
+    let r = await axiosApiCall;
+    if ((r as AxiosError).isAxiosError !== undefined) {
+      throw r;
+    }
+    r = r as AxiosResponse<T>;
+    result.headers = r.headers;
+    result.data = r.data;
+  } catch (err) {
+    const simple = simplifyError(err as AxiosError<any>);
+    result.err = simple;
+  }
+  return result;
+}

package/src/Network/index.ts

@@ -0,0 +1,14 @@
+import { IWrapResult, wrap } from './axios-error-handling';
+import axios, { AxiosRequestConfig } from 'axios';
+
+export async function get(url: string, config: AxiosRequestConfig): Promise<IWrapResult<Record<string, any>>> {
+  return wrap(axios.get<Record<string, any>>(url, config));
+}
+
+export async function post(
+  url: string,
+  data: any,
+  config: AxiosRequestConfig
+): Promise<IWrapResult<Record<string, any>>> {
+  return wrap(axios.post<Record<string, any>>(url, data, config));
+}