Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Implement a `CurrentSurvey` component

See original GitHub issue

Feature Description

The CurrentSurvey component is the entrypoint for rendering the current survey (if any) for the user. It’s responsible for retreiving the current survey from the core/user data store and rendering it at the top-most level.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

A CurrentSurvey component should be created as a functional, hook-based, connected component
It should be added to the Root component so that it is rendered as part of every React app in Site Kit
- A userFeedback feature flag should be added and used to conditionally render the CurrentSurvey
Additionally, CurrentSurvey should only be rendered (or always return null) if the site is using the proxy (see isUsingProxy in core/site)
It should use the getCurrentSurvey selector added in #3355 to retrieve the survey to render from the datastore, if any
- If none, it should render null
- If a survey object is returned, it should render a Survey component passing through the survey question and completion as questions and completions props respectively (see #3380)
  - If Survey has yet to be implemented, an empty/placeholder component can be scaffolded in its place
When rendering a survey, a React portal should be used to place the output as a direct child of the <body>
- Survey elements should always appear in a fixed position at the bottom right-hand corner of the screen (with some distance from the edge of the browser) as shown in the design
Survey data and event handlers should be passed through to the rendered component as props as necessary

Implementation Brief

Once #3355 have been merged.
Create new file assets/js/components/surveys/CurrentSurvey which exports the CurrentSurvey functional component.
Update the Root component,
- to conditionally render the CurrentSurvey component if the userFeedback feature flag is enabled by using the useFeature hook.
Using the CurrentSurvey component,
- Using the useMount hook, check if the site is connected via the proxy by querying the core/site data store via the isUsingProxy selector. If this is not the case, then render null.
- Query the core/user data store via the getCurrentSurvey selector and use the logic defined in the AC if there is none or a survey returned.
Styling the CurrentSurvey consists of only positioning the component to the bottom right of the user’s screen with a 36px spacing on the right and bottom. Child components rendered by CurrentSurvey will have their own styles.
Rename the Modal component to Portal and update references to the Modal component to use Portal.
- Add the slug optional prop which will should be added as class name to the dynamically generated element so that is easy to identify the portal for styling purposes. If a slug is provided, then the class name will be prefixed by googlesitekit-portal- and then the slug is appended.
Within the CurrentSurvey component, use Portal to render the markup with the slug of the portal set to survey.
All styles for the CurrentSurvey component should go in assets/sass/components/survey/_googlesitekit-survey.scss.
Any class names used in the component should follow the BEM methodology, with the googlesitekit-survey prefix.

Test Coverage

No new tests to be added.

Visual Regression Changes

QA Brief

Run storybook locally via the npm run storybook command.
Visit the Components -> Surveys -> CurrentSurvey story.
Inspect the code and ensure that we have an element with the following class names: googlesitekit-portal-survey googlesitekit-plugin as a direct child of body.
Scaffolded Survey component should be displayed to the bottom right of the page.

Changelog entry

Implement a component to render the current survey.

Issue Analytics

State:
Created 2 years ago
Comments:12 (3 by maintainers)

Top GitHub Comments

1reaction

asvinbcommented, May 26, 2021

@aaemnnosttv I may have incorrectly phrased it in the IB but that’s what I meant when I said:

Render the CurrentSurvey component as a child of the Portal component I’ve changed the wording, let me know if that works now 😃

+1 for the suggested class name. IB updated.

1reaction

aaemnnosttvcommented, May 20, 2021

@felixarntz ready for another pass 👍

Top Results From Across the Web

What is a current survey? - NOAA's National Ocean Service

To collect the data they need, NOAA scientists typically deploy Acoustic Doppler Current Profilers (ADCPs) to measure currents throughout the water column at ......

set_survey_vars: Set the variables for the current survey variable in ...

This function helps convert a vector to a variable in the correct part of a survey object's structure so that functions can refer...

Survey Components - Completions (C)

Data collected include: Completions by field of study, award level, recipient race/ethnicity and gender;; Completers by race/ethnicity, gender, and age ( ...

To Create a Curve in the Current Survey Figure | Civil 3D 2020 ...

Create a curve in the current figure using two known variables. In Toolspace, on the Survey tab, right-click a named network Survey Command...

Quotas - Qualtrics

Using Quotas in Other Parts of Qualtrics. In addition to specifying what happens to respondents in the quota editor, you can also use...