[v16] Okta Status Page

web/packages/design/src/DataTable/DataTable.story.tsx

@@ -17,8 +17,7 @@
  */
 
 import React, { useState } from 'react';
-
-import ServersideSearchPanel from 'teleport/components/ServersideSearchPanel';
+import { ServersideSearchPanelWithPageIndicator } from 'teleport/components/ServersideSearchPanel';
 
 import { SortType, TableProps } from 'design/DataTable/types';
 
@@ -43,7 +42,7 @@ export const WithServersideProps = () => {
   };
   props.serversideProps = {
     serversideSearchPanel: (
-      <ServersideSearchPanel
+      <ServersideSearchPanelWithPageIndicator
         pageIndicators={{
           from: 1,
           to: allData.length,
@@ -76,7 +75,7 @@ export const WithServersidePropsEmpty = () => {
   };
   props.serversideProps = {
     serversideSearchPanel: (
-      <ServersideSearchPanel
+      <ServersideSearchPanelWithPageIndicator
         pageIndicators={{
           from: 1,
           to: 0,

web/packages/design/src/DataTable/InputSearch/InputSearch.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { JSX, SetStateAction } from 'react';
+import React, { JSX, SetStateAction, FormEvent } from 'react';
 import styled from 'styled-components';
 
 import {
@@ -28,28 +28,37 @@ import {
   ColorProps,
 } from 'design/system';
 
+const searchInputName = 'searchValue';
+
 export default function InputSearch({
   searchValue,
   setSearchValue,
   children,
   bigInputSize = false,
 }: Props) {
+  function submitSearch(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault(); // prevent form default
+
+    const formData = new FormData(e.currentTarget);
+    const searchValue = formData.get(searchInputName) as string;
+
+    setSearchValue(searchValue);
+  }
+
   return (
     <WrapperBackground bigSize={bigInputSize}>
-      <Wrapper>
+      <Form onSubmit={submitSearch}>
         <StyledInput
           bigInputSize={bigInputSize}
           placeholder="Search..."
           px={3}
-          value={searchValue}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setSearchValue(e.target.value)
-          }
+          defaultValue={searchValue}
+          name={searchInputName}
         />
         <ChildWrapperBackground>
           <ChildWrapper>{children}</ChildWrapper>
         </ChildWrapperBackground>
-      </Wrapper>
+      </Form>
     </WrapperBackground>
   );
 }
@@ -83,7 +92,7 @@ const ChildWrapperBackground = styled.div`
   border-radius: 0 200px 200px 0;
 `;
 
-const Wrapper = styled.div`
+const Form = styled.form`
   position: relative;
   display: flex;
   overflow: hidden;

web/packages/design/src/DataTable/types.ts

@@ -35,6 +35,22 @@ export type TableProps<T> = {
    */
   emptyHint?: string;
   pagination?: PaginationConfig<T>;
+  /**
+   * config for client searching.
+   * supports any table except when "serversideProps"
+   * field is defined
+   */
+  clientSearch?: {
+    /**
+     * By default, no initial search is applied (empty search),
+     * unless "initialSearchValue" is defined.
+     */
+    initialSearchValue: string;
+    /**
+     * After setting a new search value, this function will be called.
+     */
+    onSearchValueChange(searchString: string): void;
+  };
   isSearchable?: boolean;
   searchableProps?: Extract<keyof T, string>[];
   // customSearchMatchers contains custom functions to run when search matching.

web/packages/design/src/DataTable/useTable.ts

@@ -28,6 +28,7 @@ export default function useTable<T>({
   columns,
   pagination,
   showFirst,
+  clientSearch,
   searchableProps,
   customSearchMatchers = [],
   serversideProps,
@@ -50,8 +51,8 @@ export default function useTable<T>({
     }
 
     return {
-      data: serversideProps || disableFilter ? data : [],
-      searchValue: '',
+      data: [],
+      searchValue: clientSearch?.initialSearchValue || '',
       sort: col
         ? {
             key: (col.altSortKey || col.key) as string,
@@ -61,7 +62,7 @@ export default function useTable<T>({
         : null,
       pagination: pagination
         ? {
-            paginatedData: paginateData(data, pagination.pageSize),
+            paginatedData: paginateData([], pagination.pageSize),
             currentPage: 0,
             pagerPosition: pagination.pagerPosition,
             pageSize: pagination.pageSize || 15,
@@ -161,6 +162,9 @@ export default function useTable<T>({
 
   function setSearchValue(searchValue: string) {
     updateData(state.sort, searchValue, true /* resetCurrentPage */);
+    if (clientSearch?.onSearchValueChange) {
+      clientSearch.onSearchValueChange(searchValue);
+    }
   }
 
   function nextPage() {
@@ -211,6 +215,7 @@ export default function useTable<T>({
     fetching,
     serversideProps,
     customSort,
+    clientSearch,
     ...props,
   };
 }

web/packages/design/src/Flex/Flex.tsx

@@ -23,6 +23,8 @@ import {
   AlignItemsProps,
   justifyContent,
   JustifyContentProps,
+  flexBasis,
+  FlexBasisProps,
   flexWrap,
   FlexWrapProps,
   flexDirection,
@@ -39,13 +41,15 @@ interface FlexProps
     JustifyContentProps,
     FlexWrapProps,
     FlexDirectionProps,
+    FlexBasisProps,
     GapProps {}
 
 const Flex = styled(Box)<FlexProps>`
   display: flex;
   ${alignItems}
   ${justifyContent}
   ${flexWrap}
+  ${flexBasis}
   ${flexDirection}
   ${gap};
 `;

web/packages/design/src/system/index.ts

@@ -31,6 +31,8 @@ import {
   ColorProps,
   flex,
   FlexProps,
+  flexBasis,
+  type FlexBasisProps,
   flexDirection,
   FlexDirectionProps,
   flexWrap,
@@ -104,6 +106,8 @@ export {
   type ColorProps,
   flex,
   type FlexProps,
+  flexBasis,
+  type FlexBasisProps,
   flexDirection,
   type FlexDirectionProps,
   flexWrap,

web/packages/shared/components/AccessRequests/NewRequest/ResourceList/__snapshots__/ResourceList.story.test.tsx.snap

@@ -1750,11 +1750,12 @@ exports[`render Roles 1`] = `
       <div
         class="c3"
       >
-        <div
+        <form
           class="c4"
         >
           <input
             class="c5"
+            name="searchValue"
             placeholder="Search..."
             value=""
           />
@@ -1765,7 +1766,7 @@ exports[`render Roles 1`] = `
               class="c7"
             />
           </div>
-        </div>
+        </form>
       </div>
       <div
         class="c8 c9"

web/packages/shared/components/Search/SearchPanel.tsx

@@ -30,7 +30,6 @@ export function SearchPanel({
   updateSearch,
   pageIndicators,
   filter,
-  showSearchBar,
   disableSearch,
   hideAdvancedSearch,
   extraChildren,
@@ -39,7 +38,6 @@ export function SearchPanel({
   updateSearch(s: string): void;
   pageIndicators?: { from: number; to: number; total: number };
   filter: ResourceFilter;
-  showSearchBar: boolean;
   disableSearch: boolean;
   hideAdvancedSearch?: boolean;
   extraChildren?: JSX.Element;
@@ -56,43 +54,43 @@ export function SearchPanel({
     setIsAdvancedSearch(!isAdvancedSearch);
   }
 
-  function handleOnSubmit(e) {
-    e.preventDefault(); // prevent form default
+  function updateQueryForRefetching(newQuery: string) {
+    setQuery(newQuery);
 
     if (isAdvancedSearch) {
-      updateQuery(query);
+      updateQuery(newQuery);
       return;
     }
 
-    updateSearch(query);
+    updateSearch(newQuery);
   }
 
   return (
     <Flex
       justifyContent="space-between"
       alignItems="center"
       width="100%"
-      onSubmit={handleOnSubmit}
       mb={3}
     >
-      <Flex as="form" style={{ width: '100%' }} alignItems="center">
+      <Flex style={{ width: '100%' }} alignItems="center">
         <StyledFlex
           mr={3}
           alignItems="center"
           width="100%"
           className={disableSearch ? 'disabled' : ''}
         >
-          {showSearchBar && (
-            <InputSearch searchValue={query} setSearchValue={setQuery}>
-              {!hideAdvancedSearch && (
-                <AdvancedSearchToggle
-                  isToggled={isAdvancedSearch}
-                  onToggle={onToggle}
-                  px={3}
-                />
-              )}
-            </InputSearch>
-          )}
+          <InputSearch
+            searchValue={query}
+            setSearchValue={updateQueryForRefetching}
+          >
+            {!hideAdvancedSearch && (
+              <AdvancedSearchToggle
+                isToggled={isAdvancedSearch}
+                onToggle={onToggle}
+                px={3}
+              />
+            )}
+          </InputSearch>
         </StyledFlex>
       </Flex>
       <Flex alignItems="center">

web/packages/shared/components/ToolTip/HoverTooltip.tsx

@@ -19,6 +19,7 @@
 import React, { PropsWithChildren, useState } from 'react';
 import styled from 'styled-components';
 import { Popover, Flex, Text } from 'design';
+import { JustifyContentProps, FlexBasisProps } from 'design/system';
 
 type OriginProps = {
   vertical: string;
@@ -32,7 +33,8 @@ export const HoverTooltip: React.FC<
     className?: string;
     anchorOrigin?: OriginProps;
     transformOrigin?: OriginProps;
-    justifyContentProps?: { justifyContent: string };
+    justifyContentProps?: JustifyContentProps;
+    flexBasisProps?: FlexBasisProps;
   }>
 > = ({
   tipContent,
@@ -42,6 +44,7 @@ export const HoverTooltip: React.FC<
   anchorOrigin = { vertical: 'top', horizontal: 'center' },
   transformOrigin = { vertical: 'bottom', horizontal: 'center' },
   justifyContentProps = {},
+  flexBasisProps = {},
 }) => {
   const [anchorEl, setAnchorEl] = useState<Element | undefined>();
   const open = Boolean(anchorEl);
@@ -80,6 +83,7 @@ export const HoverTooltip: React.FC<
       onMouseLeave={handlePopoverClose}
       className={className}
       {...justifyContentProps}
+      {...flexBasisProps}
     >
       {children}
       <Popover

web/packages/teleport/src/Audit/Audit.story.test.tsx

@@ -23,8 +23,8 @@ import { LoadedSample, AllPossibleEvents } from './Audit.story';
 
 test('loaded audit log screen', async () => {
   const { container } = render(<LoadedSample />);
-  await screen.findByText(/Audit Log/);
-  expect(container.firstChild).toMatchSnapshot();
+  await screen.findAllByText(/Showing/);
+  expect(container).toMatchSnapshot();
 });
 
 test('list of all events', async () => {

web/packages/teleport/src/Audit/Audit.story.tsx

@@ -32,6 +32,7 @@ export default {
 
 export const LoadedSample = () => {
   const ctx = new Context();
+  ctx.clusterService.fetchClusters = () => Promise.resolve([]);
   ctx.auditService.fetchEvents = () =>
     Promise.resolve({ events: eventsSample, startKey: '' });
 
@@ -40,6 +41,7 @@ export const LoadedSample = () => {
 
 export const LoadedFetchMore = () => {
   const ctx = new Context();
+  ctx.clusterService.fetchClusters = () => Promise.resolve([]);
   ctx.auditService.fetchEvents = () =>
     Promise.resolve({ events, startKey: 'any-text' });
 
@@ -48,12 +50,14 @@ export const LoadedFetchMore = () => {
 
 export const Processing = () => {
   const ctx = new Context();
+  ctx.clusterService.fetchClusters = () => Promise.resolve([]);
   ctx.auditService.fetchEvents = () => new Promise(() => null);
   return render(ctx);
 };
 
 export const Failed = () => {
   const ctx = new Context();
+  ctx.clusterService.fetchClusters = () => Promise.resolve([]);
   ctx.auditService.fetchEvents = () =>
     Promise.reject(new Error('server error'));
   return render(ctx);