dynatrace-oss / barista Goto Github PK

This tool is amazing and definitely a big timesaver - we want to keep this so we need to change up a few things for github

https://github.com/angular/components/blob/master/tools/cherry-pick-patch/cherry-pick-patch.ts

Feature proposal:
#444

Check start-up time (first render) in prod (aot) mode.
Check if pre-rendering on the server is needed and can improve startup performance

Make a setup to be able to build both Barista versions, internal and external. Use e.g. environment files to be able to also check within the content if parts of the content should be rendered or not. (ngIf="environment.internal").

Since we upgraded to angular version 8.2.12, I tried to build app with enabled Ivy to see how much needs to be done.

I found it tries to compile Angular Components modules and breaks on dt-legend with message:

ERROR in Cannot combine @Input decorators with query decorators

Googling it a bit and it looks we cannot use @Input() and @ContentChild() on one class field at once. I found in codebase following place where it should be fixed:
legend-item.ts#56-58

Fixing this issue would help us further investigation on Ivy upgrade.

Check whether we can omit a css class on the table if the table is in the content area of the page.
Style table in content correctly

Current filter is removed, when deleting another filter in the edit mode (See screencast)

filterFieldRemoveFilter.mp4.zip

We already have a layout for overview pages, but still have to automatically create the JSON source for those pages. The output should be as shown in the code snipped below.

{
  "title": "Components",
  "id": "components",
  "layout": "overview",
  "description": "Read all about development with/of our Angular components in how to get started. If you run into any troubles, please join us in our Slack channel #help-ng-components.",
  "sections": [
    {
      "title": "Documentation",
      "items": [
        {
          "identifier": "Ge",
          "title": "Get started",
          "category": "Documentation",
          "badge": "favorite",
          "link": "/components/icon",
          "description": "This guide provides an overview how to get started with the Dynatrace Angular components library."
        },
        {
          "identifier": "Ho",
          "title": "How to contribute",
          "category": "Documentation",
          "badge": "deprecated",
          "link": "/components/icon",
          "description": "Find all the information about contributing to the Angular components library summarized on this page."
        },
        {
          "identifier": "De",
          "title": "Development",
          "category": "Documentation",
          "link": "/components/icon",
          "badge": "workinprogress",
          "description": "All useful commands to develop Angular components features are collected on this page."
        },
        {
          "identifier": "Co",
          "title": "Coding standards",
          "category": "Documentation",
          "link": "/components/icon",
          "badge": "experimental",
          "description": "To ensure good code quality we provide some coding standards that should be kept in mind when developing Angular components."
        },
        {
          "identifier": "Be",
          "title": "Best practices and patterns",
          "category": "Documentation",
          "link": "/components/icon"
        }
      ]
    },
    {
      "title": "Components",
      "items": [
        {
          "identifier": "Ge",
          "title": "Get started",
          "category": "Documentation",
          "badge": "favorite",
          "link": "/components/icon",
          "description": "This guide provides an overview how to get started with the Dynatrace Angular components library."
        },
        {
          "identifier": "Ho",
          "title": "How to contribute",
          "category": "Documentation",
          "link": "/components/icon",
          "description": "Find all the information about contributing to the Angular components library summarized on this page."
        },
        {
          "identifier": "Ho",
          "title": "How to contribute",
          "category": "Documentation",
          "link": "/components/icon",
          "description": "Find all the information about contributing to the Angular components library summarized on this page."
        },
        {
          "identifier": "De",
          "title": "Development",
          "category": "Documentation",
          "link": "/components/icon",
          "description": "All useful commands to develop Angular components features are collected on this page."
        },
        {
          "identifier": "Co",
          "title": "Coding standards",
          "category": "Documentation",
          "link": "/components/icon",
          "description": "To ensure good code quality we provide some coding standards that should be kept in mind when developing Angular components."
        },
        {
          "identifier": "Ho",
          "title": "How to contribute",
          "category": "Documentation",
          "link": "/components/icon",
          "description": "Find all the information about contributing to the Angular components library summarized on this page."
        }
      ]
    }
  ]
}

Currently, we are using the @politie/angular-testcafe-builder but we need some extra flags. like a base URL. Testcafe does not have this behaviour so we should add it.

DevExpress/testcafe#1932

Or to provide a config file

Check out https://github.com/angular/components for inspiration

Make sure that the DtTabNavigationAdapter does not strip away existing queryParams when creating the url tree

_updateRouterFragment

Add disabled input to filter-field. The whole field should be greyed out when set.

Create service for recently ordered pages. To fill the recently ordered pages section on Barista's homepage with items, create a service that gets and sets the information in local storage.

Since this tool is not really extensible with the things we want we should remove it

Checkout the https://github.com/angular/components repo for the script to add/check the google license header.
We need a similar header for our apache 2 dynatrace license

• Remove gradle, jenkinsfile, remove .npmrc using BFE

