Lisa/manual testing bugs (gravitational#189)

* Allow searching user list by auth types
* Expand parent when children gets selected before parent
* Add back requestId param for renewSession api route (got lost during merge)
* Update Users storybook to include different write permissions
* Roles: hide edit/delete button depending on permission
* UploadForm style update
* Allow audit log searching for created dates
* Side nav, expand parent if child is selected first
* Css update and update snapshot
* Display view documentation when user can't create app
* Remove bg color for quicklaunch label

Co-authored-by: Alexey Kontsevoy <[email protected]>

web/packages/design/src/DataTable/StyledTable.jsx

@@ -77,12 +77,11 @@ export const StyledTable = styled.table(
 
   tbody tr:hover {
     background-color: ${darken(props.theme.colors.primary.lighter, 0.14)};
-
     :last-child {
       td:first-child {
         border-bottom-left-radius: 8px;
       }
-      
+
       td:last-child {
         border-bottom-right-radius: 8px;
       }

web/packages/design/src/DataTable/Table.jsx

@@ -69,7 +69,7 @@ class Table extends React.Component {
     }
 
     return (
-      <tbody>
+      <tfoot>
         <tr>
           <td colSpan={children ? children.length : 0}>
             <Text
@@ -87,7 +87,7 @@ class Table extends React.Component {
             </Text>
           </td>
         </tr>
-      </tbody>
+      </tfoot>
     );
   }
 

web/packages/shared/components/Select/Select.tsx

@@ -100,6 +100,7 @@ const StyledSelect = styled.div`
   .react-select__control {
     &:hover {
       border-color: transparent;
+      cursor: pointer;
     }
   }
 

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

@@ -42,6 +42,18 @@ export const Empty = () => {
 
   ctx.isEnterprise = true;
   ctx.storeUser.setState({ acl });
+  ctx.storeUser.state.acl.tokens.create = true;
+  ctx.appService.fetchApps = () => Promise.resolve([]);
+  return render(ctx);
+};
+
+export const EmptyReadOnly = () => {
+  const ctx = new Context();
+  const acl = makeAcl(sample.acl);
+
+  ctx.isEnterprise = true;
+  ctx.storeUser.setState({ acl });
+  ctx.storeUser.state.acl.tokens.create = false;
   ctx.appService.fetchApps = () => Promise.resolve([]);
   return render(ctx);
 };

web/packages/teleport/src/Apps/Apps.tsx

@@ -35,6 +35,7 @@ export default function Container() {
 
 export function Apps(props: State) {
   const {
+    clusterId,
     isEnterprise,
     isAddAppVisible,
     showAddApp,
@@ -66,6 +67,7 @@ export function Apps(props: State) {
       {hasApps && <AppList apps={apps} />}
       {isEmpty && (
         <Empty
+          clusterId={clusterId}
           isEnterprise={isEnterprise}
           canCreate={canCreate}
           onCreate={showAddApp}

web/packages/teleport/src/Apps/Empty/Empty.tsx

@@ -22,6 +22,34 @@ import ButtonAdd from './../ButtonAdd';
 import { emptyPng } from './assets';
 
 export default function Empty(props: Props) {
+  // always show the welcome for enterprise users who have access to create an app
+  if (!props.canCreate) {
+    return (
+      <Box
+        p="8"
+        m="0 auto"
+        width="100%"
+        maxWidth="600px"
+        textAlign="center"
+        color="text.primary"
+        bg="primary.light"
+        borderRadius="12px"
+        {...props}
+      >
+        <Text typography="h2" mb="3">
+          No Applications Found
+        </Text>
+        <Text>
+          There are no applications for the "
+          <Text as="span" bold>
+            {props.clusterId}
+          </Text>
+          " cluster
+        </Text>
+      </Box>
+    );
+  }
+
   return (
     <Card maxWidth="700px" mx="auto" py={4} as={Flex} alignItems="center">
       <Box mx="4">
@@ -52,8 +80,9 @@ export default function Empty(props: Props) {
   );
 }
 
-type Props = {
+export type Props = {
   isEnterprise: boolean;
   canCreate: boolean;
   onCreate(): void;
+  clusterId: string;
 };

web/packages/teleport/src/Apps/useApps.ts

@@ -47,6 +47,7 @@ export default function useApps() {
   }, [clusterId]);
 
   return {
+    clusterId,
     isEnterprise,
     isAddAppVisible,
     hideAddApp,

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

@@ -23,6 +23,7 @@ import { Event } from 'teleport/services/audit';
 import { ActionCell, TimeCell, DescCell } from './EventListCells';
 import TypeCell from './EventTypeCell';
 import EventDialog from '../EventDialog';
+import { displayDateTime } from 'shared/services/loc';
 
 export default function EventList(props: Props) {
   const { clusterId, events = [], search = '' } = props;
@@ -63,7 +64,11 @@ export default function EventList(props: Props) {
     const filtered = events.filter(obj =>
       isMatch(obj, search, {
         searchableProps: searchableProps,
-        cb: null,
+        cb: (target, search, prop) => {
+          if (prop === 'time') {
+            return displayDateTime(target).includes(search);
+          }
+        },
       })
     );
 

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

@@ -2173,7 +2173,7 @@ exports[`overflow 1`] = `
           <th />
         </tr>
       </thead>
-      <tbody>
+      <tfoot>
         <tr>
           <td
             colspan="4"
@@ -2191,7 +2191,7 @@ exports[`overflow 1`] = `
             </div>
           </td>
         </tr>
-      </tbody>
+      </tfoot>
     </table>
   </div>
 </div>

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

@@ -1,12 +1,9 @@
 /*
 Copyright 2020 Gravitational, Inc.
-
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
-
     http://www.apache.org/licenses/LICENSE-2.0
-
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -15,30 +12,38 @@ limitations under the License.
 */
 
 import React from 'react';
-import { Context, ContextProvider } from 'teleport';
-import AuthConnectors from './AuthConnectors';
+import { AuthConnectors } from './AuthConnectors';
 
 export default {
   title: 'Teleport/AuthConnectors',
 };
 
+export function Processing() {
+  const attempt = {
+    isProcessing: true,
+    isFailed: false,
+    isSuccess: false,
+    message: '',
+  };
+  return <AuthConnectors {...sample} attempt={attempt} />;
+}
+
 export function Loaded() {
-  const ctx = new Context();
-  ctx.resourceService.fetchAuthConnectors = () => Promise.resolve(connectors);
-  return render(ctx);
+  return <AuthConnectors {...sample} />;
 }
 
 export function Empty() {
-  const ctx = new Context();
-  ctx.resourceService.fetchAuthConnectors = () => Promise.resolve([]);
-  return render(ctx);
+  return <AuthConnectors {...sample} items={[]} />;
 }
 
 export function Failed() {
-  const ctx = new Context();
-  ctx.resourceService.fetchAuthConnectors = () =>
-    Promise.reject(new Error('failed to load'));
-  return render(ctx);
+  const attempt = {
+    isProcessing: false,
+    isFailed: true,
+    isSuccess: false,
+    message: 'some error message',
+  };
+  return <AuthConnectors {...sample} attempt={attempt} />;
 }
 
 const connectors = [
@@ -68,10 +73,14 @@ const connectors = [
   },
 ];
 
-function render(ctx: Context) {
-  return (
-    <ContextProvider ctx={ctx}>
-      <AuthConnectors />
-    </ContextProvider>
-  );
-}
+const sample = {
+  attempt: {
+    isProcessing: false,
+    isFailed: false,
+    isSuccess: true,
+    message: '',
+  },
+  items: connectors,
+  remove: () => null,
+  save: () => null,
+};

web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx

@@ -1,12 +1,9 @@
 /*
 Copyright 2020 Gravitational, Inc.
-
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
-
     http://www.apache.org/licenses/LICENSE-2.0
-
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -28,36 +25,43 @@ import EmptyList from './EmptyList';
 import ConnectorList from './ConnectorList';
 import DeleteConnectorDialog from './DeleteConnectorDialog';
 import AddMenu from './AddMenu';
-import useAuthConnectors from './useAuthConnectors';
+import useAuthConnectors, { State } from './useAuthConnectors';
 import templates from './templates';
 
-export default function AuthConnectors() {
-  const connectors = useAuthConnectors();
-  const { message, isProcessing, isFailed, isSuccess } = connectors.attempt;
-  const isEmpty = connectors.items.length === 0;
-  const resources = useResources(connectors.items, templates);
+export default function Container() {
+  const state = useAuthConnectors();
+  return <AuthConnectors {...state} />;
+}
+
+export function AuthConnectors(props: State) {
+  const { attempt, items, remove, save } = props;
+  const { message, isProcessing, isFailed, isSuccess } = attempt;
+  const isEmpty = items.length === 0;
+  const resources = useResources(items, templates);
 
   const title =
     resources.status === 'creating'
       ? 'Creating a new auth connector'
       : 'Editing auth connector';
 
-  function remove() {
-    return connectors.remove(resources.item);
+  function handleOnRemove() {
+    return remove(resources.item);
   }
 
-  function save(content: string) {
+  function handleOnSave(content: string) {
     const isNew = resources.status === 'creating';
-    return connectors.save(content, isNew);
+    return save(content, isNew);
   }
 
   return (
     <FeatureBox>
       <FeatureHeader>
         <FeatureHeaderTitle>Auth Connectors</FeatureHeaderTitle>
-        <Box ml="auto" alignSelf="center" width="240px">
-          <AddMenu onClick={resources.create} />
-        </Box>
+        {isSuccess && (
+          <Box ml="auto" alignSelf="center" width="240px">
+            <AddMenu onClick={resources.create} />
+          </Box>
+        )}
       </FeatureHeader>
       {isFailed && <Danger>{message} </Danger>}
       {isProcessing && (
@@ -75,7 +79,7 @@ export default function AuthConnectors() {
           {!isEmpty && (
             <ConnectorList
               flex="1"
-              items={connectors.items}
+              items={items}
               onEdit={resources.edit}
               onDelete={resources.remove}
             />
@@ -113,7 +117,7 @@ export default function AuthConnectors() {
       {(resources.status === 'creating' || resources.status === 'editing') && (
         <ResourceEditor
           title={title}
-          onSave={save}
+          onSave={handleOnSave}
           text={resources.item.content}
           name={resources.item.name}
           isNew={resources.status === 'creating'}
@@ -124,7 +128,7 @@ export default function AuthConnectors() {
         <DeleteConnectorDialog
           name={resources.item.name}
           onClose={resources.disregard}
-          onDelete={remove}
+          onDelete={handleOnRemove}
         />
       )}
     </FeatureBox>

web/packages/teleport/src/AuthConnectors/useAuthConnectors.tsx

@@ -49,3 +49,5 @@ export default function useAuthConnectors() {
     remove,
   };
 }
+
+export type State = ReturnType<typeof useAuthConnectors>;

web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap

@@ -282,7 +282,6 @@ exports[`render DocumentNodes 1`] = `
   border: 1px solid;
   border-radius: 4px;
   border-color: rgba(255,255,255,0.24);
-  background-color: #111b48;
 }
 
 .c11 {
@@ -393,6 +392,7 @@ exports[`render DocumentNodes 1`] = `
 
 .c7 .react-select__control:hover {
   border-color: transparent;
+  cursor: pointer;
 }
 
 .c7 .react-select__control--is-focused {

web/packages/teleport/src/Console/FileTransfer/UploadForm/UploadForm.tsx

@@ -158,8 +158,9 @@ export default class UploadForm extends React.Component<PropType> {
           ref={this.refDropzone}
           onDragOver={e => e.preventDefault()}
           onDrop={this.onDrop}
+          onClick={this.onOpenFilePicker}
         >
-          <a onClick={this.onOpenFilePicker}>{dropZoneText}</a>
+          {dropZoneText}
         </Dropzone>
         <Elements.Button disabled={isDldBtnDisabled} onClick={this.onUpload}>
           Upload
@@ -179,4 +180,5 @@ const Dropzone = styled.div`
   line-height: 72px;
   text-align: center;
   text-transform: uppercase;
+  cursor: pointer;
 `;