Update jupyter-apis common Folder frontend to KF1.7

[wg102]

.
StatCan/aaw#1632
The investigation was done in: #217

For updating our common frontend folder to match upstream while making sure to keep any custom code we might potentially have added

We would also need to update all the common jupyter files found under here. This would be excluding everything found under /cypress, /i18n and /src/app/pages as those will be handled in other issues.

The following is the list of all the files to check up. Most of them will have no changes, but there are at least 12 new components.

• .editorconfig
• .eslintrc.json : New file
• .gitignore
• angular.json
• package-lock.json : Will need to update later again, once code works
• package.json
• README.md
• tsconfig.json : Why es2018 AND es2019 (in upstream code too)

FOLDERS
scripts

• check-format-error.js : new file entirely

projects/kubeflow:

• .eslintrc.json : New File
• .prettierrc
• karma.conf.js : New part about files and proxies.
• ng-package.json
• package-lock.json : Their version is older??
• package.json
• README.md
• tsconfig.lib.json
• tsconfig.lib.prod.json
• tsconfig.spec.json

projects/kubeflow/src:

• kubeflow.css
• public-api.ts
• styles.scss
• test.ts

projects/kubeflow/src/assets:

• browse-in-rok-blue.svg
• browse-in-rok-gray.svg
• browse-in-rok-grey.svg

projects/kubeflow/src/assets/fonts:

• roboto-cyrillic-normal300.woff2
• roboto-greekext-normal500.woff2
• roboto-cyrillic-normal400.woff2
• roboto-latin-normal300.woff2
• roboto-cyrillic-normal500.woff2
• roboto-latin-normal400.woff2
• roboto-cyrillicext-normal300.woff2
• roboto-latin-normal500.woff2
• roboto-cyrillicext-normal400.woff2
• roboto-latinext-normal300.woff2
• roboto-cyrillicext-normal500.woff2
• roboto-latinext-normal400.woff2
• roboto-greek-normal300.woff2
• roboto-latinext-normal500.woff2
• roboto-greek-normal400.woff2
• roboto-vietnamese-normal300.woff2
• roboto-greek-normal500.woff2
• roboto-vietnamese-normal400.woff2
• roboto-greekext-normal300.woff2
• roboto-vietnamese-normal500.woff2
• roboto-greekext-normal400.woff2

projects/kubeflow/src/lib:

• fonts.scss : Now have a local path. Need to see if it works without path modification
• kubeflow.module.ts
• variables.scss

projects/kubeflow/src/lib/conditions-table:

• conditions-table.component.html
• conditions-table.component.spec.ts
• conditions-table.component.ts
• conditions-table.module.ts
• config.ts : Type has error until fixed
• types.ts

projects/kubeflow/src/lib/confirm-dialog:

• confirm-dialog.module.ts
• confirm-dialog.service.spec.ts
• confirm-dialog.service.ts
• types.ts : Will need to translate?

projects/kubeflow/src/lib/confirm-dialog/dialog:

• dialog.component.html
• dialog.component.scss
• dialog.component.spec.ts : One new test
• dialog.component.ts

projects/kubeflow/src/lib/content-list-item:

• content-list-item.component.html
• content-list-item.component.scss
• content-list-item.component.spec.ts
• content-list-item.component.ts
• content-list-item.module.ts

projects/kubeflow/src/lib/date-time:

• date-time.component.html
• date-time.component.spec.ts : Linting fix
• date-time.component.ts
• date-time.module.ts
• to-date.pipe.ts

projects/kubeflow/src/lib/details-list:

• details-list-item
• details-list.component.html
• details-list.component.scss
• details-list.component.spec.ts : Fix linting
• details-list.component.ts
• details-list.module.ts
• types.ts

projects/kubeflow/src/lib/details-list/details-list-item:

• details-list-item.component.html
• details-list-item.component.scss : Margin changed
• details-list-item.component.spec.ts
• details-list-item.component.ts

projects/kubeflow/src/lib/editor: New folder

• README.md
• editor.component.html
• editor.component.scss
• editor.component.spec.ts
• editor.component.ts
• editor.module.ts

