Management plugin migration plan

[sainthkh]

What is this?

I've submitted 2 PRs(#45747, #45876) related to management app. After writing them, I was wondering what should be done to migrate management app to new platform.

So, I've read the management code and wrote this long to-do list. After getting some reviews, I'll break this list into small issues.

Plan

• Create management plugin under legacy/core_plugins. PR:ui/management -> new platform #45747
• Remove injectI18ns. PR:Remove injectI18n in management. #45876
• Currently, some components and tests are inside the folders of its name or __jest__. It complicates the folder structure. They should be simplified.
  • Remove index.js
  • Move component and its test out of its own folder and to right under components folder. They should be side-by-side.
  • snapshots should be moved under components/__snapshots__.
  • Note: The process above will be called "simplify struture" below.
• Index Patterns section
  • To use react-router-dom, the URL structure should be changed a bit like below:
    • /index_patterns -> show list
    • /index_patterns/create -> create index pattern wizard. (Previously: /index_pattern)
    • /index_patterns/edit/:id -> edit index pattern (Previously: /index_patterns/:id)
  • List
    • Create folder, list, and move related files.
      • IndexPatternsList.tsx
      • Create components folder and move:
        • CreateButton
        • create_index_pattern_prompt/index.tsx -> CreateIndexPatternPrompt
        • IndexPatternTable
      • Migrate IndexPatternTable content to IndexPatternList.tsx
      • Create IndexPatternListHeader.tsx and move page title and button part.
      • CreateButton -> move const button into options.length > 1 and > 1 condition to else.
    • List Component
      • De-angularize legacy compat
        • uiCapabilities -> npStart.core.application.capabilities
        • badge -> npStart.core.chrome.setBadge
          • badge and uiCapabilities -> check ui/legacy_compat/angular_config.tsx
        • requireUICapability -> move ui/capabilities/route_setup -> src/plugins/kibana_react
        • breadcrumbs -> npStart.core.chrome.setBreadcrumbs()
      • De-angularize variables
        • indexPatterns -> SavedObjectsClientProvider -> npStart.core.savedObjects.client
        • kbnUrl.eval -> simple template string
        • defaultIndex -> get it from uiSettings.get('defaultIndex')
        • editingId -> can be removed. :indexPatternsId doesn't exist in url
        • $watch('defaultIndex', () => renderList()) -> renderList(). 'defaultIndex' doesn't change magically. It is changed in edit page. And it can be re-calculated when List is rendered again later when the page is visited again.
        • bindToScope and $apply can be removed because defaultIndex is retrieved directly from uiSettings.
        • I18nContext -> npStart.core.i18n.Context
        • UICapabilitiesProvider -> npStart.core.application.capabilities
  • Create
    • De-angularize variables
      • $routeParams -> Remove. url pattern doesn't have :id or :type. And query params aren't used.
      • config -> npSetup.core.uiSettings
      • es
        • add getIndexNamesForWildcard in IndexPatternsFetcher.
        • add route to IndexPatternsFetcher.
        • add api to IndexPatternsApiClient and expose it in IndexPatterns.
        • replace get_indices with data.indexPatterns.indexPatterns.getIndexNamesForWildcard.
      • indexPatterns -> data.indexPatterns.indexPatterns
      • $http -> npSetup.core.http
      • savedObjectsClient -> npStart.core.savedObjects.client.
      • confirmModalPromise -> EuiConfirmModal
    • Change angular_template.html euiPanel to EuiPanel component.
    • TypeScriptify files and simplify structure.
      • constants/index.js -> constants.ts
      • components/empty_state
      • components/header
      • components/loading_state
    • Move steps from components to steps.
      • index_pattern
        • TypeScriptify files and simplify structure
          • components/header
          • components/indices_list
          • components/loading_indices
          • components/status_message
        • TypeScriptify step_index_pattern.js
      • time_field
        • TypeScriptify files and simplify structure
          • components/action_buttons
          • components/advanced_options
          • components/header
          • components/time_field
        • TypeScriptify step_time_field.js
    • lib
      • can_append_wildcard.js, contains_illegal_characters.js, get_matched_indices.js and related tests -> steps/index_pattern/lib.ts and lib.test.ts
      • extract_time_fields.js and related tests -> steps/time_field/lib.ts and lib.test.ts.
      • ensure_minimum_time.js, get_indices and related tests -> lib.ts and lib.test.ts
    • Remove will-be-deprecated React lifecyle methods
      • componentWillMount: move code to componentDidMount
        • create_index_pattern_wizard
        • step_index_pattern
      • componentWillReceiveProps -> indices_list
      • componentWillUpdate -> Fortunately, it doesn't exist.
    • TypeScriptify create_index_pattern_wizard.js.
  • Edit
    • de-angularize edit_index_pattern.js
      • create and Euify components PR: Euify management edit-index-pattern component. #47448
        • header
          • Change it with EuiFlexGroup and EuiFlexItem
          • icon -> EuiIcon
          • wrap it with EuiTitle
          • buttons with EuiButton
        • tags
        • explanation
        • alerts
        • tabs
          • move fieldFilters to each tabs -> EuiFieldSearch.onChange
          • indexedFieldTypeFilter -> updateIndexedFieldsTable, EuiSelect.onChange
          • scriptedFieldLanguageFilter -> updateScriptedFieldsTable, EuiSelect.onChange
          • Tabs component
      • remove angular variables.
        • Remove unnecessary angular variables
          • changeFilter
          • changeTab
          • $watch('state.tab')
          • $watch('fieldFilter')
          • $watch('indexedFieldTypeFilter')
          • $watch('scriptedFieldLanguageFilter')
          • $state and AppState.
        • $route -> indexPattern(s) -> npStart.core.savedObjects.client
        • config -> npSetup.core.uiSettings
        • ui/field_wildcard -> field_wildcard.ts
        • I18nContext -> npStart.core.i18n.Context
        • fatalError -> npSetup.core.fatalErrors.add
        • toastNotifications -> npSetup.core.notifications.toasts
        • ui/doc_title -> plugins/kibana_utils
        • breadcrumbs -> npStart.core.chrome.setBreadcrumbs()
    • IndexPatternFieldList component.
      • confirmModal => EuiConfirmModal
      • $location -> react-router history
      • updateEditIndexPatterns, destroyEditIndexPatterns. Call destroy inside $on('$destroy')
    • TypeScriptify and simplify tables
      • indexed_fields_table
      • scripted_fields_table
      • source_filters_table
    • create_edit_field -> scripted_field
      • move ui/field_editor -> scripted_field/editor
        • remove injectI18n PR: Remove injectI18n in field editor. #47656
        • ui/scripting_languages -> /lib
        • ui/documentation_links getDocLinks -> npStart.core.docLinks.links
        • ui/notify toastNotifications -> npSetup.core.notifications.toasts
        • $http -> npSetup.core.http
        • TypeScriptify
          • lib
          • components/field_format_editor
            • removing getDerivedStateFromProps and inheritance?
          • components/scripting_callouts
          • components/scripting_help
    • de-angularize
      • ui/doc_title -> use one from plugins/kibana_utils
      • ui/notify toastNotifications -> npSetup.core.notifications.toasts
      • breadcrumbs -> npStart.core.chrome.setBreadcrumbs()
      • config -> npSetup.core.uiSettings
      • $timeout -> setTimeout()
      • create create_field.tsx and add component
      • create edit_field.tsx and add component
      • update and destroy them in each route.
    • New EditIndexPatterns component
      • Create IndexPatternsSection component.
      • kbnUrl -> React Router
        • kbnUrl.change -> history.push
        • Add IndexPatternFieldList, CreateScriptedField, EditScriptedField
      • Remove routes from scripted_fields
  • New IndexPatternsSection Component
    • Create IndexPatternsSection component.
    • kbnUrl -> React Router
      • kbnUrl.change -> history.push
      • Add List, Create, Edit as Routes.
    • Remove uiRoutes from Create, Edit.
    • legacy folder.
      • move index.js and app.html.
      • create render and destroy functions in index.js.
        • call them inside uiRoutes.
      • import './legacy' in index.ts.
      • Note: This folder will be removed after other sections and Main app are refactored.