java -jar bfg.jar --delete-files Jenkinsfile, gradle, .npmrc --replace-text banned.txt angular-components.git

• Remove templates folder in tools
• Cleanup branches
• Squash until 1.0.0
• Rewrite git history
• Adjust owners file
• delete yarn.lock
• use npm

Currently the max-width is set for the columns in the key value list. I think it would be best that the key value list columns span the entire width - if limiting the width makes sense - the developer can do so by adjusting the parents width.

Docs need to be adjusted for external contributors as they need to work with forks and should not open branches directly on this repo

Each page needs information what to show in the sidebar. Create this during the content generation (page building --> see Barista tools) and store sidenav items to BaBaristaPage (i.e. json files that define a page).

Sync with Kammerlander, Nina – she knows how the JSON structure should look like.

Adjust release script to github urls so we can release after switching to github as well

Create a custom script/schematic that let reorganize our workspace to an nx workspace structure.

Proposed Structure

- apps
	- barista
	- barista-examples
	- dev
	- a11y
	- e2e
	- universal
- components
	- alert
		- src/{index.ts, ...}
		› jest.config.js
		› package.json
		› README.md
		› tsconfig.json
		› tsconfig.lib.json
		› tsconfig.spec.json
		› tslint.json
	- autocomplete
	- core
	- ...
- tools
	- release
	- schematics
	- linting
- libs
	... other libraries
- experimental
	- filter-friedl
	...
› tsconfig.json
› tslint.json
› nx.json
› angular.json
› jest.config.js
...

• Move files
• Use Stylelint for each library https://github.com/alan-agius4/speedy-build-angular
• Linting Task for each library

Investigate switch to css grid for the table.
This fixes some workarounds and issues that were especially painful for barcelona teams.

Since some of the code is copied or are substantial copies of the code used from MIT licensed 3rd party repositories we have to add the license information

Create the apache 2 license file in the root of the project and also check for the link to the license in the footer of barista. We should remove the custom license we currently have internally

Needs #40 first to be resolved.

After Nx is implemented use the git diff to lint only affected files.

We have a couple of internal links and description to internal resources that we need to clean up before we release this to the public.

Update the 'How to contribute' page and think about the contribution section on the index page.

Add rule for

• dtBanInnerHtmlRule
• double host ban rule

Add functionality to set the Output unit. Example outputUnit is min so format input to min only.
Add less than functionality additionally to the outputUnit.

Needs #40 to be resolved first.

After Nx is implemented use nx affected with the dependency tree to run only unit tests that are affecting the part of the tree

Description
Currently, we have a dependency to lodash but we are not exposing it as peer dependency in case that angular ships lodash.
Lodash is not tree-shakeable so we are always forcing the consumer to ship the whole lodash. That is the reason why we should change to a tree-shakeable version of lodash – lodash-es.

Expected behaviour 🌈
Using all lodash methods like before only from the tree-shakeable version.

Additional context

When using lodash-es it will work with the library but not with our unit tests that are written in jest. In case that jest cannot scope with es-modules.

We need the following steps for the CI build:

• lint (parallelize linting different apps / libs)
• build library
• test
• e2e
• a11y
• aot barista-examples
• test-linting rules
• universal

Generate json output for the component's overview page

Finalize the linting setup for Barista:

• make our custom tslint rules (angular components usage lint-rules) work for the barista-subproject

Rework how custom schematics are built, move from post install, use builder / node script, ...

We need to remove all non public npm packages
everything that is @Dynatrace and not part of the public npm repository

• Generate metadata for page-builder
• Inject sources into live-example tags in page-builder
• Instantiate and run demo in live-example
• Display sources in live-example
• Style and build basic live-example
• Add scss, issue #285 PR: #484
• Add copy to clipboard (for ts, html and scss) PR: #366
• Add show-more functionality for long examples PR: #366
• Add syntax highlighting for ts, html and scss PR: #366

Percy seems to be good choice for visual testing. https://percy.io/

Check with open source team whether we can add pullpanda to our organisation

Add test-cafe reporter to have an overview about the a11y and e2e tests

Create an issue template for bugs and for features
check out https://github.com/angular/components for inspiration

Also add PR Template
#10

Currently we are using gulp tasks to generate the json files - use node scripts instead, leveraging the builder API from the angular CLI

The header items in a sorted list are not in one line on Safari.

To avoid dependency hell like we recently had we should evaluate greenkeeper for this repository

When the empty state is shown for the first time the layout is not aligned properly on large devices.

Only on the first resize, it is layouted correctly

We want to have an app that has all modules already imported for easy reproduction of issues
Add this to the issue template for bugs 😄

Integrate sonarcloud checks into CI pipeline using github actions

We need a search for Barista. Make a plan:

• how to generate the search index?
• how to implement the search?
• how to implement the search input field in the nav?
• how to implement the search page?

Checkout https://barista.dynatrace.com/components/filter-field/#multiselection-of-filter-values