projects/kubeflow/src/lib/editor/interfaces:

• monaco.ts

projects/kubeflow/src/lib/enums:

• dashboard.ts

projects/kubeflow/src/lib/form:

• error-state-matcher.ts
• form.module.ts : Removed FormSectionImageComponent Add MatIconModule
• utils.ts
• validators.ts : Linting

projects/kubeflow/src/lib/form/advanced-options:

• advanced-options.component.css
• advanced-options.component.html
• advanced-options.component.scss
• advanced-options.component.spec.ts Linting
• advanced-options.component.ts

projects/kubeflow/src/lib/form/name-namespace-inputs:

• name-namespace-inputs.component.html : Added data-cy-form-control-name
• name-namespace-inputs.component.scss
• name-namespace-inputs.component.spec.ts Linting
• name-namespace-inputs.component.ts Linting

projects/kubeflow/src/lib/form/name-namespace-inputs/name-input:

• name-input.component.html
• name-input.component.scss
• name-input.component.spec.ts Linting
• name-input.component.ts

projects/kubeflow/src/lib/form/positive-number-input:

• positive-number-input.component.html
• positive-number-input.component.scss
• positive-number-input.component.spec.ts Linting
• positive-number-input.component.ts

projects/kubeflow/src/lib/form/rok-url-input:

• rok-url-input.component.html : New mathint
• rok-url-input.component.scss
• rok-url-input.component.spec.ts
• rok-url-input.component.ts

projects/kubeflow/src/lib/form/section:

• section.component.html : Customization conflict.
• section.component.scss New css
• section.component.spec.ts Linting
• section.component.ts

projects/kubeflow/src/lib/form/step-info:

• step-info.component.html
• step-info.component.scss
• step-info.component.spec.ts Linting
• step-info.component.ts

projects/kubeflow/src/lib/form/submit-bar:

• submit-bar.component.html
• submit-bar.component.scss
• submit-bar.component.spec.ts Linting
• submit-bar.component.ts

projects/kubeflow/src/lib/heading-subheading-row:

• heading-subheading-row.component.html
• heading-subheading-row.component.scss Linting
• heading-subheading-row.component.spec.ts Linting
• heading-subheading-row.component.ts
• heading-subheading-row.module.ts

projects/kubeflow/src/lib/help-popover: New

• help-popover.component.html
• help-popover.component.scss
• help-popover.component.spec.ts
• help-popover.component.ts
• help-popover.module.ts

projects/kubeflow/src/lib/icon:

• icon.component.html
• icon.component.scss
• icon.component.spec.ts Linting
• icon.component.ts
• icon.module.ts

projects/kubeflow/src/lib/loading-spinner:

• loading-spinner.component.html : new css class
• loading-spinner.component.scss : new css class
• loading-spinner.component.spec.ts : Linting
• loading-spinner.component.ts : New input
• loading-spinner.module.ts

projects/kubeflow/src/lib/logs-viewer: New

• logs-viewer.component.html
• logs-viewer.component.scss
• logs-viewer.component.spec.ts
• logs-viewer.component.ts
• logs-viewer.module.ts

projects/kubeflow/src/lib/namespace-select:

• namespace-select.component.html Remove ngModel New option (new code in 1.7)
• namespace-select.component.scss
• namespace-select.component.spec.ts Linting
• namespace-select.component.ts : New allNamespaces (new code in 1.7)
• namespace-select.module.ts

projects/kubeflow/src/lib/panel:

• panel.component.html
• panel.component.scss
• panel.component.spec.ts Linting
• panel.component.ts
• panel.module.ts

projects/kubeflow/src/lib/polling:

• exponential-backoff.ts

projects/kubeflow/src/lib/popover:

• popover.component.html
• popover.component.ts
• popover.directive.ts Created frontend workload, might mean more tests. see notes at end of file
• popover.module.ts
• popover.scss

projects/kubeflow/src/lib/resource-table:

• resource-table.component.html == now are ===
• resource-table.component.scss
• resource-table.component.ts
• resource-table.module.ts A lot of new components,

