Stack list content

docs/concepts/stack/README.md

@@ -4,7 +4,7 @@ _Stack_ is one of the core concepts in Spacelift. A stack is an isolated, indepe
 
 Unless you're using Spacelift only to host and test private [Terraform modules](../../vendors/terraform/module-registry.md), your account should probably contain one or more stacks to be of any use. For example:
 
-![](<../../assets/screenshots/Screen Shot 2022-06-29 at 2.47.11 PM.png>)
+![](<../../assets/screenshots/stack/list/page-view.png>)
 
 Here's a few helpful articles about stacks:
 
@@ -18,6 +18,6 @@ Similar to [runs](../run/README.md) and [tasks](../run/task.md), stacks also hav
 A stack's state is the last state of its most recently processed [tracked run](../run/README.md#where-do-runs-come-from) that has progressed beyond the [queued](../run/README.md#queued) state and which was not [canceled](../run/README.md#canceled).
 Only if the stack has no runs yet a special state "None" is applied:
 
-![](<../../assets/screenshots/Stacks_·_spacelift-io (1).png>)
+![](<../../assets/screenshots/stack/list/none-state-item.png>)
 
 Stack states allow users to see at a glance the overall health of their infrastructure, and the level of development activity associated with it.

docs/concepts/stack/organizing-stacks.md

@@ -6,43 +6,64 @@ Depending on the complexity of your infrastructure, the size of your team, your
 
 <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/754795106?h=c4e1f101d8&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Organizing a Stack"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
 
+## Customizing table view
+
+Based on the table configuration, you'll be able to customize the view to suit your needs. A settings drawer for customizing the list is available under the icon in the top right corner.
+![](<../../assets/screenshots/stack/list/customize-list-button.png>)
+
+Clicking the icon opens a drag-and-drop menu where you can hide columns (except for _name_) or rearrange their order:
+![](<../../assets/screenshots/stack/list/customize-list-drawer.png>)
+
+To reset your settings, use the _Reset to default_ button located at the bottom of the customization drawer.
+
+Each column can be resized by dragging the column separator:
+![](<../../assets/screenshots/stack/list/resize-column-highlight.png>)
+
+Additionally, you can hover over one of the column headers and leverage the dropdown menu to hide them:
+![](<../../assets/screenshots/stack/list/column-options-highlight.png>)
+
 ## Query-based searching and filtering
 
 Historically the first tool we offered was the search bar:
 
-![](../../assets/screenshots/Screen Shot 2022-06-29 at 3.06.42 PM.png)
+![](../../assets/screenshots/stack/list/search-highlight.png)
 
 The search bar allows you to search and filter by the following stack properties:
 
 - name;
 - ID (slug);
 - any of its [labels](stack-settings.md#labels);
 
-Note how the search phrase is highlighted, and irrelevant stacks are filtered out:
+## Filtering by state
 
-![](<../../assets/screenshots/Screen Shot 2022-06-29 at 3.07.29 PM.png>)
+Filtering stacks by state is a very useful mechanism for identifying action items like plans pending confirmation ([unconfirmed](../run/tracked.md#unconfirmed) state) or [failed](../run/README.md#failed) jobs that require fixing. For that, use the _State_ section on the sidebar to the left. Clicking on any status filters the list of stacks to show only those with the selected status,
 
-## Filtering by status
+![](<../../assets/screenshots/stack/list/finished-filter.png>)
 
-Filtering stacks by status is a very useful mechanism for identifying action items like plans pending confirmation ([unconfirmed](../run/tracked.md#unconfirmed) state) or [failed](../run/README.md#failed) jobs that require fixing. For that, use the _Filter stacks by status_ section on the sidebar to the left. If you click on any of the statuses, the list of stacks will be filtered to only include stacks with a given status:
+Note that if no stacks in the account have a particular status at the moment, that status is missing from the list.
 
-![](<../../assets/screenshots/Screen Shot 2022-06-29 at 3.09.29 PM.png>)
+You can also use our predefined tabs to filter some specific group of states:
+![](<../../assets/screenshots/stack/list/tab-filters-highlight.png>)
 
-Note that if no stacks in the account have a particular status at the moment, that status is missing from the list.
+- Needs Attention: _unconfirmed_ state
+- Failed: _failed_ state
+- On Hold: _none_, _confirmed_ or _replan-requested_ states
+- In progress: _applying_, _destroying_, _initializing_, _planning_, _preparing-apply_ or _preparing-replan_ states
+- Finished: _finished_ state
 
 ## Label-based folders
 
 Probably the most useful way of grouping stacks is by attaching folder labels to them. You can read more about [labels](stack-settings.md#labels) here, including how to set them, and folder labels are just regular labels, prefixed with `folder:`. In order to make it more obvious in the GUI and save some screen real estate, we replace the `folder:` prefix by the folder icon...
 
-![](<../../assets/screenshots/Screen Shot 2022-06-29 at 5.21.20 PM.png>)
+![](<../../assets/screenshots/stack/list/labels-folders-highlight.png>)
 
 ...but once you start editing labels, the magic is gone:
 
 ![](../../assets/screenshots/stack/settings/stack-details_set-folder-label.png)
 
 For every folder label, a sidebar section is included in the _Folders_ menu, allowing you to search by that label. The number to the right hand side indicates that number of stacks with that label:
 
-![](<../../assets/screenshots/Screen Shot 2022-06-29 at 5.24.06 PM.png>)
+![](<../../assets/screenshots/stack/list/folder-section-highlight.png>)
 
 ### Nesting and multiple folder labels
 
@@ -54,11 +75,11 @@ Also, a single stack can have any number of folder labels set, in which case it
 
 It is possible to save your filters with a Filters Tab. You can select all the filters that you would like to apply, add a search query or sorting in the top right corner, click New View, enter the view name, and click Save. This view is now saved for this account. You can also mark your new view as your default view during creation. Next time you log in or navigate to stacks, your personal default view will be applied.
 
-![](../../assets/screenshots/saved-views-filters-tab.png)
+![](../../assets/screenshots/stack/list/saved-view-create-highlight.png)
 
 If you forgot to mark your view as default then you can easily do the same thing in the Views Tab.
 
-![](../../assets/screenshots/saved-views-default.png)
+![](../../assets/screenshots/stack/list/saved-view-default-highlight.png)
 
 ### Shared views
 
@@ -68,12 +89,12 @@ Views can be shared or private. While first creating the view, it is available o
 
 To quickly reset your default view to Spacelift default state, click the "Reset to Spacelift default view" button. It will result in clearing all sorting, search, and filter parameters, as well as managed filter settings.
 
-![](../../assets/screenshots/saved-views-reset.png)
+![](../../assets/screenshots/stack/list/saved-view-reset-highlight.png)
 
 ### Manage view
 
 - If you change your filter, search and/or sorting settings, you can update the currently selected view by clicking on Update item under "Manage view" button. The blue icon on the manage view button indicates an update possibility.
 - Edit name allows editing name of the current view
 - Delete allows removing your private view (Shared and Spacelift default views can not be removed). You can delete the view from the Views tab as well.
 
-![](../../assets/screenshots/saved-views-manage.png)
+![](../../assets/screenshots/stack/list/saved-view-manage-highlight.png)

docs/product/bulk-actions.md

@@ -49,7 +49,7 @@ Note: It is possible to stop the queued actions if you make a mistake by clickin
 
 ### Stacks list available actions
 
-![](../assets/screenshots/bulk-actions/floating-bar.png)
+![](../assets/screenshots/stack/list/bulk-actions.png)
 
 When you make a selection on the "Stacks" page you can choose the intended action from the following options: