Safari fixes (gravitational#192)

* Safari fixes
hatched · Nov 12, 2020 · d6ad36c · d6ad36c
1 parent 161d678
commit d6ad36c
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 40 deletions.
diff --git a/web/packages/teleport/src/Audit/Audit.tsx b/web/packages/teleport/src/Audit/Audit.tsx
@@ -63,8 +63,8 @@ export function Audit(props: ReturnType<typeof useAuditEvents>) {
           onChange={setRange}
         />
       </FeatureHeader>
-      <Flex mb={4} alignItems="center" justifyContent="flex-start">
-        <InputSearch height="30px" mr="3" onChange={setSearchValue} />
+      <Flex mb={4} alignItems="center" flex="0 0 auto" justifyContent="flex-start">
+        <InputSearch  mr="3" onChange={setSearchValue} />
       </Flex>
       {overflow && (
         <Danger>

diff --git a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
@@ -156,6 +156,7 @@ exports[`loaded 1`] = `
 .c6 {
   box-sizing: border-box;
   margin-bottom: 24px;
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -377,7 +378,6 @@ exports[`loaded 1`] = `
   padding-left: 16px;
   padding-right: 16px;
   color: rgba(255,255,255,0.87);
-  height: 30px;
 }
 
 .c7:hover {
@@ -413,7 +413,7 @@ exports[`loaded 1`] = `
       width="auto"
     >
       <span>
-        Today
+        7 days
         <span
           class="c4 c5 icon icon-caret-down "
           color="text.primary"
@@ -428,7 +428,6 @@ exports[`loaded 1`] = `
     <input
       class="c7"
       color="text.primary"
-      height="30px"
       placeholder="SEARCH..."
       value=""
     />
@@ -526,12 +525,12 @@ exports[`loaded 1`] = `
           <td
             style="word-break: break-word;"
           >
-            User [alex] made a request to kubernetes cluster [clusterOne]
+            User [alex] made a request to kubernetes cluster [gke_teleport-a]
           </td>
           <td
             style="min-width: 120px;"
           >
-            2020-10-30 17:28:14
+            2020-11-12 20:35:44
           </td>
           <td
             align="right"
@@ -1919,6 +1918,7 @@ exports[`overflow 1`] = `
 .c6 {
   box-sizing: border-box;
   margin-bottom: 24px;
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -2103,7 +2103,6 @@ exports[`overflow 1`] = `
   padding-left: 16px;
   padding-right: 16px;
   color: rgba(255,255,255,0.87);
-  height: 30px;
 }
 
 .c7:hover {
@@ -2139,7 +2138,7 @@ exports[`overflow 1`] = `
       width="auto"
     >
       <span>
-        Today
+        7 days
         <span
           class="c4 c5 icon icon-caret-down "
           color="text.primary"
@@ -2154,7 +2153,6 @@ exports[`overflow 1`] = `
     <input
       class="c7"
       color="text.primary"
-      height="30px"
       placeholder="SEARCH..."
       value=""
     />

diff --git a/web/packages/teleport/src/Audit/fixtures/index.ts b/web/packages/teleport/src/Audit/fixtures/index.ts
@@ -433,16 +433,25 @@ export const events = [
     user: 'alex',
   },
   {
+    'addr.local': '127.0.0.1:3027',
+    'addr.remote': '[::1]:43026',
     code: 'T3009I',
-    kubernetes_cluster: 'clusterOne',
     ei: 0,
-    'addr.local': '172.31.28.130:3022',
-    'addr.remote': '151.181.228.114:51752',
-    event: 'exec',
+    event: 'kube.request',
+    kubernetes_cluster: 'gke_teleport-a',
+    login: 'awly',
     namespace: 'default',
-    sid: '8d57a9d5-3848-5ce2-a326-85eb4a6d2eed',
-    time: '2020-10-30T17:28:14.705Z',
-    uid: '8ea5be3d-07b1-4308-8e0d-2d2ec57cbb20',
+    proto: 'kube',
+    request_path: '/api/v1/namespaces/teletest/pods/test-pod',
+    resource_api_group: 'core/v1',
+    resource_kind: 'pods',
+    resource_name: 'test-pod',
+    resource_namespace: 'teletest',
+    response_code: 200,
+    server_id: '9b67377e-d61e-4865-96d6-fa71989fd9e9',
+    time: '2020-11-12T20:35:44.978Z',
+    uid: '8c1459a8-9199-4d25-bc5d-38e000ddd9ab',
     user: 'alex',
+    verb: 'GET',
   },
 ].map(makeEvent);
diff --git a/web/packages/teleport/src/Nodes/Nodes.tsx b/web/packages/teleport/src/Nodes/Nodes.tsx
@@ -72,8 +72,8 @@ export function Nodes(props: State) {
           onClick={showAddNode}
         />
       </FeatureHeader>
-      <Flex mb={4} alignItems="center" justifyContent="space-between">
-        <InputSearch height="30px" mr="3" onChange={setSearchValue} />
+      <Flex mb={4} alignItems="center" flex="0 0 auto" justifyContent="space-between">
+        <InputSearch mr="3" onChange={setSearchValue} />
         <QuickLaunch width="280px" onPress={onSshEnter} />
       </Flex>
       {attempt.isFailed && <Danger>{attempt.message} </Danger>}

diff --git a/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap b/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
@@ -70,6 +70,7 @@ exports[`failed 1`] = `
 .c4 {
   box-sizing: border-box;
   margin-bottom: 24px;
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -187,7 +188,6 @@ exports[`failed 1`] = `
   padding-left: 16px;
   padding-right: 16px;
   color: rgba(255,255,255,0.87);
-  height: 30px;
 }
 
 .c5:hover {
@@ -231,7 +231,6 @@ exports[`failed 1`] = `
     <input
       class="c5"
       color="text.primary"
-      height="30px"
       placeholder="SEARCH..."
       value=""
     />
@@ -408,6 +407,7 @@ exports[`loaded 1`] = `
 .c4 {
   box-sizing: border-box;
   margin-bottom: 24px;
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -525,7 +525,6 @@ exports[`loaded 1`] = `
   padding-left: 16px;
   padding-right: 16px;
   color: rgba(255,255,255,0.87);
-  height: 30px;
 }
 
 .c5:hover {
@@ -697,7 +696,6 @@ exports[`loaded 1`] = `
     <input
       class="c5"
       color="text.primary"
-      height="30px"
       placeholder="SEARCH..."
       value=""
     />

diff --git a/web/packages/teleport/src/Recordings/Recordings.tsx b/web/packages/teleport/src/Recordings/Recordings.tsx
@@ -63,8 +63,8 @@ export function Recordings(props: ReturnType<typeof useAuditEvents>) {
           onChange={setRange}
         />
       </FeatureHeader>
-      <Flex mb={4} alignItems="center" justifyContent="flex-start">
-        <InputSearch height="30px" mr="3" onChange={setSearchValue} />
+      <Flex mb={4} alignItems="center" flex="0 0 auto" justifyContent="flex-start">
+        <InputSearch  mr="3" onChange={setSearchValue} />
       </Flex>
       {overflow && (
         <Danger>

diff --git a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
@@ -143,6 +143,7 @@ exports[`rendering of Session Recordings 1`] = `
 .c6 {
   box-sizing: border-box;
   margin-bottom: 24px;
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -327,7 +328,6 @@ exports[`rendering of Session Recordings 1`] = `
   padding-left: 16px;
   padding-right: 16px;
   color: rgba(255,255,255,0.87);
-  height: 30px;
 }
 
 .c7:hover {
@@ -363,7 +363,7 @@ exports[`rendering of Session Recordings 1`] = `
       width="auto"
     >
       <span>
-        Today
+        7 days
         <span
           class="c4 c5 icon icon-caret-down "
           color="text.primary"
@@ -378,7 +378,6 @@ exports[`rendering of Session Recordings 1`] = `
     <input
       class="c7"
       color="text.primary"
-      height="30px"
       placeholder="SEARCH..."
       value=""
     />
@@ -705,6 +704,7 @@ exports[`rendering of Session Recordings 2`] = `
 .c6 {
   box-sizing: border-box;
   margin-bottom: 24px;
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -889,7 +889,6 @@ exports[`rendering of Session Recordings 2`] = `
   padding-left: 16px;
   padding-right: 16px;
   color: rgba(255,255,255,0.87);
-  height: 30px;
 }
 
 .c7:hover {
@@ -926,7 +925,7 @@ exports[`rendering of Session Recordings 2`] = `
         width="auto"
       >
         <span>
-          Today
+          7 days
           <span
             class="c4 c5 icon icon-caret-down "
             color="text.primary"
@@ -941,7 +940,6 @@ exports[`rendering of Session Recordings 2`] = `
       <input
         class="c7"
         color="text.primary"
-        height="30px"
         placeholder="SEARCH..."
         value=""
       />

diff --git a/web/packages/teleport/src/Users/UserList/UserList.tsx b/web/packages/teleport/src/Users/UserList/UserList.tsx
@@ -72,8 +72,8 @@ export default function UserList({
 
   return (
     <>
-      <Flex mb={4}>
-        <InputSearch height="30px" mr="3" onChange={onSearchChange} />
+      <Flex flex="0 0 auto" mb={4}>
+        <InputSearch onChange={onSearchChange} />
       </Flex>
       <StyledTable {...tableProps}>
         <Column

diff --git a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap
@@ -148,6 +148,7 @@ exports[`success state 1`] = `
 .c4 {
   box-sizing: border-box;
   margin-bottom: 24px;
+  flex: 0 0 auto;
   display: flex;
 }
 
@@ -325,11 +326,9 @@ exports[`success state 1`] = `
   height: 32px;
   transition: all .2s;
   background: #222C59;
-  margin-right: 16px;
   padding-left: 16px;
   padding-right: 16px;
   color: rgba(255,255,255,0.87);
-  height: 30px;
 }
 
 .c5:hover {
@@ -378,7 +377,6 @@ exports[`success state 1`] = `
       <input
         class="c5"
         color="text.primary"
-        height="30px"
         placeholder="SEARCH..."
         value=""
       />

diff --git a/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx b/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx
@@ -54,8 +54,8 @@ export default function ResourceEditor(props) {
 
   return (
     <Dialog open={true} dialogCss={dialogCss} onClose={onClose}>
-      <Flex flex="1" m={-5}>
-        <Flex flex="1" height="100%" p="5" flexDirection="column">
+      <Flex flex="1">
+        <Flex flex="1" m={5} flexDirection="column">
           <DialogHeader>
             <DialogTitle typography="body1" bold>
               {title}
@@ -90,7 +90,7 @@ export default function ResourceEditor(props) {
             justifyContent="space-between"
             height="100%"
             width="300px"
-            p="5"
+            p={5}
             bg="primary.light"
           >
             <Box>
@@ -134,6 +134,7 @@ const dialogCss = () => `
   height: 80%;
   width: calc(100% - 20%);
   max-width: 1400px;
+  padding: 0;
 `;
 
 function useEditor(initial) {

diff --git a/web/packages/teleport/src/useAuditEvents.ts b/web/packages/teleport/src/useAuditEvents.ts
@@ -22,7 +22,7 @@ import Ctx from 'teleport/teleportContext';
 export default function useEvents(ctx: Ctx, clusterId: string) {
   const rangeOptions = useMemo(() => getRangeOptions(), []);
   const [searchValue, setSearchValue] = React.useState('');
-  const [range, setRange] = useState(rangeOptions[0]);
+  const [range, setRange] = useState(rangeOptions[1]);
   const [attempt, attemptActions] = useAttempt({ isProcessing: true });
   const [results, setResults] = useState({
     events: [],