►
From YouTube: New CI variables UI - Walkthrough for UX
Description
Walkthrough of the UX improvements made on the project/group variable settings UI.
A
Hey
there,
this
is
a
UX
walkthrough
for
the
CI
variables
refactor
into
view
for
projects
and
groups.
Here
we
have
the
variables
section
expanded
with
the
table
sorting
by
default.
It
happens
by
key
in
alphabetical
order.
You
can
change
that
the
boolean
values
for
protected
a
mask
are
now
represented
by
icons.
You
can
see
that
by
editing
the
variable
we
have
protected
variable
flag
check,
so
that's
going
to
represent
and
it's
true
with
this
icon.
A
If
you
hover
over
any
key,
you
have
a
tooltip
copy
key
which,
if
you
copy
that
it'll
copy
the
full
value,
I'll
paste
it
up
here
and
the
address
bar
same
goes
with
value
it'll
copy
value.
If
you
have
a
long
value
such
as
like
a
large
file
type
or
a
large
variable
with
a
long
value,
it
will
be
cut
off
at
95
characters
and
then
a
lipst
and
but
it
still
copies
the
full
value.
A
We
can't
add
a
variable
right
now,
so
we
don't
have
the
values.
So,
let's
put
in
test
value,
and
we
can
mask
that
and
it
is
mess
full
right
now.
But
if
we
back
out
then
this
variable
cannot
be
masked
believe
that
was
already
reviewed
by
Dmitry
and
approved
for
that
functionality
just
wanted
to
show
that-
and
it
also
is
relying
on.
If
you
can
click
the
add
variable
button
or
not
to
get
around
seeing
a
an
error
response
from
the
API.
A
A
Here
we
move
to
delete
variable
out
of
the
table
and
choose
modal
to
give
us
a
little
bit
more
room
and
all
the
columns
have
widths
now
that
were
recommended
by
UX,
so
first
column,
70
pixels,
and
we
got
40%
for
key
in
value
you
protected
and
mask,
or
at
a
hundred
pixels
environments
or
20%
and
actions
are
50
pixels.
To
give
us
this
table
look
into
mobile,
we
stacked
the
table
at
what's
at
960.
One
thing:
I
know:
9
91
the
table
will
get
stacked.