projects/kubeflow/src/lib/resource-table/action:

• action.component.css
• action.component.html went from matTooltip="{{ tooltipReady }}" to matTooltip="{{ action.tooltip }}"
• action.component.scss
• action.component.spec.ts Linting
• action.component.ts

projects/kubeflow/src/lib/resource-table/action-button:

• action-button.component.html
• action-button.component.scss
• action-button.component.spec.ts Linting
• action-button.component.ts

projects/kubeflow/src/lib/resource-table/chips-list:

• chips-list.component.html
• chips-list.component.scss
• chips-list.component.spec.ts Linting
• chips-list.component.ts

projects/kubeflow/src/lib/resource-table/component-value:

• component-value.component.html
• component-value.component.scss
• component-value.component.spec.ts Linting
• component-value.component.ts New output

projects/kubeflow/src/lib/resource-table/status:

• status.component.html
• status.component.scss
• status.component.spec.ts Linting
• status.component.ts
• types.ts No key, no unmounted, those i think we added so i kept

projects/kubeflow/src/lib/resource-table/table: MANY CHANGES

• table.component.html MANY new translations. Like MANY
• table.component.scss link to variables.scss (make sure the file exists.)
• table.component.spec.ts Many new tests
• table.component.ts A lot of diff code will need to be checked
• utils.ts New file

projects/kubeflow/src/lib/resource-table/types:

• action-button.ts
• action-icon-value.ts
• action.ts
• chip-list.ts
• component-value.ts
• date-time.ts
• index.ts new link to link-value
• link-value.ts New file
• menu-value.ts
• property-value.ts Make links actual links kubeflow/kubeflow@8dcfe79
• status.ts The unmounted and mounted values are ours. Added back
• table.ts New code handles links
• template.ts

projects/kubeflow/src/lib/services:

• date-time.service.spec.ts
• date-time.service.ts
• namespace.service.spec.ts
• namespace.service.ts It's like if someone did a weird coding job...
• poller.service.spec.ts New file
• poller.service.ts New file

projects/kubeflow/src/lib/services/backend:

• backend.service.spec.ts
• backend.service.ts sorting created manually?
• types.ts

projects/kubeflow/src/lib/services/frontend:

• editor-loader.service.ts

projects/kubeflow/src/lib/services/rok:

• injector.ts
• rok.service.ts Linting
• types.ts

projects/kubeflow/src/lib/snack-bar:

• snack-bar.module.ts
• snack-bar.service.spec.ts
• snack-bar.service.ts
• types.ts

projects/kubeflow/src/lib/snack-bar/component:

• snack-bar.component.html
• snack-bar.component.scss
• snack-bar.component.spec.ts Linting
• snack-bar.component.ts Linting

projects/kubeflow/src/lib/status-icon: New

• status-icon.component.html
• status-icon.component.scss
• status-icon.component.spec.ts
• status-icon.component.ts
• status-icon.module.ts

projects/kubeflow/src/lib/title-actions-toolbar:

• title-actions-toolbar.component.html New code with tooltip might need translation
• title-actions-toolbar.component.scss Slight css change for margin
• title-actions-toolbar.component.spec.ts Linting
• title-actions-toolbar.component.ts
• title-actions-toolbar.module.ts New mattooltip module
• types.ts

projects/kubeflow/src/lib/urls: New

• types.ts
• urls.component.html
• urls.component.scss
• urls.component.spec.ts
• urls.component.ts
• urls.module.ts

projects/kubeflow/src/lib/utils:

• kubernetes.model.ts
• kubernetes.ts Linting

projects/kubeflow/src/lib/variables-groups-table: New

• types.ts
• variables-groups-table.component.html
• variables-groups-table.component.scss
• variables-groups-table.component.spec.ts
• variables-groups-table.component.ts
• variables-groups-table.module.ts

NOTES

projects/kubeflow:

• tslint.json: We had this file already, but there is now a eslintrc.json. We might want to delete the file once we confirm that it works
• karma.conf.js : Will need to confirm if the Karma tests are still useful and work. If the Files and proxies need to be more specific to our folder structures.

