Merge pull request #461 from bf2fc6cc711aee1a0c2a/lastFix

update style and empty state bug
bf2fc6cc711aee1a0c2a · Apr 23, 2021 · 961a29f · 961a29f
2 parents 63f0aba + c58b2da
commit 961a29f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/src/app/modules/OpenshiftStreams/OpenshiftStreams.tsx b/src/app/modules/OpenshiftStreams/OpenshiftStreams.tsx
@@ -93,6 +93,7 @@ const OpenshiftStreams = ({
   const [filteredValue, setFilteredValue] = useState<FilterType[]>([]);
   const [isUserUnauthorized, setIsUserUnauthorized] = useState<boolean>(false);
   const [isMobileModalOpen, setIsMobileModalOpen] = useState<boolean>(false);
+  const [waitingForDelete, setWaitingForDelete] = useState<boolean>(false);
 
   const updateSelectedKafkaInstance = () => {
     if (kafkaInstanceItems && kafkaInstanceItems?.length > 0) {
@@ -234,8 +235,10 @@ const OpenshiftStreams = ({
           if (kafkaInstancesList?.total !== undefined && kafkaInstancesList.total > expectedTotal) {
             setExpectedTotal(kafkaInstancesList.total);
           }
-          if ( kafkaInstanceItems?.length === 0) {
+
+          if (waitingForDelete && filteredValue.length < 1 && kafkaInstanceItems?.length === 0) {
             setIsDisplayKafkaEmptyState(true);
+            setWaitingForDelete(false);
           }
           setKafkaDataLoaded(true);
         });
@@ -571,6 +574,7 @@ const OpenshiftStreams = ({
             refresh={refreshKafkas}
             kafkaDataLoaded={kafkaDataLoaded}
             setIsDisplayKafkaEmptyState={setIsDisplayKafkaEmptyState}
+            setWaitingForDelete={setWaitingForDelete}
             onDelete={onDelete}
             page={page}
             perPage={perPage}

diff --git a/src/app/modules/OpenshiftStreams/components/StreamsTableView/StreamsTableView.tsx b/src/app/modules/OpenshiftStreams/components/StreamsTableView/StreamsTableView.tsx
@@ -44,7 +44,7 @@ export type StreamsTableProps = StreamsToolbarProps & {
   onConnectToRoute: (data: KafkaRequest, routePath: string) => void;
   getConnectToRoutePath: (data: KafkaRequest, routePath: string) => string;
   mainToggle: boolean;
-  refresh: () => void;
+  refresh: (arg0?: boolean) => void;
   kafkaDataLoaded: boolean;
   onDelete: () => void;
   expectedTotal: number;
@@ -53,6 +53,7 @@ export type StreamsTableProps = StreamsToolbarProps & {
   isDrawerOpen?: boolean;
   loggedInUser: string | undefined;
   isMaxCapacityReached?: boolean | undefined;
+  setWaitingForDelete: () => void;
 };
 
 type ConfigDetail = {
@@ -122,6 +123,7 @@ const StreamsTableView = ({
   isDisabledCreateButton,
   loggedInUser,
   labelWithTooltip,
+  setWaitingForDelete
 }: StreamsTableProps) => {
   const authContext = useContext(AuthContext);
   const { basePath } = useContext(ApiContext);
@@ -431,6 +433,7 @@ const StreamsTableView = ({
     try {
       await apisService.deleteKafkaById(instanceId, true).then(() => {
         setActiveRow(undefined);
+        setWaitingForDelete(true);
         refresh();
     });
     } catch (error) {

diff --git a/src/app/modules/OpenshiftStreams/components/StreamsTableView/StreamsToolbar.css b/src/app/modules/OpenshiftStreams/components/StreamsTableView/StreamsToolbar.css
@@ -15,4 +15,8 @@
   border-right: 1px solid var(--pf-c-select__toggle--before--BorderRightColor);
   border-bottom: 1px solid var(--pf-c-select__toggle--before--BorderBottomColor);
   border-left: 1px solid var(--pf-c-select__toggle--before--BorderLeftColor);
-}
+}
+
+.select-custom-width {
+  min-width: 265px;
+}
diff --git a/src/app/modules/OpenshiftStreams/components/StreamsTableView/StreamsToolbar.tsx b/src/app/modules/OpenshiftStreams/components/StreamsTableView/StreamsToolbar.tsx
@@ -396,6 +396,7 @@ const StreamsToolbar: React.FunctionComponent<StreamsToolbarProps> = ({
               isOpen={isCloudProviderFilterExpanded}
               onSelect={onCloudProviderFilterSelect}
               placeholderText={t('filter_by_cloud_provider')}
+              className="select-custom-width"
             >
               {cloudProviderFilterOptions.map((option, index) => (
                 <SelectOption
@@ -435,6 +436,7 @@ const StreamsToolbar: React.FunctionComponent<StreamsToolbarProps> = ({
               isOpen={isRegionFilterExpanded}
               onSelect={onRegionFilterSelect}
               placeholderText={t('filter_by_region')}
+              className="select-custom-width"
             >
               {regionFilterOptions.map((option, index) => (
                 <SelectOption
@@ -511,6 +513,7 @@ const StreamsToolbar: React.FunctionComponent<StreamsToolbarProps> = ({
               isOpen={isStatusFilterExpanded}
               onSelect={onStatusFilterSelect}
               placeholderText={t('filter_by_status')}
+              className="select-custom-width"
             >
               {statusFilterOptions.map((option, index) => (
                 <SelectOption