• Objects section
  • lib
    • de-angularize
      • remove kfetch.
        • fetch_export_by_type.js
        • fetch_export_objects.js
        • find_objects.js
        • import_file.js
        • log_legacy_import.js
        • resolve_import_errors.js
      • ui/utils/case_conversion -> kibana_utils/string vs. find_objects.js
        • It's used only once in find_objects.js
      • $http -> npSetup.core.http
    • TypeScriptify files
  • _view
    • Create editor dir and move files into it.
    • Euify components PR: Euified Management Saved Objects view component.  #47652
      • header
      • Errors
      • Intro
      • Fields form
      • Actions
    • de-angularize
      • $injector -> should wait for Refactor, deangularize courier/search source #45235. All objects uses SearchSourceProvider.
        • savedObjectManagementRegistry -> needs to design something like [RFC] Kibana Management Section Service #43631.
        • savedDashboard
        • savedSearches
        • savedVisualizations
        • savedSheets
      • uiCapabilities -> npStart.core.application.capabilities
      • fatalError -> npSetup.core.fatalErrors.add
      • toastNotifications -> npSetup.core.notifications.toasts
      • savedObjectClientProvider -> npStart.core.savedObjects.client
      • isNumeric -> move it to _view.js and call it.
    • Move functions out of the component
      • createField
      • readObjectClass
    • Create SavedObjectEditor component
      • update and destroy
    • TypeScriptify files.
  • _objects
    • create list folder and move related files.
    • de-angularize variables
      • indexPatterns -> data.indexPatterns.indexPatterns
      • $http -> npSetup.core.http
      • config -> npSetup.core.uiSettings
      • confirmModalPromise -> EuiConfirmModal
      • savedObjectsClient -> npStart.core.savedObjects.client
    • create SavedObjectList component.
    • TypeScriptify files.
  • create SavedObjectsSection component
    • kbnUrl -> React Router
      • kbnUrl.change -> history.push
      • add SavedObjectEditor and SavedObjectList
    • remove uiRoutes in _view.js
    • make legacy folder and fill it with app.html and app.js
