This repo contains the code for Dataiku plugin to run a Answers App. The code is based on python for backend and Vue3 for the frontend.

• Answers
  • Table of content
  • Development:
    • Frontend
    • Backend
  • Web app UI customization
  • Testing
    • E2E testing
      • Playwright
      • Visual comparison screenshots:
      • Run tests in TEST INTEGRATION INSTANCE
    • Api tests documentation
  • Deployment

The web application is built on Node.js and utilizes the Quasar framework.

• First, go to resource/frontend: cd resource/frontend
• Then, install the dependencies: yarn install
• Finally, run the local server: yarn run dev

The backend is powered by Flask.

• First, create your virtual environment: python3 -m venv .your_venv_name
• Second, activate your virtual environment: source .your_venv_name/bin/activate
• Third, install the required packages: pip3 install -r code-env/python/spec/requirements.dev.txt And install dataiku-internal-client from your preferred location:
  • pip install https://design.solutions.dataiku-dss.io/public/packages/dataiku-internal-client.tar.gz
  • Or pip install http://localhost:11200/public/packages/dataiku-internal-client.tar.gz
• Finally, run your local Flask server: python3 python-lib/wsgi.py

Once your changes are ready to be integrated, run all static checks and tests locally before creating a PR:

• Run Linting and static checks npm run static-checks
• Run FE tests npm run fe-tests
• Run BE tests npm run be-tests
• Or simply run one to run all the above and push if successful: npm run push

You can rebrand the webapp by applying custom style without changing the webapp code. It is essential that Enable custom rebranding is enabled in the webapp settings.

• Navigate to ᎒᎒᎒ > Global Shared Code > Static Web Resources, create answers folder with a folder with the project key of your project. The file structure should be

  answers
  └── YOUR_PROJECT_KEY
      ├── custom.css
      ├── fonts
      │   └── fonts.css
      └── images
          ├── answer-icon.png
          └── logo.png
  

• For css changes, add a custom.css file inside the answers folder, you can find an example below:

  :root {
      --brand: #031e3a !important;
      --bg-examples-brand: rgba(3, 30, 58, 0.05) !important;
      --bg-examples-brand-hover: rgba(3, 30, 58, 0.07) !important;
      --bg-examples-borders: rgba(3, 30, 58, 0.05) !important;
      --examples-question-marks: #031e3a !important;
      --examples-text: black !important;
      --text-brand: #444 !important;
  }
  .logo-container .logo-img {
      height: 70%;
      width: 70%;
  }

• To customize fonts:

  • First, create fonts folder inside answers
  • Second, add fonts.css and define your font like below depending on the format you can provide:

  @font-face {
      font-family: "YourFontName";
      src: url(data:application/octet-stream;base64,your_font_base64);
  }
  @font-face {
      font-family: "YourFontName";
      src: url("yourFontPublicUrl") format("yourFontFormat");
  }

  • Finally, add this part to the custom.css file:

  body,
  div {
      font-family: "YourFontName" !important;
  }

• To customize images, create images folder where you can import a logo file to change the logo image inside the landing page, and an icon file to change the icon of the AI answer. Ensure that that Enable custom rebranding is enabled in the webapp settings and that the correct file names are provided.

Make sure to add .env file in the root of the repo. The file needs to contain this values:

STAGING=1
E2E_USER_NAME=<TEST_INTEGRATION_USERNAME>
E2E_PASSWORD=<TEST_INTEGRATION_PWD>
E2E_AUTH_URL= "<TEST_INTEGRATION_URL>/webapps/<TST_PROJECT_ID>/<TST_PUBLIC_WEBAPP_ID>/new"
E2E_LOGIN_URL= "<TEST_INTEGRATION_URL>/public-webapps/<TST_PROJECT_ID>/<TST_PUBLIC_WEBAPP_ID>/new"

E2E_LOCAL_AUTH_URL="<YOUR_LOCALHOST>/webapps/<YOUR_PROJECT_ID>/<YOUR_PUBLIC_WEBAPP_ID>/new"
E2E_LOCAL_LOGIN_URL="<YOUR_LOCALHOST>/webapps/<YOUR_PROJECT_ID>/<YOUR_PUBLIC_WEBAPP_ID>/new"
E2E_LOCAL_USER_NAME="<LOCALHOST_USERNAME>"
E2E_LOCAL_PASSWORD="<LOCALHOST_PWD>"

<!-- This part is only needed for running the script to update the plugin version in test instance using Playwright -->
E2E_TEST_INSTANCE="<TEST_INTEGRATION_URL>"
E2E_ADMIN_USER="<TEST_INTEGRATION_ADMIN_USER>"
E2E_ADMIN_PASSWORD="<TEST_INTEGRATION_ADMIN_PWD>"

Use STAGING=1 to test in TEST INTEGRATION INSTANCE, or STAGING=0 if you want to test locally

Check out best practices here for writing tests using Playwright.

• Installation

  • Run npm install playwright
  • You can also install Playwright VS Code extension

• To run all tests here are different ways:

  • Using command line: npx playwright test
  • CLI in UI Mode: npx playwright test --ui
  • Through Visual Code Studio's Testing Window using the VS Code extension.

• To run one test file: npx playwright test test_file_path

• To run tests on a certain browser webkit for example: npx playwright test --project=webkit

• To view report: npx playwright show-report

Some tests compare screenshots. If any changes were introduced that change the UI, please make sure to update the screenshots:

• For one file, you can run the command:

npx playwright test test_path --update-snapshots

• For all files, you can run:

npx playwright test --update-snapshots

• On CI, you need to manually trigger the workflow update-playwright-screenshots and then get the screenshots from the report and add them to the repo.

You can run the tests in TEST INTEGRATION INSTANCE during the development process to make sure, your tests will be successful in CI/CD pipeline. To do so, you can follow these steps:

• Add in your .env file if it doesn't have it:

STAGING=1
E2E_TEST_INSTANCE="<TEST_INTEGRATION_URL>"
E2E_ADMIN_USER="<TEST_INTEGRATION_ADMIN_USER>"
E2E_ADMIN_PASSWORD="<TEST_INTEGRATION_ADMIN_PWD>"

• Run make dev to build plugin version with your current local changes
• Remove the .skip tag from update-plugin-version.spec.ts and update the zip file path with your last created zip file path.
• Run the playwright test update-plugin-version.spec.ts in one of the browsers. Do not need to run it in different browsers.
• Put back the .skip tag in update-plugin-version.spec.ts
• Run your tests

See this readme

• First make sure all tests and checks are successful.
• Update and get documentation reviewed if needed. To do so, you can find the documentation inside documentation/answers-documentation.md.
• Merge your documentation changes.
• Update release notes and then extract as pdf the one related to the version to be released as release-notes-x.x.x.pdf by replacing x.x.x by your version number.
• Run make plugin plugin_version=<x.x.x> to create a new package. You can add the option add_tag to add git tag after build and merge on the branch. You can add the option branch=your_targeted_branch to target other branch than the current one for the git updates related to deployment.
• Deploy the zip + release-notes-x.x.x.pdf to the AWS server.
• Check it is available here
• Share the news on the slack channel feat-dataiku-answers