[Frontend] Update the analytics app to retrieve the stack's state from the new API
Problem to solve
Analytics instances can be managed by multiple project members on the frontend. To prevent erroneous state management and actions from being performed we should centralise state management in the backend and use it as the only source of truth.
More details in the parent epic Use the backend as the single source of truth f... (&9914 - closed).
Proposed solution
Retrieve the stack's state from the new backend API [Backend] Add an API to retrieve the state of a... (#391973 - closed) and replace the existing state management code in the frontend.
Implementation plan
- Remove the
hasAnalyticsData
call. - Create a renderless
analytics_state
component that can:- 1 - Initialise a stack and return the new state
- 2 - Get the current state of a stack
- Note: this can then be reused for the shared listing page.
- Note: Initialise should only be called if the state is null or
'create_instance'
.
- Update
product_analytics_app.vue
to get the onboarding status from the new component.- Show loading while the status is being fetched.
- Update
onboarding_view.vue
to use the new component.- Replace the initialize call.
- Use the new component for polling.
For additional ideas on how this could be implemented see the discussion &9914 (comment 1283316458).
Rough example of a renderless state component
// analytics_state.vue
export default {
prop: {
projectId,
fetchStateOnCreate: false,
},
data () {
return {
state: null,
}
},
created() {
if (this.fetchStateOnCreate) {
this.fetchCurrentState();
}
},
methods: {
initializeProductAnalytics() {
// call initialize for projectId
this.state = response;
},
fetchCurrentState() {
// fetch latest state for projectId
this.state = response;
},
},
render() {
return this.$slots.default({
state: this.state,
initializeProductAnalytics: this.initializeProductAnalytics,
fetchCurrentState: this.fetchCurrentState,
})
},
}
// product_analytics_app.vue
<AnalyticsState :projectId="2">
<template #default={ state, initializeProductAnalytics, fetchCurrentState }>
<list @setup="initializeProductAnalytics" />
<onboarding @fetch-state="fetchCurrentState" :state="state" />
</template>
</AnalyticsState>
Edited by Jiaan Louw