• Settings section
  • de-angularize
    • config -> npSetup.core.uiSettings and getUpdate$().
    • badge -> npStart.core.chrome.setBadge
      • badge and uiCapabilities -> check ui/legacy_compat/angular_config.tsx
    • requireUICapability -> move ui/capabilities/route_setup -> src/plugins/kibana_react
    • breadcrumbs -> npStart.core.chrome.setBreadcrumbs()
  • TypeScriptify and simplify components
    • advanced_settings_voice_announcement
    • call_outs
    • field
    • form
    • page_footer
    • page_subtitle
    • page_title
    • search
  • create AdvancedSettingsSection component.
• Main app
  • Remove 'kbnManagementLanding' -> It's replaced with the react component.
  • create app.tsx and add Management App with react-router-dom.
  • route_setup -> react-router-dom
  • LandingPage
    • Create LandingPage component
    • register route on Management App root.
    • remove updateLandingPage function
  • Sidebar
    • EuiSideNav add each item with onClick that changes the App root state of activeSectionId.
    • Replace Subsection and Section interface with those in API.
    • Get version from npSetup.core.injectedMetadata.getKibanaVersion()
  • Check _management_app.scss if they can be removed.
• Implement Sections API RFC [RFC] Kibana Management Section Service #43631
• Refactor Main app to use React Router
• Move files to src/plugins/management/public
• NP-ize server code
  • Use NP
    • legacy/server/saved_objects
    • legacy/core_plugins/kibana/server/routes/api/management
  • move
    • management -> src/plugins/management/server
    • saved_objects -> src/plugins/data/server

Parent issue: #31968

[elasticmachine]

Pinging @elastic/kibana-app-arch

[elasticmachine]

Pinging @elastic/kibana-platform