Refactor: rename FE component (#2275)

* refactor: rename `BulletedLogType` to `BulletedValue` * fix: rename test file Co-authored-by: Alex <[email protected]>
glerb · Dec 15, 2020 · 7ba72fd · 7ba72fd
1 parent b51a4a2
commit 7ba72fd
Show file tree

Hide file tree

Showing 16 changed files with 40 additions and 40 deletions.
diff --git a/.../BulletedLogType/BulletedLogType.test.tsx → ...ents/BulletedValue/BulletedValue.test.tsx b/.../BulletedLogType/BulletedLogType.test.tsx → ...ents/BulletedValue/BulletedValue.test.tsx
@@ -18,11 +18,11 @@
 
 import React from 'react';
 import { render } from 'test-utils';
-import BulletedLogType from './BulletedLogType';
+import BulletedValue from './BulletedValue';
 
-describe('BulletedLogType', () => {
+describe('BulletedValue', () => {
   it('renders the same color for the same log type', () => {
-    const { container } = render(<BulletedLogType logType="AWS.EC2" />);
+    const { container } = render(<BulletedValue value="AWS.EC2" />);
 
     expect(container).toMatchSnapshot();
   });

diff --git a/...nents/BulletedLogType/BulletedLogType.tsx → ...omponents/BulletedValue/BulletedValue.tsx b/...nents/BulletedLogType/BulletedLogType.tsx → ...omponents/BulletedValue/BulletedValue.tsx
@@ -20,25 +20,25 @@ import React from 'react';
 import { Box, Flex } from 'pouncejs';
 import { stringToPaleColor } from 'Helpers/colors';
 
-interface BulletedLogTypeProps {
-  logType: string;
+interface BulletedValueProps {
+  value: string;
 }
 
-const BulletedLogType: React.FC<BulletedLogTypeProps> = ({ logType }) => {
+const BulletedValue: React.FC<BulletedValueProps> = ({ value }) => {
   return (
     <Flex spacing={2} align="center">
       <Box
         as="span"
         width={12}
         height={12}
-        backgroundColor={stringToPaleColor(logType) as any}
+        backgroundColor={stringToPaleColor(value) as any}
         borderRadius="circle"
       />
       <Box as="span" fontSize="small" fontWeight="normal" lineHeight="typical">
-        {logType}
+        {value}
       </Box>
     </Flex>
   );
 };
 
-export default BulletedLogType;
+export default BulletedValue;
diff --git a/...snapshots__/BulletedLogType.test.tsx.snap → ...__snapshots__/BulletedValue.test.tsx.snap b/...snapshots__/BulletedLogType.test.tsx.snap → ...__snapshots__/BulletedValue.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BulletedLogType renders the same color for the same log type 1`] = `
+exports[`BulletedValue renders the same color for the same log type 1`] = `
 .panther-2 {
   display: -webkit-box;
   display: -webkit-flex;

diff --git a/web/src/components/BulletedLogType/index.tsx → web/src/components/BulletedValue/index.tsx b/web/src/components/BulletedLogType/index.tsx → web/src/components/BulletedValue/index.tsx
@@ -16,4 +16,4 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-export { default } from './BulletedLogType';
+export { default } from './BulletedValue';
diff --git a/...dLogTypeList/BulletedLogTypeList.test.tsx → ...letedValueList/BulletedValueList.test.tsx b/...dLogTypeList/BulletedLogTypeList.test.tsx → ...letedValueList/BulletedValueList.test.tsx
@@ -18,12 +18,12 @@
 
 import React from 'react';
 import { render, fireEvent } from 'test-utils';
-import BulletedLogTypeList from './BulletedLogTypeList';
+import BulletedValueList from './BulletedValueList';
 
-describe('BulletedLogTypeList', () => {
+describe('BulletedValueList', () => {
   it('matches snapshots', () => {
     const { container, getByText } = render(
-      <BulletedLogTypeList logTypes={['a', 'b', 'c', 'd']} limit={2} />
+      <BulletedValueList values={['a', 'b', 'c', 'd']} limit={2} />
     );
     expect(container).toMatchSnapshot();
 

diff --git a/...lletedLogTypeList/BulletedLogTypeList.tsx → ...s/BulletedValueList/BulletedValueList.tsx b/...lletedLogTypeList/BulletedLogTypeList.tsx → ...s/BulletedValueList/BulletedValueList.tsx
@@ -19,23 +19,23 @@
 import React from 'react';
 import { Flex } from 'pouncejs';
 import LimitItemDisplay from 'Components/LimitItemDisplay/LimitItemDisplay';
-import BulletedLogType from 'Components/BulletedLogType';
+import BulletedValue from 'Components/BulletedValue';
 
-interface BulletedLogTypeListProps {
-  logTypes: string[];
+interface BulletedValueListProps {
+  values: string[];
   limit?: number;
 }
 
-const BulletedLogTypeList: React.FC<BulletedLogTypeListProps> = ({ logTypes, limit = 1000 }) => {
+const BulletedValueList: React.FC<BulletedValueListProps> = ({ values, limit = 1000 }) => {
   return (
     <Flex align="center" spacing={2} flexWrap="wrap">
       <LimitItemDisplay limit={limit}>
-        {logTypes.map(logType => (
-          <BulletedLogType key={logType} logType={logType} />
+        {values.map(logType => (
+          <BulletedValue key={logType} value={logType} />
         ))}
       </LimitItemDisplay>
     </Flex>
   );
 };
 
-export default BulletedLogTypeList;
+export default BulletedValueList;
diff --git a/...shots__/BulletedLogTypeList.test.tsx.snap → ...apshots__/BulletedValueList.test.tsx.snap b/...shots__/BulletedLogTypeList.test.tsx.snap → ...apshots__/BulletedValueList.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BulletedLogTypeList matches snapshots 1`] = `
+exports[`BulletedValueList matches snapshots 1`] = `
 .panther-8 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -127,7 +127,7 @@ exports[`BulletedLogTypeList matches snapshots 1`] = `
 </div>
 `;
 
-exports[`BulletedLogTypeList matches snapshots 2`] = `
+exports[`BulletedValueList matches snapshots 2`] = `
 .panther-8 {
   display: -webkit-box;
   display: -webkit-flex;

diff --git a/.../components/BulletedLogTypeList/index.tsx → ...rc/components/BulletedValueList/index.tsx b/.../components/BulletedLogTypeList/index.tsx → ...rc/components/BulletedValueList/index.tsx
@@ -16,4 +16,4 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-export { default } from './BulletedLogTypeList';
+export { default } from './BulletedValueList';
diff --git a/web/src/components/cards/AlertCard/PolicyAlertCard/PolicyAlertCard.tsx b/web/src/components/cards/AlertCard/PolicyAlertCard/PolicyAlertCard.tsx
@@ -24,7 +24,7 @@ import SeverityBadge from 'Components/badges/SeverityBadge';
 import React from 'react';
 import urls from 'Source/urls';
 import RelatedDestinations from 'Components/RelatedDestinations';
-import BulletedLogTypeList from 'Components/BulletedLogTypeList';
+import BulletedValueList from 'Components/BulletedValueList';
 import { AlertSummaryFull } from 'Source/graphql/fragments/AlertSummaryFull.generated';
 import { formatDatetime } from 'Helpers/utils';
 import { useListComplianceSourceNames } from 'Source/graphql/queries';
@@ -109,7 +109,7 @@ const PolicyAlertCard: React.FC<PolicyAlertCardProps> = ({
           />
           <GenericItemCard.Value
             label="Resource Types"
-            value={<BulletedLogTypeList logTypes={detectionData.resourceTypes} limit={2} />}
+            value={<BulletedValueList values={detectionData.resourceTypes} limit={2} />}
           />
           <Flex ml="auto" mr={0} align="flex-end" spacing={2}>
             <SeverityBadge severity={alert.severity} />

diff --git a/web/src/components/cards/AlertCard/RuleAlertCard/RuleAlertCard.tsx b/web/src/components/cards/AlertCard/RuleAlertCard/RuleAlertCard.tsx
@@ -24,7 +24,7 @@ import SeverityBadge from 'Components/badges/SeverityBadge';
 import React from 'react';
 import urls from 'Source/urls';
 import RelatedDestinations from 'Components/RelatedDestinations';
-import BulletedLogTypeList from 'Components/BulletedLogTypeList';
+import BulletedValueList from 'Components/BulletedValueList';
 import { AlertSummaryFull } from 'Source/graphql/fragments/AlertSummaryFull.generated';
 import { formatDatetime } from 'Helpers/utils';
 import useAlertDestinations from 'Hooks/useAlertDestinations';
@@ -106,7 +106,7 @@ const RuleAlertCard: React.FC<RuleAlertCardProps> = ({
           />
           <GenericItemCard.Value
             label="Log Types"
-            value={<BulletedLogTypeList logTypes={detectionData.logTypes} limit={2} />}
+            value={<BulletedValueList values={detectionData.logTypes} limit={2} />}
           />
           <GenericItemCard.Value
             label="Events"

diff --git a/web/src/components/cards/RuleCard/RuleCard.tsx b/web/src/components/cards/RuleCard/RuleCard.tsx
@@ -22,7 +22,7 @@ import { Flex, Link, SimpleGrid } from 'pouncejs';
 import { Link as RRLink } from 'react-router-dom';
 import SeverityBadge from 'Components/badges/SeverityBadge';
 import StatusBadge from 'Components/badges/StatusBadge';
-import BulletedLogTypeList from 'Components/BulletedLogTypeList';
+import BulletedValueList from 'Components/BulletedValueList';
 import urls from 'Source/urls';
 import { RuleSummary, ComplianceStatusEnum } from 'Generated/schema';
 import { formatDatetime } from 'Helpers/utils';
@@ -60,7 +60,7 @@ const RuleCard: React.FC<RuleCardProps> = ({ rule }) => {
           <GenericItemCard.ValuesGroup>
             <GenericItemCard.Value
               label="Log Types"
-              value={<BulletedLogTypeList logTypes={rule.logTypes} limit={2} />}
+              value={<BulletedValueList values={rule.logTypes} limit={2} />}
             />
             <GenericItemCard.Value
               label="Destinations"

diff --git a/web/src/pages/AlertDetails/PolicyAlertDetails/AlertDetailsBanner/AlertDetailsBanner.tsx b/web/src/pages/AlertDetails/PolicyAlertDetails/AlertDetailsBanner/AlertDetailsBanner.tsx
@@ -20,7 +20,7 @@ import { Box, Flex, Heading, Card } from 'pouncejs';
 import React from 'react';
 import SeverityBadge from 'Components/badges/SeverityBadge';
 import { AlertSummaryPolicyInfo } from 'Generated/schema';
-import BulletedLogType from 'Components/BulletedLogType';
+import BulletedValue from 'Components/BulletedValue';
 import UpdateAlertDropdown from 'Components/dropdowns/UpdateAlertDropdown';
 import { AlertSummaryFull } from 'Source/graphql/fragments/AlertSummaryFull.generated';
 import { AlertDetails } from 'Pages/AlertDetails';
@@ -68,7 +68,7 @@ const AlertDetailsBanner: React.FC<AlertDetailsBannerProps> = ({ alert }) => {
           </Box>
           <Flex as="dd" align="center" spacing={6}>
             {(alert.detection as AlertSummaryPolicyInfo).resourceTypes.map(resourceType => (
-              <BulletedLogType key={resourceType} logType={resourceType} />
+              <BulletedValue key={resourceType} value={resourceType} />
             ))}
           </Flex>
         </Flex>

diff --git a/web/src/pages/AlertDetails/RuleAlertDetails/AlertDetailsBanner/AlertDetailsBanner.tsx b/web/src/pages/AlertDetails/RuleAlertDetails/AlertDetailsBanner/AlertDetailsBanner.tsx
@@ -20,7 +20,7 @@ import { Box, Flex, Heading, Card } from 'pouncejs';
 import React from 'react';
 import SeverityBadge from 'Components/badges/SeverityBadge';
 import { AlertDetailsRuleInfo, AlertTypesEnum } from 'Generated/schema';
-import BulletedLogType from 'Components/BulletedLogType';
+import BulletedValue from 'Components/BulletedValue';
 import UpdateAlertDropdown from 'Components/dropdowns/UpdateAlertDropdown';
 import { AlertSummaryFull } from 'Source/graphql/fragments/AlertSummaryFull.generated';
 import { AlertDetails } from 'Pages/AlertDetails';
@@ -78,7 +78,7 @@ const AlertDetailsBanner: React.FC<AlertDetailsBannerProps> = ({ alert }) => {
           </Box>
           <Flex as="dd" align="center" spacing={6}>
             {(alert.detection as AlertDetailsRuleInfo).logTypes.map(logType => (
-              <BulletedLogType key={logType} logType={logType} />
+              <BulletedValue key={logType} value={logType} />
             ))}
           </Flex>
         </Flex>

diff --git a/web/src/pages/ListLogSources/LogSourceCards/S3LogSourceCard.tsx b/web/src/pages/ListLogSources/LogSourceCards/S3LogSourceCard.tsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import { S3LogIntegration } from 'Generated/schema';
 import GenericItemCard from 'Components/GenericItemCard';
-import BulletedLogTypeList from 'Components/BulletedLogTypeList';
+import BulletedValueList from 'Components/BulletedValueList';
 import { formatDatetime } from 'Helpers/utils';
 import s3Logo from 'Assets/s3-minimal-logo.svg';
 import LogSourceCard from './LogSourceCard';
@@ -43,7 +43,7 @@ const S3LogSourceCard: React.FC<S3LogSourceCardProps> = ({ source }) => {
       <GenericItemCard.LineBreak />
       <GenericItemCard.Value
         label="Log Types"
-        value={<BulletedLogTypeList logTypes={source.logTypes} limit={4} />}
+        value={<BulletedValueList values={source.logTypes} limit={4} />}
       />
     </LogSourceCard>
   );

diff --git a/web/src/pages/ListLogSources/LogSourceCards/SqsLogSourceCard.tsx b/web/src/pages/ListLogSources/LogSourceCards/SqsLogSourceCard.tsx
@@ -20,7 +20,7 @@ import React from 'react';
 import { Box } from 'pouncejs';
 import { SqsLogSourceIntegration } from 'Generated/schema';
 import GenericItemCard from 'Components/GenericItemCard';
-import BulletedLogTypeList from 'Components/BulletedLogTypeList';
+import BulletedValueList from 'Components/BulletedValueList';
 import { formatDatetime } from 'Helpers/utils';
 import sqsLogo from 'Assets/sqs-minimal-logo.svg';
 import LogSourceCard from './LogSourceCard';
@@ -65,7 +65,7 @@ const SqsLogSourceCard: React.FC<SqsLogSourceCardProps> = ({ source }) => {
       <GenericItemCard.LineBreak />
       <GenericItemCard.Value
         label="Log Types"
-        value={<BulletedLogTypeList logTypes={source.sqsConfig.logTypes} limit={4} />}
+        value={<BulletedValueList values={source.sqsConfig.logTypes} limit={4} />}
       />
     </LogSourceCard>
   );

diff --git a/web/src/pages/RuleDetails/RuleDetailsBanner/RuleDetailsBanner.tsx b/web/src/pages/RuleDetails/RuleDetailsBanner/RuleDetailsBanner.tsx
@@ -26,7 +26,7 @@ import SeverityBadge from 'Components/badges/SeverityBadge';
 import StatusBadge from 'Components/badges/StatusBadge';
 import LinkButton from 'Components/buttons/LinkButton';
 import Breadcrumbs from 'Components/Breadcrumbs';
-import BulletedLogType from 'Components/BulletedLogType';
+import BulletedValue from 'Components/BulletedValue';
 import RelatedDestinations from 'Components/RelatedDestinations/RelatedDestinations';
 import useDetectionDestinations from 'Hooks/useDetectionDestinations';
 
@@ -99,7 +99,7 @@ const RuleDetailsBanner: React.FC<ResourceDetailsInfoProps> = ({ rule }) => {
             </Box>
             <Flex as="dd" align="center" spacing={6}>
               {rule.logTypes.map(logType => (
-                <BulletedLogType key={logType} logType={logType} />
+                <BulletedValue key={logType} value={logType} />
               ))}
             </Flex>
           </Flex>