►
From YouTube: Visual Reviews Walk Through
Description
Quick walk through of the use case, setup and use of the Visual Reviews feature.
Visual Reviews documentation: https://docs.gitlab.com/ee/ci/review_apps/#visual-reviews
Review Apps Walk through: https://www.youtube.com/watch?v=h2pv_syqO24&t=515s
Direction Page for the Usability category: https://about.gitlab.com/direction/verify/usability_testing/
A
Hi,
I'm
james
heinbeck,
the
product
manager
for
the
testing
group
at
gitlab
today,
I'll
do
a
quick
walkthrough
of
the
visual
reviews
feature.
This
feature
is
available
in
the
starter
tier
and
above
for
self-hosted
instances
or
the
bronze
tier
and
above
for
gitlab.com
users.
So
first
I
want
to
talk
about
what
problem
this
solves
for
users,
so
as
a
product
manager,
I've
spent
plenty
of
time
in
my
career
asking
about
where
I
can
verify
a
feature
or
a
bug
fix
before
shipping
it
to
production
and
sometimes
there's
a
staging
environment
I
can
use.
A
Sometimes
I
look
over
a
developer's
shoulder
and
sometimes
there's
just
nothing
to
review
so
that
you
have
to
kind
of
trust
and
validate
them
when
the
feature
is
shipped
that
it's
actually
working
the
way
it
is
intended.
None
of
those
is
great,
and
sometimes
even
worse,
is
getting
feedback.
When
you
do
have
an
environment
back
to
the
developer,
who's
working
on
the
feature
should
you
use
chat?
Should
you
use
email?
Should
you
put
it
back
into
the
original
ticket
or
just
walk
over
and
talk
to
a
developer
about
what
you
are
seeing?
A
Fortunately,
with
gitlab
there's
review
apps,
so
I
can
see
what
a
change
is
going
to
look
like
as
soon
as
the
pipeline
for
a
merge
request
is
completed
and
that
change
is
deployed
out
into
that
staging
environment.
But
I
find
myself
still
having
two
windows
open
the
review
app
and
the
merge
request.
So
I
can
see
the
app
and
then
maybe
write
comments
about
it
in
the
issue.
A
That's
where
visual
reviews
comes
in
with
this
feature,
you
can
leave
a
comment
on
the
merge
request
right
from
the
review
app,
so
there's
no
more
going
back
and
forth.
So,
let's
see
how
it
works
so
to
speed
this
up
or
to
set
this
up.
Rather,
a
developer
is
going
to
have
to
include
a
script
in
the
head
tag
of
the
web
app.
A
Let's
look
at
an
example
here,
the
documentation.
You
can
see
an
example
of
what
we
have.
Let's
look
at
an
example
actually
in
prior
in
progress,
though
so
here
is
a
quick
static
site
that
I
put
together,
and
here
you
can
see.
I
have
a
header
tag
here
and
some
information
about
the
review
app
or
about
the
visual
reviews.
A
So
in
this
case
I'm
not
or
I
am
allowing
anonymous
contact
comments
to
be
posted
to
my
project,
but
there's
an
option
to
require
a
personal
access
token
that
needs
to
be
included
before
a
comment
can
be
submitted.
That
must
match
a
user
for
the
project.
So
now,
let's
see
the
visual
reviews
actually
in
action.
A
So
in
the
same
project
I
have
a
merge
request
here
that
I've
started.
I
want
to
add
a
couple
of
more
links
to
my
page,
so
we
can
see
that
I
have
already
built
this
pipeline
is
green
and
it's
already
been
deployed
out
to
my
review
app.
So
review
is
going
to
take
you
into
your
review
app.
If
you
click
sorry
view
app
is
going
to
take
you
into
your
review.
A
App
review
is
going
to
open
this
window,
and
this
gives
you
a
little
bit
more
information
if
you've
never
deployed
the
review
app
or
if
you've
deployed
the
review
app,
but
you
haven't
enabled
the
visual
reviews,
here's
some
of
the
data
that
you
need.
Some
of
this
is
going
to
look
familiar.
The
data
project
id
matches
what
I
already
have
in
there
the
project
path
matches.
A
A
If
we
pop
that
open,
you
can
see
I've
already
added
the
merge
request
id
so
that
doesn't
need
to
be
re-included.
Now,
let's
take
a
look
at
my
change,
so
you
can
see.
I
added
go
to
page
two
go
to
page
three.
Well,
the
link
probably
works.
Yep
links
are
good,
but
there's
not
very
much
space
in
between
those.
So
let's
leave
a
comment
for
our
developer.
A
A
A
Go
ahead
and
refresh
my
merge
request,
and
we
can
see
here
because
I
posted
anonymously,
it
came
in
from
our
visual
review
bot
what
includes
my
name
or
my
initials
email
address,
and
my
comment
in
addition.
There's
some
metadata
here,
that's
included
about
my
browser,
if
that's
helpful,
if
you're
seeing
an
issue
only
in
mobile
or
in
a
mobile
view,
a
small
view,
different
kind
of
browser,
some
of
that
data
can
be
really
helpful
in
debugging
the
issue
itself.
A
So,
as
you
can
see
now,
it's
pretty
easy
for
anyone
to
leave
comments
on
that
review
app
and
on
the
merge
request
for
a
developer
to
review
I'll
include
links
to
the
documentation
for
the
feature
and
the
review
apps
a
walkthrough,
if
you
haven't
been
through
that,
there's
another
great
walkthrough
from
another
gitlab
product
manager
of
how
to
set
that
up,
as
well
as
the
direction
page
to
the
usability
category.
It's
where
we've
detailed
this
and
other
usability
related
features
and
kind
of
where
we're
headed
for
those
features
in
the
future.