projects/kubeflow/src:
-public-api.ts: Verify that no more errors occur aka all files are there

projects/kubeflow/src/lib/conditions-table:

• config.ts: missing types.

projects/kubeflow/src/lib/confirm-dialog:

• types.ts : Will need to translate?

projects/kubeflow/src/lib/content-list-item:
Entirely new thing. Will need to be translated

projects/kubeflow/src/lib/editor: New folder
Will need translation?

projects/kubeflow/src/lib/editor/interfaces: New folder
Will need translation?

projects/kubeflow/src/lib/form/rok-url-input:
New content but this is all untranslated. We don't use rok.

projects/kubeflow/src/lib/form/section:

• section.component.html : Customization conflict.
• New help section

projects/kubeflow/src/lib/form/section-image:
We have code, upstream does not. This relates actually with form-image.component.html in juptyer.
Will need to investigate when in that section and make the necessary adjustments.

projects/kubeflow/src/lib/help-popover: New

projects/kubeflow/src/lib/loading-spinner: new css class may needed translation

projects/kubeflow/src/lib/logs-viewer: New

projects/kubeflow/src/lib/namespace-select: Taking the changes cause new code in 1.7 see kubeflow/kubeflow@f3737c6#diff-95a7d168c5ddeb96de53db318a8313ae9383656a774999cb7c8e11f5e525516f

• namespace-select.component.html Remove ngModel New option
  Will need to confirm
• namespace-select.component.ts New input + lots of code changes

projects/kubeflow/src/lib/popover:
While reviewing the popover modification, noticed .github/workflows/common_frontend_tests.yaml
from kubeflow/kubeflow@1d8d63e
Which is new tests to run.

projects/kubeflow/src/lib/resource-table:
Resource table: No more paginator, it looks like its' something that was added in 1.6, but removed in 1.7. In favor of automatic tables. Might be wrong about this.

projects/kubeflow/src/lib/resource-table/action:
The following might be translation troubles:

• action.component.html went from matTooltip="{{ tooltipReady }}" to matTooltip="{{ action.tooltip }}"
• action.component.html went from matTooltip="{{ tooltipInit }}" to matTooltip="{{ action.tooltip }}"

projects/kubeflow/src/lib/resource-table/component-value:

• component-value.component.ts New output

projects/kubeflow/src/lib/resource-table/status:

• types.ts No key, no unmounted, those i think we added so i kept

projects/kubeflow/src/lib/resource-table/types:

• index.ts new link to link-value
• property-value.ts Make links actual links kubeflow/kubeflow@8dcfe79
• status.ts The unmounted and mounted values are ours. Added back
• table.ts New code handles links

These will need to be thoroughly checked for translation, especially the new link feature

projects/kubeflow/src/lib/resource-table/table: MANY CHANGES All these might be trouble when trying to run the code and for translation

• table.component.html MANY new translations. Like MANY
• table.component.scss link to variables.scss (make sure the file exists.)
• table.component.spec.ts Many new tests
• table.component.ts A lot of diff code will need to be checked
• utils.ts New file

projects/kubeflow/src/lib/services:

• namespace.service.ts It's like if there was only half a refactor on the file

projects/kubeflow/src/lib/services:

• namespace.service.ts It's like if someone did a weird coding job...

projects/kubeflow/src/lib/services/backend:

• backend.service.ts sorting created manually?

projects/kubeflow/src/lib/status-icon: New
Will need translation

projects/kubeflow/src/lib/title-actions-toolbar:

• title-actions-toolbar.component.html New code with tooltip might need translation
• title-actions-toolbar.component.scss Slight css change for margin
• title-actions-toolbar.module.ts New mattooltip module

projects/kubeflow/src/lib/urls: New
Will need translation

projects/kubeflow/src/lib/variables-groups-table: New
Will need translation

[wg102]

I kept this as one ticket to not lose too much time in paperwork. the work is rather copy pasta kind, so it's easy to get in the beat once you start.

[wg102]

Merged