feat(issue-views): Add 'All Views' page

static/app/components/nav/issueViews/issueViewNavItems.tsx

@@ -297,6 +297,11 @@ export function IssueViewNavItems({
           />
         ))}
       </Reorder.Group>
+      {organization.features.includes('issue-view-sharing') && (
+        <SecondaryNav.Item to={`${baseUrl}/views/`} end>
+          {t('All Views')}
+        </SecondaryNav.Item>
+      )}
     </SecondaryNav.Section>
   );
 }

static/app/routes.tsx

@@ -2102,6 +2102,12 @@ function buildRoutes() {
   const issueRoutes = (
     <Route path="/issues/" component={errorHandler(IssueNavigation)} withOrgPath>
       <IndexRoute component={errorHandler(OverviewWrapper)} />
+      <Route
+        path="views/"
+        component={make(
+          () => import('sentry/views/issueList/issueViews/issueViewsList/issueViewsList')
+        )}
+      />
       <Route path="views/:viewId/" component={errorHandler(OverviewWrapper)} />
       <Route path="searches/:searchId/" component={errorHandler(OverviewWrapper)} />
       <Route

static/app/views/issueList/issueViews/issueViewsList/issueViewsList.tsx

@@ -0,0 +1,117 @@
+import {Fragment} from 'react';
+import styled from '@emotion/styled';
+
+import * as Layout from 'sentry/components/layouts/thirds';
+import Pagination from 'sentry/components/pagination';
+import Redirect from 'sentry/components/redirect';
+import SearchBar from 'sentry/components/searchBar';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
+import useOrganization from 'sentry/utils/useOrganization';
+import {IssueViewsTable} from 'sentry/views/issueList/issueViews/issueViewsList/issueViewsTable';
+import {useFetchGroupSearchViews} from 'sentry/views/issueList/queries/useFetchGroupSearchViews';
+import {GroupSearchViewVisibility} from 'sentry/views/issueList/types';
+
+type IssueViewSectionProps = {
+  cursorQueryParam: string;
+  limit: number;
+  visibility: GroupSearchViewVisibility;
+};
+
+function IssueViewSection({visibility, limit, cursorQueryParam}: IssueViewSectionProps) {
+  const organization = useOrganization();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const cursor =
+    typeof location.query[cursorQueryParam] === 'string'
+      ? location.query[cursorQueryParam]
+      : undefined;
+
+  const {
+    data: views = [],
+    isPending,
+    isError,
+    getResponseHeader,
+  } = useFetchGroupSearchViews({
+    orgSlug: organization.slug,
+    visibility,
+    limit,
+    cursor,
+  });
+
+  const pageLinks = getResponseHeader?.('Link');
+
+  return (
+    <Fragment>
+      <IssueViewsTable views={views} isPending={isPending} isError={isError} />
+      <Pagination
+        pageLinks={pageLinks}
+        onCursor={newCursor => {
+          navigate({
+            pathname: location.pathname,
+            query: {
+              ...location.query,
+              [cursorQueryParam]: newCursor,
+            },
+          });
+        }}
+      />
+    </Fragment>
+  );
+}
+
+export default function IssueViewsList() {
+  const organization = useOrganization();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const query = typeof location.query.query === 'string' ? location.query.query : '';
+
+  if (!organization.features.includes('issue-view-sharing')) {
+    return <Redirect to={`/organizations/${organization.slug}/issues/`} />;
+  }
+
+  return (
+    <Layout.Page>
+      <Layout.Header unified>
+        <Layout.Title>{t('All Views')}</Layout.Title>
+      </Layout.Header>
+      <Layout.Body>
+        <Layout.Main fullWidth>
+          <SearchBar
+            defaultQuery={query}
+            onSearch={newQuery => {
+              navigate({
+                pathname: location.pathname,
+                query: {query: newQuery},
+              });
+            }}
+            placeholder=""
+          />
+          <TableHeading>{t('Owned by Me')}</TableHeading>
+          <IssueViewSection
+            visibility={GroupSearchViewVisibility.OWNER}
+            limit={10}
+            cursorQueryParam="mc"
+          />
+          <TableHeading>{t('Shared with Me')}</TableHeading>
+          <IssueViewSection
+            visibility={GroupSearchViewVisibility.ORGANIZATION}
+            limit={10}
+            cursorQueryParam="sc"
+          />
+        </Layout.Main>
+      </Layout.Body>
+    </Layout.Page>
+  );
+}
+
+const TableHeading = styled('h2')`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: ${p => p.theme.fontSizeExtraLarge};
+  margin-top: ${space(3)};
+  margin-bottom: ${space(1.5)};
+`;

static/app/views/issueList/issueViews/issueViewsList/issueViewsTable.tsx

@@ -0,0 +1,229 @@
+import {css} from '@emotion/react';
+import styled from '@emotion/styled';
+
+import InteractionStateLayer from 'sentry/components/interactionStateLayer';
+import Link from 'sentry/components/links/link';
+import LoadingError from 'sentry/components/loadingError';
+import {PanelTable} from 'sentry/components/panels/panelTable';
+import {FormattedQuery} from 'sentry/components/searchQueryBuilder/formattedQuery';
+import {getAbsoluteSummary} from 'sentry/components/timeRangeSelector/utils';
+import TimeSince from 'sentry/components/timeSince';
+import {Tooltip} from 'sentry/components/tooltip';
+import {IconLock, IconStar, IconUser} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
+import type {GroupSearchView} from 'sentry/views/issueList/types';
+import {getSortLabel} from 'sentry/views/issueList/utils';
+import {ProjectsRenderer} from 'sentry/views/traces/fieldRenderers';
+
+type IssueViewsTableProps = {
+  isError: boolean;
+  isPending: boolean;
+  views: GroupSearchView[];
+};
+
+function StarCellContent({isStarred}: {isStarred: boolean}) {
+  return <IconStar isSolid={isStarred} />;
+}
+
+function ProjectsCellContent({projects}: {projects: GroupSearchView['projects']}) {
+  const {projects: allProjects} = useProjects();
+
+  const projectSlugs = allProjects
+    .filter(project => projects.includes(parseInt(project.id, 10)))
+    .map(project => project.slug);
+
+  if (projects.length === 0) {
+    return t('My Projects');
+  }
+  if (projects.includes(-1)) {
+    return t('All Projects');
+  }
+  return <ProjectsRenderer projectSlugs={projectSlugs} maxVisibleProjects={5} />;
+}
+
+function EnvironmentsCellContent({
+  environments,
+}: {
+  environments: GroupSearchView['environments'];
+}) {
+  const environmentsLabel =
+    environments.length === 0 ? t('All') : environments.join(', ');
+
+  return (
+    <PositionedContent>
+      <Tooltip title={environmentsLabel}>{environmentsLabel}</Tooltip>
+    </PositionedContent>
+  );
+}
+
+function TimeCellContent({timeFilters}: {timeFilters: GroupSearchView['timeFilters']}) {
+  if (timeFilters.period) {
+    return timeFilters.period;
+  }
+
+  return getAbsoluteSummary(timeFilters.start, timeFilters.end, timeFilters.utc);
+}
+
+function SharingCellContent({visibility}: {visibility: GroupSearchView['visibility']}) {
+  if (visibility === 'organization') {
+    return (
+      <Tooltip title={t('Shared with organziation')} skipWrapper>
+        <PositionedContent>
+          <IconUser />
+        </PositionedContent>
+      </Tooltip>
+    );
+  }
+  return (
+    <Tooltip title={t('Private')} skipWrapper>
+      <PositionedContent>
+        <IconLock locked />
+      </PositionedContent>
+    </Tooltip>
+  );
+}
+
+function LastVisitedCellContent({
+  lastVisited,
+}: {
+  lastVisited: GroupSearchView['lastVisited'];
+}) {
+  if (!lastVisited) {
+    return '-';
+  }
+  return <PositionedTimeSince date={lastVisited} unitStyle="short" />;
+}
+
+export function IssueViewsTable({views, isPending, isError}: IssueViewsTableProps) {
+  const organization = useOrganization();
+
+  return (
+    <StyledPanelTable
+      disableHeaderBorderBottom
+      headers={[
+        '',
+        t('Name'),
+        t('Project'),
+        t('Query'),
+        t('Envs'),
+        t('Time'),
+        t('Sort'),
+        t('Sharing'),
+        'Last Viewed',
+      ]}
+      isLoading={isPending}
+      isEmpty={views.length === 0}
+    >
+      {isError && <LoadingError />}
+      {views.map((view, index) => (
+        <Row key={view.id} isFirst={index === 0}>
+          <RowHoverStateLayer />
+          <StarCell>
+            {/* TODO: Add isStarred when the API is update to include it */}
+            <StarCellContent isStarred />
+          </StarCell>
+          <Cell>
+            <RowLink to={`/organizations/${organization.slug}/issues/views/${view.id}/`}>
+              {view.name}
+            </RowLink>
+          </Cell>
+          <Cell>
+            <ProjectsCellContent projects={view.projects} />
+          </Cell>
+          <Cell>
+            <FormattedQuery query={view.query} />
+          </Cell>
+          <Cell>
+            <EnvironmentsCellContent environments={view.environments} />
+          </Cell>
+          <Cell>
+            <TimeCellContent timeFilters={view.timeFilters} />
+          </Cell>
+          <Cell>{getSortLabel(view.querySort, organization)}</Cell>
+          <Cell>
+            <SharingCellContent visibility={view.visibility} />
+          </Cell>
+          <Cell>
+            <LastVisitedCellContent lastVisited={view.lastVisited} />
+          </Cell>
+        </Row>
+      ))}
+    </StyledPanelTable>
+  );
+}
+
+const StyledPanelTable = styled(PanelTable)`
+  white-space: nowrap;
+  font-size: ${p => p.theme.fontSizeMedium};
+  overflow: auto;
+  grid-template-columns: 36px auto auto 1fr auto auto 105px 90px 115px;
+
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
+    overflow: hidden;
+  }
+
+  & > * {
+    padding: ${space(1)} ${space(2)};
+  }
+`;
+
+const Row = styled('div')<{isFirst: boolean}>`
+  display: grid;
+  position: relative;
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+  padding: 0;
+
+  ${p =>
+    p.isFirst &&
+    css`
+      border-top: 1px solid ${p.theme.border};
+    `}
+
+  &:not(:last-child) {
+    border-bottom: 1px solid ${p => p.theme.innerBorder};
+  }
+`;
+
+const Cell = styled('div')`
+  display: flex;
+  align-items: center;
+  padding: ${space(1)} ${space(2)};
+`;
+
+const StarCell = styled(Cell)`
+  padding: 0 0 0 ${space(2)};
+`;
+
+const RowHoverStateLayer = styled(InteractionStateLayer)``;
+
+const RowLink = styled(Link)`
+  color: ${p => p.theme.textColor};
+
+  &:hover {
+    color: ${p => p.theme.textColor};
+    text-decoration: underline;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+`;
+
+const PositionedTimeSince = styled(TimeSince)`
+  position: relative;
+`;
+
+const PositionedContent = styled('div')`
+  position: relative;
+  display: flex;
+  align-items: center;
+`;